Out-of-the-box front-end image compression solution

Front-end image compression background

We all know that in the Internet era where every inch of land is precious, speed is the number one competitiveness. Although our 5G development has shaken the lead, it cannot withstand users uploading many "Big Mac" pictures on a web page, and eventually The result is that the page opens "quickly"...

Well, as a technical person, of course there are a lot of solutions, such as:

Compress the image before uploading
Upload the picture to the image bed, and use the image bed compression capability and the CDN node to distribute it nearby
Image streaming
Image lazy loading/preloading

Of course, smart friends will also combine the above solutions to design a better picture "speed-up" solution.

I won’t introduce all the solutions to you today, because there are many practices on the Internet. Next, from the perspective of front-end technology improvement , I will share how to use native javascript to realize the complete solution from image upload to image custom compression . You can Use the scheme introduced in the article directly in your actual development, or design a better picture compression scheme based on it.

A solution for image compression

fileThe front-end implementation of image compression is nothing more than converting the image file after the user uploads it, image对象and then using canvas it api to compress the image into a specified volume. The process is as follows:

Code

First of all, we first realize filethe conversion into image对象, here we use FileReader the API, the code is as follows:

// 压缩前将file转换成img对象
function readImg(file:File) {
    return new Promise((resolve, reject) => {
     const img = new Image()
     const reader = new FileReader()
     reader.onload = function(e:any) {
      img.src = e.target.result
     }
     reader.onerror = function(e) {
      reject(e)
     }
     reader.readAsDataURL(file)
     img.onload = function() {
      resolve(img)
     }
     img.onerror = function(e) {
      reject(e)
     }
    })
}

Here we use it promise to design the method of generating image data. Next, let's look at the core image compression source code:

/**
 * 压缩图片
 * @param img 被压缩的img对象
 * @param type 压缩后转换的文件类型
 * @param mx 触发压缩的图片最大宽度限制
 * @param mh 触发压缩的图片最大高度限制
 * @param quality 图片质量
 */
 function compressImg(img: any, type:string, mx: number, mh: number, quality:number = 1) {
    return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
     const { width: originWidth, height: originHeight } = img
     // 最大尺寸限制
     const maxWidth = mx
     const maxHeight = mh
     // 目标尺寸
     let targetWidth = originWidth
     let targetHeight = originHeight
     if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > 1) {
       // 宽图片
       targetWidth = maxWidth
       targetHeight = Math.round(maxWidth * (originHeight / originWidth))
      } else {
       // 高图片
       targetHeight = maxHeight
       targetWidth = Math.round(maxHeight * (originWidth / originHeight))
      }
     }
     canvas.width = targetWidth
     canvas.height = targetHeight
     context?.clearRect(0, 0, targetWidth, targetHeight)
     // 图片绘制
     context?.drawImage(img, 0, 0, targetWidth, targetHeight)
     canvas.toBlob(function(blob) {
      resolve(blob)
     }, type || 'image/png', quality) 
    })
}

Here, the custom image compression is realized by controlling canvasthe width and height, and setting canvas parameters .toBlob

If you don't understand the code, you can also post a question at the end of the article, and I will answer it accordingly.