前端通过canvas实现图片大小压缩功能

2018.12.12 11:44 阅读 47 评论 0

前几天写好了图片的上传及压缩功能,打算梳理一下思路,前面只写了七牛云图片的上传实现,接下来补交作业,写一下前端如何实现图片的压缩功能。

思路

利用canvas绘图,将图片文件绘制到canvas中,可以设置canvas大小,质量等,从而实现图片的压缩功能。

实现代码

只实现了基础的功能,具体细节功能根据自己的需要进行扩展。

resizeImg.js

export default (file, width=800) => {
  return new Promise((resolve, reject) => {

    const reader = new FileReader()
    reader.readAsDataURL(file)

    reader.onload = function (e) {
      const img = new Image()
      img.src = e.target.result

      img.onload = function () {
        // 创建画布
        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')

        // 获取图片宽高
        const originWidth = this.width
        const originHeight = this.height

        // 最大宽度
        const maxWidth = width

        let targetWidth = originWidth
        let targetHeight = originHeight

        // 超出之后进行处理
        if (originWidth > maxWidth) {
          targetWidth = maxWidth
          targetHeight = Math.round(originHeight * (maxWidth / originWidth))
        }

        // 设置画布宽高
        canvas.width = targetWidth
        canvas.height = targetHeight

        // 清除画布
        context.clearRect(0, 0, targetWidth, targetHeight);
        // 填充画布
        context.drawImage(img, 0, 0, targetWidth, targetHeight)

        // 转化为blob格式,设置图片质量
        canvas.toBlob(function (blob) {
          resolve(blob)
        }, file.type || 'image/png', 0.6)
      }
    }
  })
}

使用的时候引入封装好的代码,基于promise封装const newFile = await resizeImg(file)就可以获取到压缩后的新的图片,将压缩后的图片提交到服务器即可。

0 条评论
发布