how to set crossorigin of img on javascript

Question

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

Did you try using this instead: toDataURL("data:image/png;") — Miguel, Nov 14 '15 at 16:43
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: http://stackoverflow.com/questions/18474727/canvas-has-been-tainted-by-cross-origin-data-work-around/18475559#18475559 — markE, Nov 14 '15 at 17:00
Try this: http://jsfiddle.net/Kienz/qZxa4/ (I deleted my answer as @markE 's comment about CORS was correct) — Alon Eitan, Nov 14 '15 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, Nov 14 '15 at 17:26
@RusMine - I thought it wasn't accurate but I apparently it helped, so I undeleted it — Alon Eitan, Nov 14 '15 at 18:35

score 6 · Accepted Answer · answered Nov 14 '15 at 16:47

6

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.com/docs/fabric.Image.html#crossOrigin (sorry I don't know this framework)

answered Nov 14 '15 at 16:47

Alon Eitan

11,997
8
49
58

1

Just adding `image.crossOrigin="anonymous"` won't get the job done. To make it effective you must also configure the server to send headers allowing the cross-domain transfer: http://enable-cors.org/ – markE Nov 14 '15 at 16:53
any idea on how to deactivate that security method ? – Rus Mine Nov 14 '15 at 17:00
@markE - Thank you for that comment but AFAIK the CORS is limited only for ajax request: "A web page may freely embed images, stylesheets, scripts, iframes, videos and some plugin content from any other domain. However embedded web fonts and AJAX requests have traditionally been limited to accessing the same domain as the parent web page (https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) – Alon Eitan Nov 14 '15 at 17:00
@RusMine - Here's some [jsfiddle](http://jsfiddle.net/Kienz/qZxa4/) someone made - hope it helps – Alon Eitan Nov 14 '15 at 17:02

how to set crossorigin of img on javascript

1 Answers1