JS利用Canvas实现图片等比例裁剪、压缩

图像压缩原理
图像压缩有两种方式，目前写的方法是两者都支持且能够共同处理
1.图像尺寸裁剪，由大变小
2.尺寸不变，图片质量缩减

引用代码

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function(callback, type, quality) {
      var canvas = this
      setTimeout(() => {
        var binStr = atob(canvas.toDataURL(type, quality).split(',')[1])
        var len = binStr.length
        var arr = new Uint8Array(len)
        for (var i = 0; i < len; i++) {
          arr[i] = binStr.charCodeAt(i)
        }
        callback(new Blob([arr], { type: type || 'image/png' }))
      })
    }
  })
}

/**
 * 图片压缩
 * @param {object} options 参数
 * @param {string} options.content 图像内容
 * @param {number} options.maxWidth 最大宽度
 * @param {number} options.maxHeight 最大高度
 * @param {number} options.quality 图像质量
 * @example rotateImage({ content: Img, maxWidth: 1000, maxHeight: 1000, quality: 0.8 })
 * @returns {Promise<object>} 结果值
 */
const compressionImage = function(options = {}) {
  if (!options || typeof options !== 'object') {
    throw new Error(`[compressionImage error]: options is not a object`)
  }
  if (!options.content || (typeof options.content !== 'string' && !(options.content instanceof File))) {
    throw new Error(`[compressionImage error]: options.content is not a string or file`)
  }
  if (typeof options.maxWidth !== 'number') {
    throw new Error(`[compressionImage error]: options.maxWidth is not a number`)
  }
  if (typeof options.maxHeight !== 'number') {
    throw new Error(`[compressionImage error]: options.maxHeight is not a number`)
  }
  if (typeof options.quality !== 'number') {
    throw new Error(`[compressionImage error]: options.quality is not a number`)
  }
  return new Promise(resolve => {
    const set = (content, type) => {
      const canvasDOM = document.createElement('canvas')
      const canvasContext = canvasDOM.getContext('2d')
      const img = new Image()
      img.src = content
      img.onload = () => {
        let targetWidth
        let targetHeight
        if (img.width > options.maxWidth && img.height > options.maxHeight) {
          const rate = Math.min(options.maxWidth / img.width, options.maxHeight / img.height)
          targetWidth = img.width * rate
          targetHeight = img.height * rate
        } else if (img.width > options.maxWidth) {
          targetWidth = options.maxWidth
          targetHeight = (options.maxWidth / img.width) * img.height
        } else if (img.height > options.maxHeight) {
          targetHeight = options.maxHeight
          targetWidth = (options.maxHeight / img.height) * img.width
        } else {
          targetWidth = img.width
          targetHeight = img.height
        }
        canvasDOM.width = targetWidth
        canvasDOM.height = targetHeight
        canvasContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, targetWidth, targetHeight)
        const url = canvasDOM.toDataURL(type, options.quality)
        const callback = blob => {
          resolve({ url, blob })
        }
        canvasDOM.toBlob(callback, type, options.quality)
      }
    }
    if (options.content instanceof File) {
      const fileReader = new FileReader()
      fileReader.readAsDataURL(options.content)
      fileReader.onload = e => {
        set(e.target.result, options.content.type)
      }
    } else if (typeof options.content === 'string') {
      const fileContent = options.content.includes('base64,') ? options.content : `data:image/jpeg;base64,${options.content}`
      const fileType =
        options.content.includes('data:image/png;base64,') ? 'image/png'
          : options.content.includes('data:image/gif;base64,') ? 'image/gif' : 'image/jpeg'
      set(fileContent, fileType)
    }
  })
}

调用方式

const { url, blob } = await compressionImage({
  content: 'base64', //图像base64或file文件
  maxWidth: 1000, //最大宽度
  maxHeight: 600, //最大高度
  quality: 0.7 //图像质量，1为100%，建议选值0.95以下，1输出后的图像较大
})
console.log('压缩后的base64内容', url)
console.log('压缩后的blob文件', blob)

结果查看
对图片的尺寸和质量都进行了压缩，原始图像306b，压缩后的图像86kb

压缩对比

压缩前

压缩后