Detailed example of html5 using canvas to implement image download function-HTML Tutorial-php.cn

Detailed example of html5 using canvas to implement image download function

巴扎黑

Release： 2017-09-02 10:01:55

Original

3251 people have browsed it

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>

Copy after login

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 = &#39;anonymous&#39;;

Copy after login

2. Use toDataURL to convert the image into base64 format

canvas.toDataURL("image/png")

Copy after login

3. Use simulated click events to trigger downloads

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

Copy after login

Full code:

var canvas = $('.canvas');
var cxt = canvas[0].getContext("2d");
function save(){
    var img = new Image();
    img.crossOrigin = &#39;anonymous&#39;;
    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';
}

Copy after login

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!