Die toDataURL()-Methode in Canvas konvertiert Bilder in dataURL (base64).

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>

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"

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 gezeichnet werden, und verfügt zufällig über die Methode .toDataURL().

Alles ist fertig, wir müssen nur das von erhaltene Bild in einfügen und es dann mit der .toDataURL()-Methode konvertieren, um die base64-codierte Daten-URL zu erhalten. Schauen wir uns die Syntax dieser Methode an:

canvas.toDataURL([type, encoderOptions]);

canvas ist ein DOM-Element . Wenn der angegebene Typ nicht unterstützt wird, wird er durch ersetzt Der Standardwert image/png; EncoderOptions kann die Bildqualität für Bilder vom Typ image/jpeg oder image/webp mit einem Wert von 0-1 festlegen. Wenn er den Wert überschreitet, wird er durch den Standardwert 0,92 ersetzt.

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

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; //调用回调函数
  };
 }

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

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!