用canvas压缩图片

<input type="file" accept="image.*" id="btn">

let inp = document.getElementById(‘btn‘);
addEventListener(‘change‘, (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.onload = function(ee){
		console.log(ee)
		let url = ee.currentTarget.result;
		let img = new Image();
		img.src = url;
		document.body.appendChild(img)
		compress(url);
    }
    reader.readAsDataURL(file)
})

// 压缩图片
function compress(base_64){
	let img = new Image();
	img.src = base_64;
	img.onload=function(e){
		let canvas = document.createElement(‘canvas‘);
		let ctx = canvas.getContext(‘2d‘);
		canvas.width = img.naturalWidth;
		canvas.height = img.naturalHeight;
		console.dir(canvas)
		ctx.clearRect(0,0,canvas.width,canvas.height)
		ctx.drawImage(img,0,0,canvas.width,canvas.height);
		let imgType = getImgType(base_64);
		let img_compressed = canvas.toDataURL(`image/${imgType}`,0.8);
		let img2 = new Image();
		img2.src = img_compressed;
		document.body.appendChild(img2);

	}
}

// 获取图片后缀
function getImgType(base_64 ){
	let patt1 = new RegExp(‘image/[a-z]*‘);
	if(!base_64.match(patt1)){
		return ‘jpg‘;
	}
	let imgTypeArr = base_64.match(patt1);
	let type = imgTypeArr[0];
	type = type.slice(6);
	return type;
}

用canvas压缩图片

原文：https://www.cnblogs.com/hyx626/p/14884014.html