Detailliertes Beispiel für HTML5 mit Canvas zur Implementierung der Bild-Download-Funktion

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von Canvas zum Implementieren der Bild-Download-Funktion in HTML5 vorgestellt. Er ist von großem praktischem Wert.

In einem aktuellen Projekt gibt es eine Funktion Das Herunterladen von Bildern muss implementiert werden (wie unten gezeigt) )

Erwägen Sie zunächst die Verwendung des Download-Attributs des a-Tags zum Herunterladen:

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

Aber nachdem ich den Test bestanden hatte, stellte ich fest, dass heruntergeladene Dateien in Safari keine Erweiterungen haben können, also musste ich meine Meinung ändern und Canvas für die Verarbeitung verwenden.

1. Das Bild muss crossOrigin='anonymous' hinzufügen, um das domänenübergreifende Attribut des Bildes festzulegen

img.crossOrigin = 'anonymous';

2 um das Bild in das Base64-Format zu konvertieren

canvas.toDataURL("image/png")

3. Verwenden Sie simulierte Klickereignisse, um Downloads auszulösen

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

Vollständiger 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';
}

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für HTML5 mit Canvas zur Implementierung der Bild-Download-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!