Geek Answers Handbook

Save as image when right-clicking on canvas

When drawImage()used to draw something onto a canvas element, is it possible to treat the canvas as an image?

When I right-click on a drawn canvas element, dosent shows the Save Image As option.

This is the right-click menu that I see:

enter image description here

What needs to be done to be able to "save the image as"?

+4
source share
3 answers

, , , , , : ' <img> <img>.

var canvas = document.getElementById('exampleCanvas'); //Hidden <canvas> element
var imageFoo = document.getElementById('exampleImg'); //Visible <img> element

:

imageFoo.src = canvas.toDataURL();

, , - .

+6

" ..." - , ( Chrome Firefox) . .

, , :

download . , , , IE, " .." , download.

, , ( , -). , , CORS , .

:. , . ( , , , ...).

+1

, picuture :

<!doctype html>
<html lang="gb">
    <head>
    </head>
    <body>
        <canvas id="test"></canvas>
        <script>
            var canvas = document.getElementById('test');
            var ctx = canvas.getContext("2d");
            ctx.font = "30px Arial";
            ctx.fillText("Noel Rocks",10, 50);

            canvas.addEventListener("contextmenu", function(ev){
            ev.preventDefault();
            var image_png = canvas.toDataURL("image/png");

            var download = document.createElement('a');
            download.href = image_png;
            download.download = "canvas.png";

            var evObj = document.createEvent('MouseEvents');
            evObj.initEvent( "click", true, false );
            download.dispatchEvent(evObj)

            }, false);
        </script>
    </body>
</html>

, png, . Download, IE Safari, .

0

More articles:


All Articles