前端实现图片压缩（1）

在b站上看到一个前端图片预览的视频，但是其中图片压缩功能我毫无头绪。前端实现图片预览，经历_哔哩哔哩_bilibili

随后看了看up主的博客https://wch666.com/archives/101，发现是canvas实现的。

知道原理后还算比较简单。在学习canvasAPI过程中，我思维发散地学了一些操作。记录一手。

drawImage的image参数能传以下几个类型

 其中ImageBitMap没见过，但是感觉跟二进制数据有关。而ImageBitMap对象由createImageBitmap()方法创建。

 

看来想要用这个位图来drawImage。可以先把图片转换成blob或者ImageData。

把图片转换成Blob对象

  function getImageBlob(path) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const image = new Image()
    image.src = path
    return new Promise(resolve => {
      image.onload = function () {
        const { naturalWidth, naturalHeight } = this
        canvas.width = naturalWidth
        canvas.height = naturalHeight
        ctx.drawImage(image, 0, 0)

        canvas.toBlob((blob) => {
          resolve([blob, naturalWidth, naturalHeight])
        })
      }
    })
  }

naturalWidth, naturalHeight和直接width、height应该没啥区别。这里获取blob对象以后，如果想根据blob获取到图片的宽高，又要把blob转成Image，所以为了方便直接返回数组。

把图片转换成ImageData对象

  function getImageData(path) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const image = new Image()
    image.src = path
    return new Promise(resolve => {
      image.onload = function () {
        const { naturalWidth, naturalHeight } = this
        canvas.width = naturalWidth
        canvas.height = naturalHeight
        ctx.drawImage(image, 0, 0)

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        resolve(imageData)
      }
    })
  }

观察一下打印的ImageData

 我用的图片宽高都是720。所以有720*720个像素点，每个像素点保存了rgb和透明度的信息。所以data数组中的元素2073600 === 720*720*4。

最后drawImage

最后就愉快地用位图drawImage了。drawImage这个方法参数太多，以前不理解感觉很烦。理解以后就简单了。比如下面的这个代码，看起来参数很多。

  async function start() {
    const [blob, naturalWidth, naturalHeight] = await getImageBlob('./xiaoseng.jpg')
    const bitMap = await createImageBitmap(blob, 0, 0, naturalWidth, naturalHeight)
    ctx.drawImage(bitMap, 250, 200, canvas.width, canvas.height, 0, 0, naturalWidth, naturalHeight)
  }

你可以理解为给你一张图片 ，你第一步先开始截图，我从（250，200）这个点开始截，截了canvas的尺寸（我定的400*400），因为多了也用不上。然后我把截图后的放到canvas的（0，0）点，最后我不想对图片进行缩放。所以用了图片原本的尺寸。

这里我创建的canvas画布是400*400的。我把720*720的图截图画上去的效果就是这样。