Eine kurze Analyse der Konvertierung zwischen Base64 und Bildern in JS (mit Code)

Im vorherigen Artikel „Analyse der Installation und Verwendung von MySQL (Favorit)“ haben wir etwas über die Installation und Verwendung von MySQL erfahren. Der folgende Artikel wird Ihnen helfen, die Konvertierung zwischen Base64 und Bildern in JS zu verstehen. Er hat einen gewissen Referenzwert. Ich hoffe, er wird Ihnen hilfreich sein.

Als ich heute apicloud zum Schreiben einer APP verwendete, stieß ich auf ein Problem bei der Konvertierung von Bildern durch base64 und deren Anzeige direkt auf der aktuellen Seite, weil ich Ich hatte das Modul „trans verwendet, da ich wusste, dass dieses Modul Bilder hin und her in das Format base64 konvertieren kannapicloud写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

also habe ich das Modul trans verwendet Modul ohne darüber nachzudenken, aber später stellte ich fest, dass ich den konvertierten Bildpfad nicht erhalten konnte. Das trans-Modul wurde mit fs:// gespeichert, oder Sie können es Wählen Sie, ob Sie das Bild im Systemalbum speichern möchten.

Verzeihen Sie, ich weiß nicht, wie ich an den Pfad fs:// komme, und es wäre für den Benutzer zu mühsam, Bilder manuell im Album auszuwählen Fotoalbum

Dann wurde mir klar, dass das img-Tag nicht möglich ist, base64-Zeichen direkt zu erkennen und in Bilder umzuwandeln? ......🎜🎜🎜🎜Hey, meine Entwicklung basiert immer noch zu sehr auf Frameworks, Modulen, Plug-Ins usw. und ich kann mich nicht an viele native Dinge erinnern🎜🎜Sie müssen sich das für die zukünftige Entwicklung merken. Übrigens, Ich hänge JSConvert <code>base64 und Bilder an 🎜

js konvertiert Bilder in 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="Eine kurze Analyse der Konvertierung zwischen Base64 und Bildern in JS (mit Code)" >

js konvertiert base64 in das Bildformat

🎜js Setzen Sie das src-Attribut von img direkt auf die base64-Daten des Bildes🎜rrreee🎜Empfohlenes Lernen: 🎜js Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Konvertierung zwischen Base64 und Bildern in JS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!