Image On Html Canvas Can't Be Downloaded

I have HTML canvas and it work fine to display image. And I have this jquery code to download the image : $('.img-download').click(function(){ var data = canvas.toDataURL();

Solution 1:

Try this :

$(".img-download").click(function(){
    var data = canvas.toDataURL();
    $(this).attr("href",data)
  $(this).attr("download","imgName.png");
}); 

Ref:Download canvas image using JS Jquery

Solution 2:

var data = canvas.toDataURL();
dataURL = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
dataURL = dataURL.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');

var aTag = document.createElement('a');
aTag.download = 'download.png';
aTag.href = dataURL;
aTag.click();