h5在不改变图片尺寸下，降低质量，降低图片大小（base64）

空&白

于 2025-03-13 15:30:31 发布

阅读量254

点赞数 1

CC 4.0 BY-SA版权

分类专栏： h5 微信小程序文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_32707555/article/details/146232172

微信小程序同时被 2 个专栏收录

21 篇文章

订阅专栏

7 篇文章

订阅专栏

/**
 * 图片压缩 - 不改变原来图片尺寸，降低质量
 * @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);
		};
	})
}