/**
 * 根据 jpeg、png File 文件对象,获取 webp 格式的 File 文件对象
 * @param {File} imageFile jpeg、png图片文件对象
 * @returns image/webp File
 */
const getWebpFileByImageFile = imageFile => {
  const base64ToFile = (base64, fileName) => {
    let arr = base64.split(','),
      type = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], fileName, {
      type
    });
  };
  return new Promise((resolve, reject) => {
    const imageFileReader = new FileReader();
    imageFileReader.onload = function(e) {
      const image = new Image();
      image.src = e.target.result;
      image.onload = function() {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);
        resolve(base64ToFile(canvas.toDataURL("image/webp"), imageFile.name.split(".")[0] + ".webp"))
      }
    }
    imageFileReader.readAsDataURL(imageFile)
  });
}
来源 : https://blog.csdn.net/BaymaxCSDN/article/details/120528629

标签: webp