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

[solanki-ankit]

fabric.min.js?_=1529039733850:1 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at i.__toDataURL (http://teacherworkshop.in/js/fabric.min.js?_=1529039733850:1:118674)
    at i.__toDataURLWithMultiplier (http://teacherworkshop.in/js/fabric.min.js?_=1529039733850:1:118409)
    at i.toDataURL (http://teacherworkshop.in/js/fabric.min.js?_=1529039733850:1:117946)

I am getting above error.

I have created powerpoint like functionality with one website. which we can use in any other project like a third-party tool.

now I am getting above error with I use my site in another project as third party tool. if I am not used my site as the third party then it woks fine.

var dataURL = canvas.toDataURL();

in above code, I getting this error.

I have loaded canvas I just need to that canvas convert to dataURL but getting above error.

[joturako]

When you load image from the web with fabric.Image.fromURL the 3rd args must have the following value:

{
...
   crossOrigin: "Anonymous",
...
}

Note the uppercase characters.

[solanki-ankit]

I am not loading an image from URL. When the page renders I am creating one canvas drow what I want then I save this canvas as an image so before saving canvas image save API I need DataURL of the canvas. And getting this error.

[joturako]

Ah, I see you said you're using your tool (at site A) from inside another site (B). That may have the cross origin problem. I suspect you can't call toDataURL from your current site B, when the canvas is in your site A. I haven't meet this case yet, so it's just my guess. Please investigate.

[asturur]

if is not reproducible in a fiddle is not a problem we can take care of.

[jinchengyang]

i set useCORS to ture can solve this issue.

html2Canvas(document.querySelector('#pdfDom'), {
    useCORS: true
  }).then( (canvas)=> {
let pageData = canvas.toDataURL('image/jpeg', 1.0);
console.log(canvas);
}

[Uhelliton]

Quando você carrega uma imagem da Web com fabric.Image.fromURLo terceiro argumento, deve ter o seguinte valor:

{
...
   crossOrigin: "Anonymous",
...
}

Observe os caracteres maiúsculos.

Nice.....