Html2canvas: 'HTMLCanvasElement'에서 'toDataURL' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다.

나도 같은 문제가 있습니다.
해결책이나 해결 방법을 찾았습니까?

Firefox 61.0.2에서 동일한 작업을 수행하고 있고 allowTaint를 true로 설정했음에도 불구하고 SecurityError가 발생합니다.

내가 아는 한 해결책은 없지만 해결 방법이 있습니다. 모든 이미지를 base64로 변경합니다. 그렇게 하면 원래 다른 도메인에서 왔더라도 캔버스에서 렌더링할 수 있습니다.

이것을 본 적이 있습니까: CORS_enabled_image

외부 콘텐츠의 소스가 HTML인 경우 요소에서 캔버스의 콘텐츠를 검색하려는 시도는 허용되지 않습니다.

CORS 승인 없이 다른 출처에서 로드된 데이터를 캔버스에 그리는 즉시 캔버스가 오염됩니다.

다음과 같은 구성 옵션을 사용합니다.

html2canvas(document.body, {
    allowTaint: true,
    foreignObjectRendering: true
});

안녕하세요, 우리는 같은 문제에 직면했습니다. 우리는 이미 변환을 수행한 프록시 URL이 있었기 때문에 @dorklord23 제안을 따랐습니다.

누군가가 도움이 된 경우 솔루션은 다음과 같습니다.

      html2canvas(document.body, {
        proxy: this._proxyURL,
        allowTaint: true,
        onclone: (cloned) => convertAllImagesToBase64(this._proxyURL, cloned),
      }).then((canvas) => {
        this._postmessageChannel.send(`get.screenshot:${canvas.toDataURL('image/png')}`);
      });

도우미 함수 convertAllImagesToBase64는 다음과 같습니다.

const convertAllImagesToBase64 = (proxyURL, cloned) => {
  const pendingImagesPromises = [];
  const pendingPromisesData = [];

  const images = cloned.getElementsByTagName('img');

  for (let i = 0; i < images.length; i += 1) {
    // First we create an empty promise for each image
    const promise = new Promise((resolve, reject) => {
      pendingPromisesData.push({
        index: i, resolve, reject,
      });
    });
    // We save the promise for later resolve them
    pendingImagesPromises.push(promise);
  }

  for (let i = 0; i < images.length; i += 1) {
    // We fetch the current image
    fetch(`${proxyURL}?url=${images[i].src}`)
      .then((response) => response.json())
      .then((data) => {
        const pending = pendingPromisesData.find((p) => p.index === i);
        images[i].src = data;
        pending.resolve(data);
      })
      .catch((e) => {
        const pending = pendingPromisesData.find((p) => p.index === i);
        pending.reject(e);
      });
  }

  // This will resolve only when all the promises resolve
  return Promise.all(pendingImagesPromises);
};

export { convertAllImagesToBase64 };

그건 그렇고 이것은 그 도우미 기능에 대한 테스트입니다(우리는 테스트 및 mockFetch 패키지를 작성하기 위해 jest를 사용하고 있습니다):

import { convertAllImagesToBase64 } from '../images';

fetch.resetMocks();

// Mock fetch to respond different for each image so we can assert that the image return the correct response
// Also make one of the response be delayed (2 seconds) to simulate the response is not in the same order we do the call (network latency, image size, etc)
fetch.mockImplementation((url) => {
  if (url.includes('imagesrc1')) {
    return Promise.resolve(new Response(JSON.stringify('data:image/png;base64,1')));
  } else if (url.includes('imagesrc2')) {
    return new Promise((resolve) => setTimeout(resolve(new Response(JSON.stringify('data:image/png;base64,2'))), 2000));
  } else if (url.includes('imagesrc3')) {
    return Promise.resolve(new Response(JSON.stringify('data:image/png;base64,3')));
  }
  return Promise.resolve(new Response(JSON.stringify('')));
});

const mocksImages = [
  { id: 1, src: 'imagesrc1' },
  { id: 2, src: 'imagesrc2' },
  { id: 3, src: 'imagesrc3' },
];

const mockClone = {
  getElementsByTagName: jest.fn(() => mocksImages),
};

describe('utils/images', () => {  
  it('convertAllImagesToBase64. Expect to call 3 times to the correct enpoint using the image source', async () => {
    const allPromises = convertAllImagesToBase64('http://localhost/fake_proxy', mockClone);

    // Expect the clone elements gets all the image tags
    expect(mockClone.getElementsByTagName).toBeCalledWith('img');

    allPromises.then(() => {
      // Expect to have done the 3 fetch calls and with the correct params
      expect(fetch).toBeCalledTimes(3);
      expect(fetch).toHaveBeenNthCalledWith(1, 'http://localhost/fake_proxy?url=imagesrc1');
      expect(fetch).toHaveBeenNthCalledWith(2, 'http://localhost/fake_proxy?url=imagesrc2');
      expect(fetch).toHaveBeenNthCalledWith(3, 'http://localhost/fake_proxy?url=imagesrc3');

      // Expect that our images where updated properly
      expect(mocksImages).toContainEqual({
        id: 1, src: 'data:image/png;base64,1',
      });
      expect(mocksImages).toContainEqual({
        id: 2, src: 'data:image/png;base64,2',
      });
      expect(mocksImages).toContainEqual({
        id: 3, src: 'data:image/png;base64,3',
      });
    });
  });
});

