Detailed example of html5 using canvas to implement image download function

This article mainly introduces the sample code of HTML5 using canvas to implement the image download function. It is of great practical value. Friends who need it can refer to it.

In recent projects, a function of downloading images needs to be implemented (as shown below) )

At first, I considered using the download attribute of the a tag to download:

<a href="图片src" download="下载海报">
下载海报
</a>

But after testing, I found that In Safari, downloaded files cannot have extensions, so I had to change my mind and use canvas for processing.

1. The image needs to add crossOrigin='anonymous' to set the cross-domain attribute of the image

img.crossOrigin = 'anonymous';

2. Use toDataURL to convert the image into base64 format

canvas.toDataURL("image/png")

3. Use simulated click events to trigger downloads

 var save_link = document.createElement('a');
     save_link.href = image;
     save_link.download ='测试.png';
                           
 var clickevent = document.createEvent('MouseEvents');
     clickevent.initEvent('click', true, false);
     save_link.dispatchEvent(clickevent);

Full code:

var canvas = $('.canvas');
var cxt = canvas[0].getContext("2d");
function save(){
    var img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function(){
        var _w = img.naturalWidth;
        var _h = img.naturalHeight;
        canvas.attr({width:_w,height:_h});
        cxt.drawImage(img,0,0);
        var image = canvas[0].toDataURL("image/png")
        var save_link = document.createElement('a');
        save_link.href = image;
        save_link.download ='测试.png';
                           
       var clickevent = document.createEvent('MouseEvents');
           clickevent.initEvent('click', true, false);
           save_link.dispatchEvent(clickevent);
    };
    img.src = 'http://n.sinaimg.cn/sports/transform/20170825/NZI3-    fykiufe6650492.jpg';
}

The above is the detailed content of Detailed example of html5 using canvas to implement image download function. For more information, please follow other related articles on the PHP Chinese website!