Exemple détaillé de HTML5 utilisant Canvas pour implémenter la fonction de téléchargement d'images

Cet article présente principalement l'exemple de code HTML5 utilisant Canvas pour implémenter la fonction de téléchargement d'images. C'est très pratique. Les amis qui en ont besoin peuvent s'y référer.

Dans un projet récent, une fonction de téléchargement. les images doivent être implémentées (comme indiqué ci-dessous) )

Dans un premier temps, pensez à utiliser l'attribut download de la balise a pour télécharger :

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

Mais après avoir réussi le test, j'ai découvert que dans Safari, les fichiers téléchargés ne peuvent pas avoir d'extensions, j'ai donc dû changer d'avis et utiliser Canvas pour le traitement.

1. L'image doit ajouter crossOrigin='anonymous' pour définir l'attribut interdomaine de l'image

img.crossOrigin = 'anonymous';

2. pour convertir l'image au format base64

canvas.toDataURL("image/png")

3. Utilisez des événements de clic simulés pour déclencher des téléchargements

 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);

Code complet :

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';
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!