JS中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数据即可

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==">

关于“JS中base64和图片如何互相转换”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。