图片转成base64

图片转成base64的格式，可以减少http请求。我最近在做一个离线应用，想把请求回来的图片数据缓存起来，等到没有网络的时候直接从缓存里面取出来进行展示，但是后台返回来的是一个图片的路径，如果离线后请求的还是图片路径，这个肯定是不可以的。所以我就把图片转成base64缓存起来，到时候就可以拿来使用啦。好了，上代码

function setbase64(img){
      var canvas = document.createElement("canvas");
      // canvas.width = 100;
      // canvas.height = 100;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 10, 10);
      var dataURL = canvas.toDataURL("image/png");
      return dataURL;
}
 function getbase64(imgUrl){
      var image = new Image();
       image.src = imgUrl;
       image.onload = function(){
            setbase64(image);
       };
}
getbase64('https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=f60add2afc1f3a2945c8d3cea924bce3/fd039245d688d43ffdcaed06711ed21b0ff43be6.jpg')

注意：

我在做这个的时候遇到了2个坑

1、如果我请求本地图片的话，没有问题，但是如果请求网络上的图片时候，会报这样一个错误

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
画布被污染，无法画出来

解决方案：
加这么一句话：image.crossOrigin = "Anonymous";就可以啦

function getbase64(imgUrl){
      var image = new Image();
       image.src = imgUrl;
       image.crossOrigin = "Anonymous"
       image.onload = function(){
            setbase64(image);
       };
}

2、遍历返回的图片数据时，我想把数据缓存到浏览器，结果发现只能缓存到最后一个图片对象

function setbase64(img){
      var canvas = document.createElement("canvas");
      // canvas.width = 100;
      // canvas.height = 100;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 10, 10);
      var dataURL = canvas.toDataURL("image/png");
      localforage.setItem('w11'+vm.i,dataURL, function (err) {
          console.log("存储成功")
      });
      return dataURL;
}
 function getbase64(imgUrl){
      var image = new Image();
       image.src = imgUrl;
       image.crossOrigin = "Anonymous"
       image.onload = function(){
            setbase64(image);
       };
}
···
for(let i = 0; i<list.length; i++){
     getbase64(list[i].url);
}
 ···
结果发现，值能缓存到最后一个函数，经过网络搜索，努力尝试后，终于知道怎么解决这个问题                      

function getbase64(imgUrl){
      var image = new Image();
       image.src = imgUrl;
       image.crossOrigin = "Anonymous"
       image.onload = function(){
            setbase64(image);
       }();
}
 把image.onload设置成自执行函数，具体原因我也不是很明白，希望有幸能被看到这篇文章的大神提点一下，谢谢啦~