La méthode toDataURL() dans Canvas convertit les images en dataURL (base64)

Cet article vous présente principalement les informations pertinentes sur l'utilisation de toDataURL() dans Canvas pour convertir des images en dataURL (base64). L'article le présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. Amis qui en ont besoin, veuillez suivre l'éditeur pour apprendre ensemble. J'espère que cela pourra aider tout le monde.

Avantages de la conversion d'images en base64

La conversion d'images en encodage Base64 vous permet d'insérer facilement des images dans d'autres pages Web et éditeurs sans télécharger de fichiers. C'est extrêmement pratique pour certaines petites images, car vous n'avez pas besoin de trouver un endroit pour enregistrer l'image.

Convertir l'image en codage base64, qui est généralement utilisé pour les petites images sur le Web. Cela peut non seulement réduire le nombre de demandes d'images (collectées dans les codes js et css), mais également éviter des problèmes tels que le relatif. chemins. Cela entraîne une erreur 404 pour l’image.

Introduction

Supposons un scénario d'application : pour des raisons particulières, un chemin d'image est demandé au serveur et l'URL de données base64 de l'image correspondante doit être obtenue via ce chemin. Dans ce scénario, nous déduisons d’abord que le chemin de l’image est accessible et nous avons également besoin d’un moyen de convertir l’image en dataURL.

Comment y parvenir ?

dataURL

Passons brièvement en revue la syntaxe de la dataURL orthodoxe, qui nous aidera à vérifier si le contenu converti est correct. Un dataURI complet devrait ressembler à ceci :

data:[<mediatype>][;base64],<data>

où mediatype déclare le type de fichier, en suivant les règles MIME, telles que "image/png", "text/plain" suivi du type d'encodage, ici nous Impliquant uniquement la base64 suivi du contenu codé du fichier. On voit souvent le src de la balise img en HTML écrit comme ceci :

src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"

Cette img fait référence à la dataURL encodée en base64. Tant que le navigateur la prend en charge, elle peut être décodée en image gif. et rendu sortir.

.toDataURL()

L'objet FileReader a également des méthodes similaires, telles que .readAsDataURL(), mais il n'accepte que les types de fichiers ou de blob, et ces deux types ne peuvent généralement être transmis que via &lt ;input [type=file]>Obtenez l'attribut files de l'élément ou utilisez le constructeur Blob() pour créer manuellement un nouvel objet. Ce qui est embarrassant, c'est que nous n'avons actuellement que le chemin de l'image, qui est soumis à la politique de sécurité du navigateur. L'attribut files de <input[type=file]> est en lecture seule et le constructeur Blob() n'accepte que les fichiers. contenu. Les deux méthodes sont Il ne peut pas être obtenu directement via le chemin de l'image. Le scénario d'application supposé ci-dessus nous oblige à considérer d'abord comment obtenir le contenu de l'image via le chemin. <img> est OK et peut être dessiné dans <canvas>, et <canvas> a la méthode .toDataURL().

Tout est prêt, il suffit de mettre l'image obtenue par <img> dans <canvas> puis de la convertir via la méthode .toDataURL() pour obtenir l'URL de données encodée en base64. Regardons la syntaxe de cette méthode :

canvas.toDataURL([type, encoderOptions]);

canvas est un élément DOM <canvas> le paramètre type spécifie le type d'image. Si le type spécifié n'est pas pris en charge, il sera remplacé par. la valeur par défaut image/png ; encoderOptions peut définir la qualité d'image pour les images de type image/jpeg ou image/webp, avec une valeur de 0-1 si elle dépasse la valeur, elle sera remplacée par la valeur par défaut de 0,92.

Il convient de noter qu'avant de convertir en dataURL, vous devez d'abord vous assurer que l'image est chargée avec succès, donc la méthode .toDataURL() doit être écrite dans l'événement asynchrone onload de <img>. Implémentons maintenant une fonction fonctionnelle :

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

Une fonction de conversion qui peut être appelée à tout moment est terminée. Elle renverra une chaîne dataURL entière une fois l'image chargée.

Améliorez l'événement

onload pour garantir que la tâche de conversion est exécutée après le chargement, mais cela pose un nouveau problème - l'URL de données ne sera renvoyée qu'après le chargement de l'image, et nous ne pouvons pas déterminer lorsque l'image est chargée. Chargement terminé. Si l'URL de données doit être traitée ultérieurement (par exemple en la transmettant à d'autres serveurs), il est nécessaire d'ajouter un rappel. Cela peut garantir que la tâche de traitement ultérieure est exécutée une fois l'URL de données obtenue avec succès. Nous devons modifier getBase64(). :

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

Ajouter un rappel pendant l'exécution :

 getBase64('//upload.jianshu.io/users/upload_avatars/555630/fdd1b798e6b0.jpg',(dataURL)=>{
  console.log(dataURL);
 });

C'est tout. Si la compatibilité n'est pas prise en compte, nous pouvons peut-être utiliser des promesses et des générateurs pour l'implémenter, et ajouter une gestion des erreurs. sera parfait.

Recommandations associées :

html5 Canvas réalise la rotation de l'image

le plug-in jquery canvaspercent.js réalise le pourcentage du gâteau rond partage d'exemples d'effets

Comment Canvas traite les images

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!