h5在不改变图片尺寸下,降低质量,降低图片大小(base64)

/**
 * 图片压缩 - 不改变原来图片尺寸,降低质量
 * @param url string 图片地址 base64
 */
export function imagesCompress(url){
	return new Promise((r,j) => {
		let img = new Image();
		img.crossOrigin = "Anonymous"; // 处理跨域问题
		img.src = url;
		img.onload = () => {
			let canvas = document.createElement('canvas');
			let context = canvas.getContext('2d');
			let cw = img.width;
			let ch = img.height;
			let w = cw;
			let h = ch;
			// 限制最大宽高 600px 这边是等比例缩小图片尺寸
			// if (cw > 600 || ch > 600) {
			//   if (cw > ch) {
			//     w = 600;
			//     h = (600 * ch) / cw;
			//   } else {
			//     h = 600;
			//     w = (600 * cw) / ch;
			//   }
			// }
			canvas.width = w;
			canvas.height = h;
			context.clearRect(0, 0, w, h);
			context.drawImage(img, 0, 0, w, h);
			// 输出压缩后的 base64 图片(jpeg 格式,50% 质量)
			let base64 = canvas.toDataURL('image/jpeg', 0.5);
			r(base64);
		}
		img.onerror = err => {
			j(err);
		};
	})
}

配合uni.chooseImage后,将File转换成base64,效果更好

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值