需求背景：
需要做一下下载图片的功能，调用的是app的保存功能，app提供的jsbridge不支持传url，结果就有了这个附加需求。
这里还有一个要把canvas设置成白色，因为我获取的图片是png的，都是透明图，是小程序码，安卓手机下载下来是透明的，搜不上，ios到是白色的，所以为了兼容，还是加上个白色背景吧。
来，直接上码
getBase64Image(img) {//图片转码base64
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
// 将canvas的透明背景设置成白色
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var i = 0; i < imageData.data.length; i += 4) {
// 当该像素是透明的,则设置成白色
if(imageData.data[i + 3] == 0) {
imageData.data[i] = 255;
imageData.data[i + 1] = 255;
imageData.data[i + 2] = 255;
imageData.data[i + 3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
// console.log(canvas)
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
image.onload = function(){ //要在图片加载完了再调用方法
var base64 = self.getBase64Image(image);
console.log(base64)
}
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4565/viewspace-2826333/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
