Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. #1614

jamesmarva · 2018-08-02T09:37:14Z

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

Bug reports:

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

html2canvas version tested with:
Chrome 67.0.3396.99
Windows 10

The text was updated successfully, but these errors were encountered:

samiahakmi · 2018-08-20T14:26:07Z

I have also the same issues.
Did you find a solution or workaround?

AkashaP · 2018-08-24T06:09:12Z

i'm doing the same thing in Firefox 61.0.2 and i'm getting a SecurityError despite setting allowTaint to true

dorklord23 · 2018-09-26T09:04:13Z

No solution as far as I know, but I have a workaround: change every image to base64. That way, you could render it in canvas even though it's originally from different domain.

fairyly · 2019-01-10T03:07:15Z

Have you saw this: CORS_enabled_image

If the source of the foreign content is an HTML element, attempting to retrieve the contents of the canvas isn't allowed.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted.

I use the configuration options like this:

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

sandinosaso · 2019-02-28T21:51:27Z

Hi, we faced the same problem. We followed @dorklord23 suggestion because we already had a proxy url that did the conversion.

If someone found it helpful the solution was:

      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')}`);
      });

Where the helper function convertAllImagesToBase64 is:

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

By the way this are the tests for that helper function (we are using jest for wrting test and mockFetch packages):

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',
      });
    });
  });
});

Ruby backend enpdoint:

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

I hope someone find this helpful. I hope it helps someone not to invest as much time as we did to fix this properly.

If you can see any improvment please suggest.
Regards.

zhaosaisai · 2019-05-06T09:57:43Z

If you do like below, what will happen?

const TempImage = window.Image

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

NishantTeria · 2019-08-10T09:42:57Z

Found a solution and it is working

While calling html2canvas,pass useCORS true
html2canvas(selectorElement,{useCORS:true}).then(canvas => {
//do something
});
Correct html2canvas.js file. Theres typo mistake
Change "anonymous" to "Anonymous" in this if block
if (isInlineBase64Image(src) || useCORS) {
img.crossOrigin = 'Anonymous';
}

RodrigoMotaSoares · 2019-12-23T15:14:27Z

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

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

html2canvas version tested with:

Chrome 67.0.3396.99

Windows 10

You will need to use just the property 'useCORS: true', if you use the property 'allowTaint: true' you give permssion to turn your canvas into a tainted canvas

USE THIS:

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

INSTEAD OF THIS:

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

richardblondet · 2020-03-21T00:44:44Z

Hello, nice work for html2canvas.

Sadly I'm facing the same issue, has anyone solved this?
Already tried @motarock and all before that, plus combinations, etc. The image is white with nothing painted.

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

Thanks in advance

stevenshen1020 · 2020-04-01T07:52:52Z

I have also the same issues.
Any one can fix this issue?

z1haze · 2020-04-17T17:23:00Z

:( same issue. we have html with nested svg and it will not render

hidajoned · 2020-05-13T23:00:08Z

Already tried @motarock and all before that, plus combinations, etc. The image is white with nothing painted.

I have this issue when I don't use SSL, With SSL works perfect

bharatsavani · 2021-05-11T12:26:40Z

Hi, we faced the same problem. We followed @dorklord23 suggestion because we already had a proxy url that did the conversion.

If someone found it helpful the solution was:

      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')}`);
      });

Where the helper function convertAllImagesToBase64 is:

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

By the way this are the tests for that helper function (we are using jest for wrting test and mockFetch packages):

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',
      });
    });
  });
});

Ruby backend enpdoint:

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

I hope someone find this helpful. I hope it helps someone not to invest as much time as we did to fix this properly.

If you can see any improvment please suggest.
Regards.

I have used your approach and get image from my backend as base64 and it works
thank you so much for this idea

ghost · 2021-12-03T13:45:18Z

I had same problem.
It was solved using images from same domain.

realdavidalad · 2022-03-03T08:39:51Z

Setting foreignObjectRendering to true worked for me.
html2canvas(document.body, {
allowTaint: true,
foreignObjectRendering: true
});

yhsang2 · 2023-09-18T23:50:43Z

foreignObjectRendering을 true로 설정하면 저에게 효과적이었습니다. html2canvas(document.body, { allowTaint: true, foreignObjectRendering: true });

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

Oh, this worked for me. Thank you!

hadihonarvar · 2023-10-26T21:23:20Z

this worked for my next.js app.

 html2canvas(canvas,{useCORS:true}).then(cnvs => {
        if (cnvs.toDataURL) {
                const dataURL = cnvs.toDataURL('image/png');
                console.log(dataURL)  
        }
});

prashanthgundas mentioned this issue Apr 16, 2021

not loading the image when disable cache button disabled in chrome Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported malaman/react-image-zoom#19

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. #1614

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. #1614

jamesmarva commented Aug 2, 2018

samiahakmi commented Aug 20, 2018

AkashaP commented Aug 24, 2018

dorklord23 commented Sep 26, 2018

fairyly commented Jan 10, 2019

sandinosaso commented Feb 28, 2019 •

edited

zhaosaisai commented May 6, 2019

NishantTeria commented Aug 10, 2019

RodrigoMotaSoares commented Dec 23, 2019 •

edited

Bug reports:

richardblondet commented Mar 21, 2020

stevenshen1020 commented Apr 1, 2020

z1haze commented Apr 17, 2020

hidajoned commented May 13, 2020

bharatsavani commented May 11, 2021

ghost commented Dec 3, 2021

realdavidalad commented Mar 3, 2022

yhsang2 commented Sep 18, 2023 •

edited

hadihonarvar commented Oct 26, 2023 •

edited

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. #1614

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. #1614

Comments

jamesmarva commented Aug 2, 2018

Bug reports:

samiahakmi commented Aug 20, 2018

AkashaP commented Aug 24, 2018

dorklord23 commented Sep 26, 2018

fairyly commented Jan 10, 2019

sandinosaso commented Feb 28, 2019 • edited

zhaosaisai commented May 6, 2019

NishantTeria commented Aug 10, 2019

RodrigoMotaSoares commented Dec 23, 2019 • edited

Bug reports:

richardblondet commented Mar 21, 2020

stevenshen1020 commented Apr 1, 2020

z1haze commented Apr 17, 2020

hidajoned commented May 13, 2020

bharatsavani commented May 11, 2021

ghost commented Dec 3, 2021

realdavidalad commented Mar 3, 2022

yhsang2 commented Sep 18, 2023 • edited

hadihonarvar commented Oct 26, 2023 • edited

sandinosaso commented Feb 28, 2019 •

edited

RodrigoMotaSoares commented Dec 23, 2019 •

edited

yhsang2 commented Sep 18, 2023 •

edited

hadihonarvar commented Oct 26, 2023 •

edited