图片格式转化为webp

上传图片改变格式为webp

1. 先读取图片文件改为base64格式
2. 利用canvas.toBlob将canvas上的内容转化为指定的(image/webp)格式文件
3. 组装参数，上传图片

export function imgToWebp(file, fileName, callback, quality=0.8) {
  return new Promise((resolve, reject) => {
      const fr = new FileReader()
      fr.readAsDataURL(file)
    
      fr.addEventListener('load', (event) => {
        console.log('modify type is webp');
        const image = new Image()
        image.src = event.target.result
        image.onload = async function() {
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d')
          canvas.height = image.height
          canvas.width = image.width
          ctx.drawImage(image, 0, 0)
          // const dataurl = canvas.toDataURL("image/webp", 0.8)
          //转为webp格式的blob
          canvas.toBlob(async blob => {
            const file = new File([blob], `${fileName}.webp`, {
              type: "image/webp",
            });
            const res = await uploadFile(file)
            resolve(res)
          },
            "image/webp",
            quality,)
        }
      })
  })
}