• Register
0 votes
332 views

Problem :

I want to save my canvas to a img. I have this function:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

It gives me error:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

What should I do?

6 5 3
6,930 points

Please log in or register to answer this question.

1 Answer

0 votes

Solution :

I had faced similar issue recently. I did lot research and found the following solution to the issue:

You must have a server which should be hosting images with the appropriate Access-Control-Allow-Origin header.

<IfModule mod_setenvif.c>

    <IfModule mod_headers.c>

        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">

            SetEnvIf Origin ":" IS_CORS

            Header set Access-Control-Allow-Origin "*" env=IS_CORS

        </FilesMatch>

    </IfModule>

</IfModule>

You can save those images to DOM Storage as if they were served from your domain otherwise you may run into security issue.

var img = new Image,

    canvas = document.createElement("canvas"),

    ctx = canvas.getContext("2d"),

    src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {

    canvas.width = img.width;

    canvas.height = img.height;

    ctx.drawImage( img, 0, 0 );

    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );

}

img.src = src;

// make sure the load event fires for cached images too

if ( img.complete || img.complete === undefined ) {

    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

    img.src = src;

}

If you follow above procedure then your issue will be resolved.

9 7 4
38,600 points

Related questions

0 votes
1 answer 1.2K views
1.2K views
Problem : Facing following javascript issue failed to execute 'removechild' on 'node': the node to be removed is not a child of this node.
asked Nov 14, 2019 peterlaw 6.9k points
0 votes
1 answer 1.3K views
1.3K views
Problem : I want to drag and drop the image on the div. The image does not get dragged onto a div and gives the below error : Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop
asked Jan 18, 2020 jwilliam 3.9k points
1 vote
1 answer 693 views
693 views
Problem : Trying to drag and drop an image on a div. but the image does not get dragged on to the div and gives the following error: uncaught typeerror: failed to execute 'appendchild' on 'node': parameter 1 is not of type 'node'.
asked Nov 11, 2019 peterlaw 6.9k points
0 votes
1 answer 48 views
48 views
I'm trying to render html files, but I'm having an issue. This works. app.get('/randomlink', function(req, res) { res.sendFile( __dirname + "/views/" + "test2.html" ); }); But I don't want to copy and paste dirname thingy over and over, so I tried this ... // test2.html exists in the views folder }); Here's the error. path must be absolute or specify root to res.sendFile Please help me solve this.
asked Jan 23 khaled 280 points
0 votes
1 answer 1.7K views
1.7K views
Problem : I am trying to build the Google Chrome extension. I searched on every platform and took every step to resolve my below error &ldquo;Your file was not found it may have been moved or deleted. err_file_not_found&rdquo; I have done everything that I could , but ... \User Data**),like the other extensions my extension also has no folder. Please let me know how to fix the extension issue.
asked Jan 22, 2020 jwilliam 3.9k points
0 votes
1 answer 54 views
54 views
Problem : I am unable to understand the root cause of following error, because when I attach the debugger it will not occur. Invalid operation exception: collection was modified; enumeration operation may not execute. This is the WCF server in a Window based service. The method ... , the code executes fine. Do you see a problem in my code? Do I need to make the dictionary the thread-safe?
asked Nov 24, 2019 alecxe 7.5k points
0 votes
1 answer 13 views
13 views
Problem: When I try to upgrade my database from Mvc-AngularJs to wcf-Rest, I get an error like Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9706/EmployeeService.svc/UpdatexyzData/Update/but with the same ur when I try to get ... : { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded ;charset=utf-8' } }) return ss; }
asked Jan 24 sasha 8.4k points