Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von toDataURL() in Canvas zum Konvertieren von Bildern in dataURL (base64) vor. Freunde, die es brauchen, folgen Sie bitte dem Herausgeber, um gemeinsam zu lernen. Ich hoffe, es kann allen helfen.
Vorteile der Konvertierung von Bildern in Base64
Durch die Konvertierung von Bildern in die Base64-Kodierung können Sie Bilder problemlos in andere Webseiten und Editoren einfügen, ohne Dateien hochladen zu müssen. Dies ist bei einigen kleinen Bildern äußerst praktisch, da Sie keinen Speicherort für das Bild finden müssen.
Konvertieren Sie das Bild in die Base64-Kodierung, die im Allgemeinen für kleine Bilder im Web verwendet wird. Dadurch kann nicht nur die Anzahl der Bildanforderungen (gesammelt in JS- und CSS-Codes) reduziert werden, sondern auch Probleme wie relative Probleme vermieden werden Dies führt zu einem 404-Fehler für das Bild.
Einführung
Angenommen, ein Anwendungsszenario: Aus bestimmten Gründen wird ein Bildpfad vom Server angefordert, und die Base64-Daten-URL des entsprechenden Bildes muss über diesen Pfad abgerufen werden. In diesem Szenario schließen wir zunächst, dass auf den Bildpfad zugegriffen werden kann, und wir benötigen außerdem eine Möglichkeit, das Bild in eine Daten-URL zu konvertieren.
Wie erreichen wir das?
dataURL
Sehen wir uns kurz die Syntax der orthodoxen dataURL an, um zu überprüfen, ob der konvertierte Inhalt korrekt ist. Ein vollständiger Daten-URI sollte wie folgt aussehen:
data:[<mediatype>][;base64],<data>
Nach dem Login kopieren
wobei mediatype den Dateityp angibt und MIME-Regeln folgt, z. B. „image/png“, „text/plain“, gefolgt vom Codierungstyp, hier wir nur mit base64; gefolgt vom codierten Inhalt der Datei. Wir sehen den src des img-Tags in HTML oft so geschrieben:
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"
Nach dem Login kopieren
Dieses img bezieht sich auf die in base64 codierte dataURL. Solange der Browser dies unterstützt, kann es in ein GIF-Bild dekodiert werden und gerendert herauskommen.
.toDataURL()
Das FileReader-Objekt verfügt ebenfalls über ähnliche Methoden wie .readAsDataURL(), akzeptiert jedoch nur Datei- oder Blob-Typen und diese beiden Typen können im Allgemeinen nur über < übergeben werden ;input [type=file]>Rufen Sie das Dateiattribut des Elements ab oder verwenden Sie den Blob()-Konstruktor, um manuell ein neues Objekt zu erstellen. Das Peinliche ist, dass wir derzeit nur den Bildpfad haben, der der Sicherheitsrichtlinie des Browsers unterliegt. Das Dateiattribut von ist schreibgeschützt und der Blob()-Konstruktor akzeptiert nur Dateien Der Inhalt beider Methoden kann nicht direkt über den Bildpfad abgerufen werden. Das oben angenommene Anwendungsszenario zwingt uns dazu, zunächst zu überlegen, wie wir den Bildinhalt über den Pfad erhalten. ![]()
ist in Ordnung und kann in
Alles ist fertig, wir müssen nur das von ![]()
erhaltene Bild in
canvas.toDataURL([type, encoderOptions]);
Nach dem Login kopieren
canvas ist ein DOM-Element
Es ist zu beachten, dass Sie vor der Konvertierung in dataURL zunächst sicherstellen müssen, dass das Bild erfolgreich geladen wurde. Daher sollte die Methode .toDataURL() in das asynchrone Ereignis onload von ![]()
geschrieben werden. Jetzt implementieren wir eine funktionale Funktion:
function getBase64(url){
//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
var Img = new Image(),
dataURL='';
Img.src=url;
Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
width=Img.width, //确保canvas的尺寸和图片一样
height=Img.height;
canvas.width=width;
canvas.height=height;
canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
};
}Nach dem Login kopieren
Eine Konvertierungsfunktion, die jederzeit aufgerufen werden kann, ist abgeschlossen. Sie gibt einen vollständigen dataURL-String zurück, nachdem das Bild geladen wurde.
Verbessern Sie das
onload-Ereignis, um sicherzustellen, dass die Konvertierungsaufgabe nach dem Laden ausgeführt wird. Dies bringt jedoch ein neues Problem mit sich: Die Daten-URL wird erst zurückgegeben, nachdem das Bild geladen wurde, und wir können es nicht bestimmen wenn das Bild geladen ist. Wenn die Daten-URL später verarbeitet werden muss (z. B. durch Weitergabe an andere Server), muss ein Rückruf hinzugefügt werden. Dadurch kann sichergestellt werden, dass die nachfolgende Verarbeitungsaufgabe ausgeführt wird, nachdem die Daten-URL erfolgreich abgerufen wurde. :
function getBase64(url,callback){ //添加一个回调参数
...
Img.onload=function(){
...
canvas.getContext("2d").drawImage(Img,0,0,width,height);
dataURL=canvas.toDataURL('image/jpeg');
callback?callback(dataURL):null; //调用回调函数
};
}Nach dem Login kopieren
Fügen Sie während der Ausführung einen Rückruf hinzu:
getBase64('//upload.jianshu.io/users/upload_avatars/555630/fdd1b798e6b0.jpg',(dataURL)=>{
console.log(dataURL);
});Nach dem Login kopieren
Das war's. Wenn die Kompatibilität nicht berücksichtigt wird, können wir möglicherweise Versprechen und Generatoren verwenden, um dies zu implementieren, und eine Fehlerbehandlung hinzufügen wird perfekt sein.
Verwandte Empfehlungen:
html5 Canvas realisiert die Bildrotation
JQuery-Plug-In „canvaspercent.js“ realisiert den prozentualen runden Kuchen Teilen von Effektbeispielen
Wie Canvas Bilder verarbeitet
Das obige ist der detaillierte Inhalt vonDie toDataURL()-Methode in Canvas konvertiert Bilder in dataURL (base64).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
