栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

图片转base64方法

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

图片转base64方法

需求背景:
需要做一下下载图片的功能,调用的是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)
}						
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243754.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号