js工具函数之将网络图片url地址转换为base64格式

1、封装工具函数，将url地址，转换为base64格式输出

function getBase64(url, callback) {
        //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建  省去了 append()，也就避免了文档冗余和污染
        var Img = new Image(),
          dataURL = '';

        //Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
        //Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
      //下面已修正ios的兼容微信打开失败的原因
        Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
        Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;

        Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
          var canvas = document.createElement("canvas"), //创建canvas元素
            width = Img.width, //确保canvas的尺寸和图片一样
            height = Img.height;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
          dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
          callback ? callback(dataURL) : null; //调用回调函数
        };
      }

getBase64('http://p1.pstatp.com/large/435d000085555bd8de10', (dataURL) => { console.log(dataURL) })

如果图片是oss 要在后台设置白名单 否则提示跨域
参考网站https://blog.csdn.net/qq_42991509/article/details/100925856

以上办法，ios的微信生成失败，参考文章https://blog.csdn.net/DavidFFFFFF/article/details/95217076

有没有注意到crossOrigin属性是在src属性之后赋值的；/(ㄒoㄒ)/~~
crossOrigin属性必须在src属性之前赋值
crossOrigin属性必须在src属性之前赋值
crossOrigin属性必须在src属性之前赋值
尽管没有找到准确的文档明确指定crossOrigin属性必须在src属性之前赋值，但是要适配IOS确实要这么做；
大家如果对 crossorigin 有疑问可以看一下MDN对crossorigin的解释：
————————————————
版权声明：本文为CSDN博主「DavidFFFFFF」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/DavidFFFFFF/java/article/details/95217076

如果在微信调试的话，可以使用这个捕捉错误信息

                try {
                    // 将canvas对象转化为image/png
                    dataURL = canvas.toDataURL('image/jpeg')
                    alert(dataURL)
                } catch (err) {
                    alert(err)
                }