从图像URL转换时，如何调整base64的图像宽度大小？

Question

我有一个脚本将图像URL转换为base64。但是我不知道如何调整图像宽度和高度大小，以尊重图像的纵横比，然后再将其转换为base64。

<script>
const getBase64FromUrl = async (url) => {
  const data = await fetch(url);
  const blob = await data.blob();
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = () => {
      const base64data = reader.result;   
      resolve(base64data);
    }
  });
}
getBase64FromUrl('https://lh3.googleusercontent.com/i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD_0mOXaYZMzekfKW_ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8').then(console.log)
</script>

我从 https://stackoverflow.com/a/64929732/18642473

Answer 1

这是我在上传之前要压缩图像的方法：

 const img_convert = (img_data) => {
    const imgArr = img_data
    const reader = new FileReader()
    reader.readAsDataURL(img_data)
    reader.onload = (e) => {
      const imgData = e.target.result
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const newImg = document.createElement('img')
      newImg.setAttribute('src', imgData)
      newImg.onload = () => {
        const imgSize = (imgArr.size / (1000 * 1024)).toFixed(1)
        const actualWidth = newImg.width
        const actualHeight = newImg.height

        const imgWidth = Math.floor(
          actualWidth / (imgSize < 1 ? 1 : imgSize > 5 ? 4 : imgSize)
        )
        const imgHeight = Math.floor(
          actualHeight / (imgSize < 1 ? 1 : imgSize > 5 ? 4 : imgSize)
        )
        canvas.width = imgWidth
        canvas.height = imgHeight
        ctx.drawImage(newImg, 0, 0, imgWidth, imgHeight)
        const imgUrl = canvas.toDataURL('image/webp')
        setPost_img(imgUrl)
      }
    }
  }

您可以根据需要自定义图像