获取图片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来加载图片。这样的做法还可以达到预览图片的功能。