canvas toDataURL() - operation is insecure

Question

I'm using fabric.js to draw annotations on page. Now I want to save anootated page as is, rather than to redraw all elements on server side using JSON.

I have main image loaded as:

function redrawPage(src) {
                var deferred = $q.defer();

                fabric.Image.fromURL(src, function (img) {
                    zoom.reset();
                    transformation.reset();

                    mainImage = img;
                    mainImage.set({
                        left: 0,
                        top: 0
                    });
                    mainImage.hasRotatingPoint = true;
                    mainImage.selectable = false;

                    canvas.clear();
                    canvas.setWidth(mainImage.getWidth());
                    canvas.setHeight(mainImage.getHeight());
                    canvas.add(mainImage);

                    canvas.renderAll();

                    deferred.resolve();
                });

                return deferred.promise;
            }

and when I want to send canvas image data to be stored as annotated version of original image, I get "Operation is insecure" error.

function getImageData() {
    var context = canvas.getContext('2d'),
        imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    return imageData.data;
}

web server from which I load images is not allowing crossOrigin set to "Anonymus"

score 4 · Accepted Answer · edited May 23 '17 at 11:59

4

If the image host does not allow anonymous access then your .getImageData & .toDataURL will always fail because the canvas is tainted. No enduring workaround for that.

You can copy (or re-route) the image to your own server and deliver it from the same domain as your web page. This satisfies cross-origin restrictions so your canvas will not be tainted and your .getImageData will succeed. Of course, copyright laws apply.

There are several other workarounds that involve the user confirming that they want the image to be loaded in a cross-origin compliant way. Here's a relevant Stackoverflow post.

edited May 23 '17 at 11:59

Community

1
1

answered Jan 20 '16 at 19:09

markE

102,905
11
164
176

images are rendered from my sub domain, http//api.mdomain.com but I can't allow CORS anonymus access for all requests because of security reasons – dzona Jan 20 '16 at 19:26
``Serverside: The server must be configured to return header(s) indicating that the response contains authorized content.`` can you please give me an example how to set up server to achieve this – dzona Jan 20 '16 at 19:31
1

I was about to say :-) ... In addition to anonymous access, you can also set your image server to deliver to authorized destinations. If your design allows giving credentials to your authorized clients you can serve cross-origin compliant images with credentials. Here's an [authoritative link on configuring CORS enabled servers](http://enable-cors.org/index.html). – markE Jan 20 '16 at 19:36
I'm removing image used as document page, and retrieve img data from canvas without it – dzona Jan 20 '16 at 21:39

canvas toDataURL() - operation is insecure

1 Answers1