JS图片上传压缩

最近刚好项目有需求，要把用户上传的图片进行压缩，找了一下网上的代码，后面根据需求大概改了一下。以下是大致的思路，6、7没有写。

1. 利用H5的FileReader对象将上传的图片转成base64格式
2. 利用canvas的drawImage方法重绘上传的图片（注：drawimage是一个异步方法，需要在图片读取成功后在进行重绘，否则可能会压缩不成功）
3. 在利用canvas的toDataURL方法将图片压缩
4. 在将压缩后的base64编码图片转成blob对象
5. 创建一个formData对象，将blob对象append进去
6. 图片上传时需设置请求为 { “Content-Type”: “multipart/form-data” }
7. 将formData对象上传到后台

<input type="file" name="" id="form" onchange="uploadIMG(event)">

function uploadIMG(e) {
	let file = e.target.files || e.dataTransfer.files
	if (!file.length) return
	var picavalue = file[0]
	const isJPG = file[0].type === 'image/jpeg'
	const isLt5M = file[0].size / 1024 / 1024 < 5

	if (!isJPG) {
		alert('上传图片只能是 JPG 格式!')
		return isJPG
	}
	if (!isLt5M) {
		alert('上传图片大小不能超过 5M!')
		return isLt5M
	}
	imgPreview(picavalue);
}

// 获取图片
function imgPreview(file, callback) {
	if (!file || !window.FileReader) return
	if (/^image/.test(file.type)) {
		// 创建一个reader
		const reader = new FileReader()
		const that = this
		// 将图片转成base64格式
		reader.readAsDataURL(file)
		// 读取成功后的回调
		reader.onloadend = function () {
			const result = this.result
			const img = new Image()
			img.src = result
			console.log("********未压缩前的图片大小********")
			console.log(result.length)

			img.onload = function () {
				const data = compress(img)
				that.imgUrl = result

				const blob = dataURItoBlob(data)

				console.log("*******base64转blob对象******")
				console.log(blob)

				const formData = new FormData()
				var nameImg = new Date().getTime() + '.jpg'
				formData.append('file', blob, nameImg)

				console.log("********将blob对象转成formData对象********")
				console.log(formData.get("file"))
				// 发送请求
			}

		}
	}
}

// 压缩图片
function compress(img, compressNum) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  const width = img.width
  const height = img.height
  canvas.width = width
  canvas.height = height
  // 铺底色
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.drawImage(img, 0, 0, width, height)

  // 进行最小压缩
  const ndata = canvas.toDataURL('image/jpeg', compressNum)
  return ndata
}

// base64转成bolb对象
function dataURItoBlob(base64Data) {
  var byteString
  if (base64Data.split(',')[0].indexOf('base64') >= 0) {
    byteString = atob(base64Data.split(',')[1])
  } else {
    byteString = unescape(base64Data.split(',')[1])
  }
  var mimeString = base64Data
    .split(',')[0]
    .split(':')[1]
    .split(';')[0]
  var ia = new Uint8Array(byteString.length)
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  return new Blob([ia], {
    type: mimeString
  })
}