因为项目业务需求，需要前端将远程图片进行本地化处理，第一个想到了就是将图片进行转码，转换成base64格式的。

我这里利用了HTML5的canvas进行的处理。

需要先创建一个img元素来承载远程图片，然后在创建一块画布来绘制图片，在将绘制好的canvas进行一个toDataURL方法进行转码，就可以得到这个图片的base64码。

不过在创建图片的过程中， 需要设置img的crossOrigin 属性，否则toDataURL的时候会报错。

下面看代码：

var img = document.createElement('img');
var canvas = document.createElement('canvas');

img.src = "https://fedte.org/public/images/logo.png";
img.setAttribute('crossOrigin', 'anonymous'); // 需要设置crossOrigin 属性，否则toDataURL的时候会报错
img.onload = function(){
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL()
    console.log(dataURL)
}

如果你有什么好的方法，欢迎留言指教和讨论，感激不尽！

社区地址： JS转换远程图为base64编码格式

转载请注明：Falost的小窝 » JS转换远程图为base64编码格式