JS转换远程图为base64编码格式Falost的小窝
  • 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

JS转换远程图为base64编码格式

JavaScript 神棍 351℃

因为项目业务需求,需要前端将远程图片进行本地化处理,第一个想到了就是将图片进行转码,转换成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编码格式

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (2)