CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Becky
Becky

Reputation: 5585

Save as image when right clicked on canvas

When drawImage() is used to draw something on to a canvas element, can the canvas be treated as an image?

When I right click on the drawn canvas element it dosent show the "Save image as" option.

This is the right click menu I see:

enter image description here

What should be done to have the "save image as" option available?

Upvotes: 4

Views: 2745

Answers (3)

Noelkd
Noelkd

Reputation: 7896

You can do this if you want to download the picuture on the canvas:

<!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>

Basically it overwrites the context menu, sets up a link with the canvas as a png and then sends the click event to the link. I have used the Download attribute which isn't available in any version of IE or Safari so might not really be fit for general use.

Upvotes: 0

David Mulder
David Mulder

Reputation: 26985

So, this depends a lot on the browser and how it works and in general I wouldn't advise messing with this, but if you have to get this working for one reason or another there is a way: You can 'simply' convert the canvas to an <img> element after each draw and show the <img> element instead. 

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

And then after each draw is finished:

imageFoo.src = canvas.toDataURL();

The disadvantage here is that you will lose a lot of speed, so do not use this for animated canvases or anything like that.

Upvotes: 6

user1693593
user1693593

Reputation:

The "Save as image.." is something some browsers (incl. Chrome and Firefox) includes in the context menu for convenience. It's not a standard in any way though.

You could emulate the right-click and provide a custom context menu with the option of save as, however, here is the caveat:

For this to work you need to have the download attribute in the A-tag supported as well. The problem is that for example IE, which does not provide the "Save as image.." option in the menu, neither support the download attribute.

The better option is probably to insert an actual image instead of or on top of the canvas when completed (depending on how the alpha channel is used). This may not always be feasible if the content is dynamic and constantly updating, and there is CORS restrictions at play as well for images loaded from external sources.

In conclusion: There is little one can do to make a solid workaround for this. It is and will be a browser feature pretty much (and being selective about which browser to support is already the case with the feature itself, so no gain here...).

Upvotes: 1

Related Questions