JS转换远程图为base64编码格式
发布于 7 年前 作者 falost 4754 次浏览 来自 分享

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

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

回到顶部