获取图片base64编码/预览图片
2019-04-17 21:49

获取图片base64编码的方法

 let img = new image();
 let dataURL;
 img.onload=function(){
      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();
      dataURL = canvas.toDataURL("image/jpeg");
 }
 img.src="....";//图片url地址

上面是我们获取已知图片的base64编码。

1,创建image对象,

2,设置image的onload方法,

3,设置image的url地址

4,在onload方法里面,将图片绘制到canvas画布上,通过画布的toDataURL方法获取图片的base64地址。

通过input file文件上传的图片预览及获取base64的方法

var files=finput.files;
let dataURL;
f(files.length>0){
      var fe=files[0];
      let type = fe.type;
      if(type != 'image/jpg'&&type != 'image/jpeg'&&type != 'image/png'&&type != 'image/bmp'){
             tips('图片格式不正确,请重新上传!');
             return;
      }
      var reader=new FileReader();
      reader.onload=()=>{
         dataURL=reader.result;
      };
      reader.readAsDataURL(fe);
}

这种方式获取的图片base64编码格式跟选择的图片类型相关。

如果想要指定base64编码中图片的格式是png还是jpg,可以结合第一种方式来实现,即将reader.result作为img.src来加载图片。这样的做法还可以达到预览图片的功能。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1445)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1