js 利用canvas转换图片格式并下载图片

1.利用canvas转换格式

思路很简单，就是在canvas上drawImage，然后再把canvas转换成想要的图片格式

 convertImageToCanvas = (image) => { //image一定是一个图片对象，不然获取不到宽高
	var canvas = document.createElement("canvas"); // 新建canvas对象
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);
	return canvas;
}

convertCanvasToImage = (canvas) => {
	let url = canvas.toDataURL("image/jpeg");
	//拿到一个dataUrl，可new Image()，然后图片的对象的src设置为url，就可以得到图片dom元素
	return url;
}

2.下载图片

// html代码
<input id="input" type="file" accept="image/*" />
// js代码
 window.onload = function () {
	const input = document.getElementById('input')
	input.addEventListener('change', function (event) {
		let url = window.URL.createObjectURL(event.target.files[0]);
		let img = new Image()
		img.src = url
		img.onload = () => {
		// convertImageToCanvas函数一定要在、img onload之后使用，否则得不到高宽
			let canvas = convertImageToCanvas(img)
			let href = convertCanvasToImage(canvas)
			let a = document.createElement('a');     // 创建一个a节点插入的document
			a.download = '图片名字'  // 设置a节点的download属性值
			a.href = href ;         // 将图片的src赋值给a节点的href
			a.click()
		}
	})
}