使用canvas.toDataURL()方法将网络图片路径转换为base64编码

转换为base64位编码有什么好处？

• 将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请求加载；
• 可以防止由于图片路径错误导致图片加载失败的问题

toDataURL(type, encoderOptions)：

• type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；

• encoderOptions用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

function getBase64Image(img,width,height) {
  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);
  //ctx.drawImage(img, 0, 0, width, height); 自定义图片大小
  //获取图片格式
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  //将canvas对象转换为base64位编码
  var dataURL =  canvas.toDataURL(`image/+${ext}`); 
  return dataURL;
},
function image(img){
  //let _that = this;
  return new Promise((resolve => {
    var image = new Image();
    //image.setAttribute('crossOrigin', 'anonymous') 跨域
    image.crossOrigin = 'Anonymous';
    image.src = img;
    image.onload = function(){
      //resolve(_that.getBase64Image(image))
      resolve(getBase64Image(image))
    }
  }))

image("http://....xxx.png").then(res => console.log(res))

引用：(29条消息) canvas学习——toDataURL()方法_xm2by的博客-CSDN博客_todataurl

本地图片路径转化的话会报错 Not allowed to load local resource: file:xxxxxx.png浏览器为了安全考虑就是不允许直接访问，但是可以配置一个虚拟路径

tomact配置(后端):blog.csdn.net/what_how_wh…

比较推荐 Nginx/node 来做静态文件服务器。