HTML5 Canvas to PNG File

To convert HTML5 canvas to PNG, follow the below-given steps −

You need to add the generated data URL to the href attribute of an <a> tag.

Dialog for base64 image −

<img src="data:image/png;base64,iOBVRw0KGgoAAAANSUhEUg...." class="image" />

Add a filename −

<a download="newimg.png" href="...">

Now define http headers −

headers=Content-Disposition: attachment; filename=newimg.png

To deal with the RAM of the web browser and make its utilization less −

// generated the data URL dynamically
function myCanvas() {
   var d = canvas.toDataURL('image/png');
   this.href = d;
};
d.addEventListener('click', myCanvas, false);