Home > Article > Web Front-end > 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, JS
interconversionbase64
and picture
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
Directly set the src
attribute of img
to the base64
data of the image
document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );<br data-filtered="filtered">如下:<br data-filtered="filtered"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" 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!