千家信息网

JS中base64和图片如何互相转换

发表于:2025-01-18 作者:千家信息网编辑
千家信息网最后更新 2025年01月18日,这篇文章将为大家详细讲解有关JS中base64和图片如何互相转换,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。js将图片转化为base64var img = "im
千家信息网最后更新 2025年01月18日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直接设置imgsrc属性为图片的base64数据即可

document.getElementById('img').setAttribute( 'src', _'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );
如下:

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

0