A brief analysis of conversion between base64 and images in JS (with code)

In the previous article "Installation and use of parsing mysql (Collection)", we learned about the installation and use of mysql. The following article will help you understand the mutual conversion between base64 and images in JS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Today when I was using apicloud to write an APP, I encountered a base64 transfer image and display it directly on the current page problem, because I have used the "trans" module before, and I know that this module can convert images back and forth to the base64 format

, so I used it without thinking. I installed the trans module, but later I found that I couldn’t get the converted image path. To save the trans module, use fs:// , or you can choose to Save the picture to the system album

Forgive me for my limited knowledge and I don’t know how to get the fs:// path, and it would be too troublesome for the user to manually go to the album to select the picture

Then I realized, can’t the img tag directly recognize the base64 characters and convert them into images? ......

Hey, my development still relies too much on frameworks, modules, plug-ins, etc., and I can’t remember many native things

You must remember it for future development. By the way, JSinterconversionbase64 and picture

js will convert the picture into 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. Convert base64 to image format

js Directly set the src attribute of img to the base64 data of the image

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="/static/imghwm/default1.png"  data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="  class="lazy"   alt="A brief analysis of conversion between base64 and images in JS (with code)" >

Recommended learning: js video tutorial

The above is the detailed content of A brief analysis of conversion between base64 and images in JS (with code). For more information, please follow other related articles on the PHP Chinese website!