FabricJS ReactJS CORS Errors

Question

I have an application built with ReactJS where I am using FabricJS extensively. For FabricJS I am using https://www.npmjs.com/package/fabric-webpack . The images are hosted on a S3 bucket. CORS configuration for the bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

The problem is that the canvas gets tainted with some images and throws an error:

fabric.js:11485 Uncaught DOMException: Failed to execute 'toDataURL'
on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at n.__toDataURL (main.eab7fbf7.js:14:4552)
    at n.__toDataURLWithMultiplier (main.eab7fbf7.js:14:4342)
    at n.toDataURL (main.eab7fbf7.js:14:3894)
    at f (main.eab7fbf7.js:9:22786)
    at HTMLDivElement.<anonymous> (main.eab7fbf7.js:9:27492)
    at HTMLDivElement.dispatch (main.eab7fbf7.js:5:20443)
    at HTMLDivElement.g.handle (main.eab7fbf7.js:5:18462)
__toDataURL @ fabric.js:11485
__toDataURLWithMultiplier @ fabric.js:11464
toDataURL @ fabric.js:11434
f @ board.js:713
(anonymous) @ board.js:396
dispatch @ jquery.js:5201
g.handle @ jquery.js:5009

is there anything I am missing?

Answer 1

You Just need to add " crossOrigin " in your image object and boom your will go away. without adding this it will always give this kind of errors.

element['crossOrigin'] = "anonymous"

Answer 2

image = 'http://asd.com/myImg.jpg' fabric.Image.fromURL( image, function(img) { canvas.add(img) canvas.renderAll() }, {crossOrigin: "anonymous"}, )

you welcome , buddy