利用Canvas 压缩图片

const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg']
		const MAXSIZE = 3 * 1024 * 1024
		// 转成 base64
		function converImgToBase64(file, cb){
			let render = new FileReader()
			render.addEventListener('load', function(e){
				const base64Img = e.target.result
				cb && cb(base64Img)
				render = null
			})
			render.readAsDataURL(file)
		}

		// 压缩
		function compress(base64Img){
			const img = new Image()
			let maxW = 1024
			img.addEventListener('load', function(e){

				// 压缩确定图像宽高
				let ratio
				if(maxW < img.naturalWidth){
					ratio = img.naturalWidth / maxW
					maxH = img.naturalHeight / ratio
				} else {
					maxW = img.naturalWidth
					maxH = img.naturalHeight
				}

				// 绘制canvas
				const canvas = document.createElement('canvas')
				canvas.id = '_compress_'
				canvas.width = maxW
				canvas.height = maxH
				canvas.style.visibility = 'hidden'
				// document.body.appendChild(canvas)
				const ctx = canvas.getContext('2d')
				ctx.clearRect(0,0,maxW,maxH)
				ctx.drawImage(img, 0, 0, maxW, maxH)
				const compressImg = canvas.toDataURL('image/jpeg', 0.8)
				const _image = new Image()
				_image.src = compressImg
				document.body.appendChild(_image)
			})
			img.src = base64Img
			document.body.appendChild(img)
		}
		const upload = document.getElementById('upload')
		upload.addEventListener('change', function(e){
			const [file] = e.target.files;
			if(!file) return
			const {type: fileType, size: fileSize} = file
			if(!ACCEPT.includes(fileType)){
				alert("不支持的文件类型")
				upload.value = ''
				return
			}
			if(fileSize > MAXSIZE){
				alert("文件超出尺寸限制")
				upload.value = ''
				return
			}

			// 压缩图片
			converImgToBase64(file, compress)
		})