Une brève analyse de la conversion entre base64 et images en JS (avec code)

Dans l'article précédent "Analyse de l'installation et de l'utilisation de mysql (Favoris)", nous avons découvert l'installation et l'utilisation de mysql. L'article suivant vous aidera à comprendre la conversion mutuelle entre base64 et images dans JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aujourd'hui, lorsque j'utilisais apicloud pour écrire une application, j'ai rencontré un problème de conversion base64 des images et de les afficher directement sur la page actuelle, car je avait utilisé le module "trans", sachant que ce module peut convertir des images dans les deux sens au format base64apicloud写APP时，遇到一个base64转图片并直接展示在当前页面的问题，因为之前使用过“trans”模块，知道该模块可以将图片与base64格式之间来回转换

所以想都没想就使用了trans模块，但是到后来我发现我拿不到转换的图片路径，trans模块保存是使用fs:// ，或者可以选择将图片保存到系统相册

恕我才疏学浅不知道怎么去获取fs:// 路径，而且再去让用户手动去相册选择图片未免太麻烦

然后我就反应过来了，img标签不是可以直接识别base64字符并转换为图片吗？......

诶，我开发还是过于依赖框架、模块、插件等，很多原生的东西都要记不得了

以后开发可一定得记住咯，顺便附上JS互转base64和图片

js将图片转化为base64

var img = "imgurl";//imgurl 就是你的图片路径 
 
function getBase64Image(img) { 
     var canvas = document.createElement("canvas"); 
     canvas.width = img.width; 
     canvas.height = img.height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, img.width, img.height); 
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); 
     var dataURL = canvas.toDataURL("image/"+ext); 
     return dataURL; 
} 
 
var image = new Image(); 
image.src = img; 
image.onload = function(){ 
  var base64 = getBase64Image(image); 
  console.log(base64); 
}

js将base64转化为图片格式

js直接设置img的src属性为图片的base64

j'ai donc utilisé le trans module sans même y penser, mais plus tard, j'ai découvert que je ne pouvais pas obtenir le chemin de l'image convertie. Le module trans est enregistré en utilisant fs:// , ou vous pouvez le faire. choisissez d'enregistrer l'image dans l'album système

Pardonnez-moi, je ne sais pas comment obtenir le chemin fs:// , et il serait trop gênant pour l'utilisateur de sélectionner manuellement des images dans le album photo

Puis je l'ai réalisé, la balise img N'est-il pas possible de reconnaître directement les caractères base64 et de les convertir en images ? ......🎜🎜🎜🎜Hé, mon développement repose encore trop sur des frameworks, des modules, des plug-ins, etc., et je ne me souviens pas de beaucoup de choses natives🎜🎜Vous devez vous en souvenir pour un développement futur. Au fait, Je joins JS< /code>Convertir <code>base64 et les images 🎜

js convertit les images en base64

document.getElementById(&#39;img&#39;).setAttribute( &#39;src&#39;, &#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==&#39; );<br data-filtered="filtered">如下：<br data-filtered="filtered"><img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Une brève analyse de la conversion entre base64 et images en JS (avec code)" >

js convertit la base64 en format d'image

🎜js Définissez directement l'attribut src de img sur les données base64 de l'image🎜rrreee🎜Apprentissage recommandé : 🎜js tutoriel vidéo🎜🎜

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!