I'm trying to make a tshirt customizer with FabricJs.
But everytime i try to convert the canvas to Base64

$('#frontCanvas')[0].value = $('canvas')[0].toDataURL("image/png")

I get this error:

SecurityError: The operation is insecure.

I`m sure is about crossOrigin but i have no idea on how to add it to my script.
I tryed a lot, different methods, but with no success.

Any help will be apreciated.
Thank,you!

$scope.loadImage = function (source) {
    var opacity = (function (min, max) {
        return Math.random() * (max - min) + min;
    })(0.5, 1);

    fabric.Image.fromURL(source, function (image) {
        image.set({
            left: 100,
            top: 100,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint: true
        });

        //image.scale(getRandomNum(0.1, 0.25)).setCoords();
        canvas.add(image);
    });
};

I'm trying to make a tshirt customizer with FabricJs.
But everytime i try to convert the canvas to Base64

$('#frontCanvas')[0].value = $('canvas')[0].toDataURL("image/png")

I get this error:

SecurityError: The operation is insecure.

I`m sure is about crossOrigin but i have no idea on how to add it to my script.
I tryed a lot, different methods, but with no success.

Any help will be apreciated.
Thank,you!

$scope.loadImage = function (source) {
    var opacity = (function (min, max) {
        return Math.random() * (max - min) + min;
    })(0.5, 1);

    fabric.Image.fromURL(source, function (image) {
        image.set({
            left: 100,
            top: 100,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint: true
        });

        //image.scale(getRandomNum(0.1, 0.25)).setCoords();
        canvas.add(image);
    });
};

• javascript
• canvas
• fabricjs

• 1 Did you try using this instead: toDataURL("data:image/png;") – Miguel Commented Nov 14, 2015 at 16:43
• not working.. still getting the same error. – Rus Mine Commented Nov 14, 2015 at 16:57
• In production, the image source must be hosted in the same domain as the webpage. During development you can set up a web server on your development machine. Or during development you can use an image host that allows anonymous access to its images: stackoverflow./questions/18474727/… – markE Commented Nov 14, 2015 at 17:00
• 1 Try this: jsfiddle/Kienz/qZxa4 (I deleted my answer as @markE 's ment about CORS was correct) – Alon Eitan Commented Nov 14, 2015 at 17:04
• @Alon, your last answer with img.src = source and img.crossOrigin="anonymous"; helped me a lot . i modified the code and now i get no error . Why did you deleted it ? – Rus Mine Commented Nov 14, 2015 at 17:26

1 Answer 1

You can create the image this way:

var image = new Image;
image.crossOrigin="anonymous"; /* THIS WILL MAKE THE IMAGE CROSS-ORIGIN */
image.src = source;

And this is how you do it with fabric.js: http://fabricjs./docs/fabric.Image.html#crossOrigin (sorry I don't know this framework)