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==' );
如下:
关于“JS中base64和图片如何互相转换”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网页标题:JS中base64和图片如何互相转换
网站网址:http://pwwzsj.com/article/gsggei.html