Html2canvas: 'HTMLCanvasElement' पर 'toDataURL' निष्पादित करने में विफल: दागी कैनवस निर्यात नहीं किया जा सकता है।

मेरे पास भी वही मुद्दे हैं।
क्या आपको कोई समाधान या समाधान मिला?

मैं फ़ायरफ़ॉक्स 61.0.2 में वही काम कर रहा हूं और अनुमति देने के बावजूद मुझे सुरक्षा त्रुटि मिल रही है

जहां तक ​​​​मुझे पता है कोई समाधान नहीं है, लेकिन मेरे पास वर्कअराउंड है: प्रत्येक छवि को बेस 64 में बदलें। इस तरह, आप इसे कैनवास में प्रस्तुत कर सकते हैं, भले ही यह मूल रूप से भिन्न डोमेन से हो।

क्या आपने इसे देखा है: CORS_enabled_image

यदि विदेशी सामग्री का स्रोत HTML है तत्व, कैनवास की सामग्री को पुनः प्राप्त करने का प्रयास करने की अनुमति नहीं है।

जैसे ही आप किसी कैनवास में कोई डेटा खींचते हैं जो बिना CORS अनुमोदन के किसी अन्य मूल से लोड किया गया था, कैनवास दागदार हो जाता है।

मैं इस तरह के कॉन्फ़िगरेशन विकल्पों का उपयोग करता हूं:

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

नमस्ते, हमें एक ही समस्या का सामना करना पड़ा। हमने @dorklord23 सुझाव का पालन किया क्योंकि हमारे पास पहले से ही एक प्रॉक्सी url था जिसने रूपांतरण किया था।

अगर किसी को यह मददगार लगा तो समाधान था:

      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 };

वैसे यह उस सहायक फ़ंक्शन के लिए परीक्षण हैं (हम परीक्षण और मॉकफ़ेच पैकेज लिखने के लिए जेस्ट का उपयोग कर रहे हैं):

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 को कॉल करते समय, CORS true का उपयोग करें
   html2canvas(selectorElement, {useCORS:true} )
   //कुछ करो
   });

2. सही html2canvas.js फ़ाइल। टाइपो की गलती है
   इसमें "अनाम" को "बेनामी" में बदलें यदि ब्लॉक
   अगर (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 संस्करण के साथ परीक्षण किया गया:
• क्रोम ६७.०.०.३३९६.९९
• विंडोज 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..
      })
    });

अग्रिम में धन्यवाद

मेरे पास भी वही मुद्दे हैं।
कोई इस मुद्दे को ठीक कर सकता है?

:( एक ही मुद्दा। हमारे पास नेस्टेड एसवीजी के साथ एचटीएमएल है और यह प्रस्तुत नहीं करेगा

पहले से ही @motarock और

मेरे पास यह समस्या है जब मैं एसएसएल का उपयोग नहीं करता, एसएसएल के साथ सही काम करता है