浅析JS中base64和图片互相转换(附代码)
程序员文章站
2022-03-09 14:45:49
...
之前的文章《解析mysql的安装与使用(收藏)》中,给大家了解了mysql的安装与使用。下面本篇文章给大家了解JS中base64和图片互相转换,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。
今天在用apicloud
写APP时,遇到一个base64
转图片并直接展示在当前页面的问题,因为之前使用过“trans
”模块,知道该模块可以将图片与base64
格式之间来回转换
所以想都没想就使用了trans
模块,但是到后来我发现我拿不到转换的图片路径,trans
模块保存是使用fs://
,或者可以选择将图片保存到系统相册
恕我才疏学浅不知道怎么去获取fs://
路径,而且再去让用户手动去相册选择图片未免太麻烦
然后我就反应过来了,img
标签不是可以直接识别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视频教程
以上就是浅析JS中base64和图片互相转换(附代码)的详细内容,更多请关注其它相关文章!
下一篇: JavaScript怎么求数组中的质数