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

[deanoemcke]

Bug reports:

I am getting a tainted canvas error, even with the allowTaint flag set to false.
Similar to #1409.
The url I'm testing is: http://en.miui.com/forum.php
I'm not sure how to set up a jsFiddle with this sorry, but I have tested it via a chrome extension using the executeScript functionality.

From extension:

var captureScreenCode = 
  `html2canvas(document.body, {
    allowTaint: false,
    useCORS: false
    }).then(function(canvas) {
    console.log(canvas.toDataURL());
  });`;
chrome.tabs.executeScript(1234, { file: 'html2canvas.js' }, () => {
  chrome.tabs.executeScript(1234, { code: captureScreenCode });
});

Console output of tab:

0ms html2canvas: html2canvas 1.0.0-alpha.10
html2canvas.js:2673 978ms html2canvas: Document cloned, using computed rendering
html2canvas.js:2673 981ms html2canvas: Starting node parsing
html2canvas.js:2673 996ms html2canvas: Added image http://en.miui.com/static/image/miui/base/logo.png
html2canvas.js:2673 1056ms html2canvas: Added image http://en.miui.com/static/image/miui/base/pin_3.gif
html2canvas.js:2673 1063ms html2canvas: Added image http://en.miui.com/static/image/miui/base/rushreply_z.png
html2canvas.js:2673 1066ms html2canvas: Added image http://en.miui.com/static/image/miui/base/hot_3.gif
html2canvas.js:2673 1070ms html2canvas: Added image http://en.miui.com/static/image/miui/base/agree.gif
html2canvas.js:2673 1091ms html2canvas: Added image http://en.miui.com/static/image/miui/base/hot_1.gif
html2canvas.js:2673 1168ms html2canvas: Added image http://en.miui.com/static/image/miui/base/hot_2.gif
html2canvas.js:2673 1290ms html2canvas: Added image http://en.miui.com/static/image/miui/base/pin_2.gif
html2canvas.js:2673 1560ms html2canvas: Added image http://en.miui.com/static/image/miui/base/pin_1.gif
html2canvas.js:2673 1596ms html2canvas: Added image http://en.miui.com/static/image/miui/base/imghack.png
html2canvas.js:2673 1625ms html2canvas: Added image http://en.miui.com/static/image/miui/base/signin_2.png
html2canvas.js:2673 1665ms html2canvas: Added image http://en.miui.com/static/image/miui/base/icon_mi_facebook.jpg
html2canvas.js:2673 1668ms html2canvas: Added image http://en.miui.com/static/image/miui/base/icon_mi_twitter.jpg
html2canvas.js:2673 1676ms html2canvas: Added image http://en.miui.com/static/image/miui/base/icon_mi_gplus.jpg
html2canvas.js:2673 1682ms html2canvas: Added image http://en.miui.com/static/image/miui/base/icon_mi_weibo.jpg
html2canvas.js:2673 1686ms html2canvas: Added image http://en.miui.com/static/image/miui/base/icon_youtube.png
html2canvas.js:2673 1689ms html2canvas: Added image http://en.miui.com/static/image/miui/base/miuiweb.jpg?4
html2canvas.js:2673 1705ms html2canvas: Added image http://en.miui.com/static/image/miui/base/fansStationRetract.png?t=0
html2canvas.js:2673 1711ms html2canvas: Added image http://en.miui.com/static/image/miui/base/fansStationRetract.png??t=0
html2canvas.js:2673 1730ms html2canvas: Added image http://en.miui.com/static/image/miui/base/footer_title.png
html2canvas.js:2673 1778ms html2canvas: Finished parsing node tree
html2canvas.js:2673 1951ms html2canvas: Finished loading 20 images (20) [img, img, img, img, img, img, img, img, img, img, img, img, img, img, img, img, img, img, img, img]
html2canvas.js:2673 1957ms html2canvas: Starting renderer
html2canvas.js:2673 1959ms html2canvas: Canvas renderer initialized (1388x3165 at 0,0) with scale 2
html2canvas.js:2673 2064ms html2canvas: Render completed
VM289:5 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at <anonymous>:5:24
    at <anonymous>

Specifications:

• html2canvas version tested with: 1.0.0-alpha.10
• Browser & version: Google chrome v64.0.3282.140 (Official Build) (64-bit)
• Operating system: macOS High Sierra v10.13.3

Thanks for all your work on this amazing library.

[amitguptagwl]

I'm able to get toDataURL() with html2canvas 0.4.1 but not latest one.

[CooLNuanfeng]

+1

[amitguptagwl]

I've switched to "dom to image" library which solved my issue. Here is the result match-it

[jamesmarva]

hi man, do you solve it ?

[amitguptagwl]

@jamesmarva as you've not addressed particular one in your problem, yes as I said I've switched to other library which solved my problem.

[jamesmarva]

@amitguptagwl thanks, do you know use which library to save website-screenshot to he image?

[amitguptagwl]

@jamesmarva This is what I used to save image of particular div. I hope it should work for full page as well

https://github.com/tsayen/dom-to-image

[jamesmarva]

@amitguptagwl thank u very much.

[zhaosaisai]

Let us hack it

const TempImage = window.Image

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

It works