루비 백엔드 엔드포인트:

require 'base64'
require 'net/http'

module Api
  module V1
    class ImageProxyController < ApiController
      def index
        url   = URI.parse(params[:url])
        image = Net::HTTP.get_response(url)

        render json: data_url(image).to_json, callback: params[:callback]
      end

      private

        def data_url(image)
          "data:#{image.content_type};base64,#{Base64.encode64(image.body)}"
        end

    end
  end
end

누군가가 도움이되기를 바랍니다. 누군가가 이 문제를 올바르게 수정하는 데 많은 시간을 투자하지 않도록 도움이 되길 바랍니다.

개선 사항을 볼 수 있으면 제안하십시오.
문안 인사.

아래와 같이 하면 어떻게 될까요?

const TempImage = window.Image

 const Image = function() {
        const img = new TempImage()
        img.crossOrigin = 'anonymous'
        return img
 }

솔루션을 찾았고 작동 중입니다.

1. html2canvas를 호출하는 동안 useCORS true를 전달합니다.
   html2canvas(selectorElement, {useCORS:true} ).then(캔버스 => {
   //무언가를 하다
   });

2. html2canvas.js 파일을 수정하세요. 오타 오타가 있습니다
   이 if 블록에서 "anonymous"를 "Anonymous"로 변경하십시오.
   if (isInlineBase64Image(src) || ​​useCORS) {
   img.crossOrigin = '익명';
   }

var canvasPromise  = html2canvas(document.body, {
                allowTaint: true,
                useCORS: true
            });
canvasPromise.then(function(canvas) {
    document.body.appendChild(canvas);
    console.log(canvas);
    canvas.toDataURL('image/png');
});

버그 보고서:

잡히지 않음(약속 중) DOMException: 'HTMLCanvasElement'에서 'toDataURL' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다.

• 다음으로 테스트된 html2canvas 버전:
• 크롬 67.0.3396.99
• 윈도우 10

'useCORS: true' 속성만 사용해야 합니다. 'allowTaint: true' 속성을 사용하는 경우 캔버스를 오염된 캔버스로 전환할 수 있는 권한을 부여합니다.

이것을 사용하십시오:

var canvasPromise  = html2canvas(document.body, {
                useCORS: true
            });
canvasPromise.then(function(canvas) {
    document.body.appendChild(canvas);
    console.log(canvas);
    canvas.toDataURL('image/png');
});

대신:

var canvasPromise  = html2canvas(document.body, {
                allowTaint: true,
                useCORS: true
            });
canvasPromise.then(function(canvas) {
    document.body.appendChild(canvas);
    console.log(canvas);
    canvas.toDataURL('image/png');
});

안녕하세요, html2canvas에 대한 좋은 작업입니다.

슬프게도 나는 같은 문제에 직면하고 있습니다. 아무도 이것을 해결 했습니까?
이미 @motarock 및 그 이전의 모든 것, 더하기 조합 등을 시도 칠하지 않은 흰색입니다.

downloadQRCode = (fileName) => {
    html2canvas(document.getElementById('generated-qr-code'), {
      useCORS: true,
      // allowTaint: false,
      // logging: true,
    }).then((canvas) => {
      // document.body.appendChild(canvas); // checking
      const data = canvas.toDataURL('image/jpeg');
      const element = document.createElement('a');
      element.setAttribute('href', data);
      element.setAttribute('download', fileName + '.jpeg');
      document.body.appendChild(element);
      element.click();
      // document.body.removeChild(element);
      console.log("%c data", "font-size:2em;", data, fileName);
      console.log("%c canvas", "font-size:2em;", canvas );
      this.setState({
        imageSrc: data // setting the src of a img tag to check the result. Nothing in it either..
      })
    });

미리 감사드립니다

나도 같은 문제가 있습니다.
누구든지 이 문제를 해결할 수 있습니까?

:(같은 문제. 중첩된 svg가 있는 html이 있고 렌더링되지 않습니다.

이미 @motarock 및 그 이전의 모든 것, 더하기 조합 등을 시도 칠하지 않은 흰색입니다.

SSL을 사용하지 않을 때 이 문제가 발생합니다. SSL이 완벽하게 작동합니다.