How To Download A Image That's On HTML5 Canvas?

I wrote this webRTC app which takes photos with different filters added onto it. When I click on the click button, the frame from the webRTC video feed is loaded onto the canvas on

Solution 1:

You can do this by using the .toDataURL() method on the canvas element. And then apply this to the download attribute to an <a> tag. We can add an anchor tag around the image:

<a>
    <canvas width="300" height="300" id="canvas"></canvas>
</a>

Now for the clicking on the canvas, we adjust the download and href of the <a> parent:

$('#canvas').click(function(){
     $(this).parent().attr('href', document.getElementById('canvas').toDataURL());
     $(this).parent().attr('download', "myPicture.png");    
});

Here is an example

Solution 2:

You might also consider using Concrete.js, which is a lightweight HTML5 Canvas Framework that does peripheral stuff like this, including downloads. You would just do:

canvas.download({
  fileName: 'my-file.png'
});