图片压缩

2020-11-08

什么是 WebP

WebP 是图片格式的发展趋势

WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。

根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。

前端图片转WebP

既然webp那么好, 我们需要如何才能使用呢, 其实现在我们js就已经可以借助canvas将图片转换为webp格式了

读取本地文件

function handleDraw({ target }) {
  const [ file ] = target.files
  if(file.type.split('/')[0] !== 'image') return alert("请选择图片文件!")
  // doing
}

document.body.querySelector('input').addEventListener("change", handleDraw, true)

渲染到Image, 填充给 canvas

这里使用Image对象, 不用使用img标签

function viewImage(file) {
  return new Promise((resolve, reject)=>{
    const img = new Image()
    img.src = URL.createObjectURL(file)
    img.onload = ()=>resolve(img)
    img.onerror = ()=>reject(img)
  })
}

const canvas = document.getElementById('canvas')


function handleDraw({ target }) {
  const [ file ] = target.files
  if(file.type.split('/')[0] !== 'image') return alert("请选择图片文件!")
  viewImage(URL.createObjectURL(files[i])).then(img=>{
    canvas.width = img.width
    canvas.height = img.height
    canvas.getContext("2d").drawImage(img,0,0,img.width, img.height)
  })
}
...

canvas压缩并下载图片

canvas还可以处理很多需求得图片, 等有空去百度找找写来看

canvas.toDataURL 方法可以将canvas上得画面生成base64得图片链接

function handleDraw({ target }) {
  const [ file ] = target.files
  if(file.type.split('/')[0] !== 'image') return alert("请选择图片文件!")
  viewImage(URL.createObjectURL(files[i])).then(img=>{
    canvas.width = img.width
    canvas.height = img.height
    canvas.getContext("2d").drawImage(img,0,0,img.width, img.height)
    // toDataURL
    baseToBolb(canvas.toDataURL("image/webp", 0.8))
      .then(saveFile)
  })
}

需要下载图片的话还需要将base64转换为blob二进制数据

data:image/webp;base64, ...

再;base64,后面是二进制数据, 前面是文件类型, 通过拆分;base64,后, 再拆分:, 数据和类型都得到了

function baseToBolb(base) {
  return new Promise(resolve=>{
    const parts = base.split(';base64,')
    const bstr = atob(parts[1])
    const type = parts[0].split(':')[1]
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) u8arr[n] = bstr.charCodeAt(n)
    resolve(new Blob([u8arr], { type }))
  })
}

blob文件下载的话只需要借助URl.createObjectURL方法就可以了

async function saveFile(blob, fileName = "test.webp") {
  // console.log(blob)
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = fileName
  link.click()
  link.remove()
  // 这里对资源进行释放, 否则会一直占据大量内存
  URL.revokeObjectURL(link.href)
}

通过前端进行图片压缩, 可以节省带宽流量, 减轻服务器压力, 但是通过canvas压缩达不到webp最好得效果, 而且不支持动态gif图片的转换, 这个时候我们就需要挪到后端进行处理了

后端WebP操作

安装依赖

1	npm install -save webp-converter

image Format To WebP

const webp = require('webp-converter')

// input, output, option
webp.cwebp("./1.jpg","1.webp","-q 80")
  .then( res =>{
    console.log(res)
  })

WebP to other image format

// input, output, option
webp.cwebp("./1.webp","1.jpg","-q")
  .then( res =>{
    console.log(res)
  })

Convert gif image to webp

// input, output, option
webp.gwebp("./1.gif","1.webp","-q 80")
  .then( res =>{
    console.log(res)
  })

这个库还有其他高级的动画操作方法, 这里就给出常用的一些方法

转换目录下所有图片

const fs = require('fs').promises
const path = require('path')
const webp = require('webp-converter')

function webpDir (targePath = './', isDelete = false) {
  // const targePath = 'D:/Down/'
  return new Promise((resolve, reject)=>{
    fs.readdir(targePath).then(res=>{
      const listQueue = []
      res.forEach(t=>{
        const type = t.split('.').pop()
        if(!isImage[type]) return ;
        const toName = path.join(targePath, t.replace(type, '') + 'webp')
        const inFile = path.join(targePath, t)
        if(type == 'gif') return webp.gwebp(inFile, toName).then(console.log)
        listQueue.push(webp.cwebp(inFile, toName).then(()=>isDelete&&fs.unlink(inFile)))
        // console.log(toName)
      })
      Promise.all(listQueue).then(resolve).catch(reject)
    })
  })
}

检查浏览器是否支持webp

在浏览器中可以采用JavaScript检测是否支持WebP，对支持WebP的用户输出WebP图片，否则输出其他格式的图片。

JavaScript检测是否支持WebP代码如下：（出自Google官方文档）

function check_webp_feature(feature, callback) {
  const kTestImages = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
  }
  const img = new Image()
  img.onload = function () {
    const result = (img.width > 0) && (img.height > 0)
    callback(feature, result)
  }
  img.onerror = function () {
    callback(feature, false)
  }
  img.src = "data:image/webp;base64," + kTestImages[feature]
}

在浏览器向服务器发起请求时，对于支持WebP图片的浏览器，会在请求头Accept中带上image/webp的信息，服务器便能识别到浏览器是否支持WebP，在服务器中处理图片。