浅析JS中base64和图片互相转换（附代码）

之前的文章《解析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和图片互相转换（附代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！