javascript - 如何将 Base64 图像压缩为自定义尺寸

Question

我使用 Base64 发送/接收图像。我有一个 base64 字符串，我想将其压缩到我的大小。

例如我想将照片大小减小到 100kb。

可能吗？

Answer 1

这是一个有趣的挑战，因为它涉及二分搜索，直到找到合适的大小。我不会建议您使用 base64 而不是 blob 来解决此问题，因为您实际上应该将其作为二进制 (blob) 处理，否则它会比 base64 多占用大约 33% 的数据

此代码包括调整大小，您可以设置最大宽度/高度，并且仍然能够保持宽高比和自动质量查找，直到找到与 MAX_SIZE 匹配的正确质量

console.log('Downloading lorem ipsum image to simulate a file from user input')

fetch('https://picsum.photos/1920/1080/?random')
.then(res => res.blob())
.then(blob => {
  const img = new Image()
  img.src = URL.createObjectURL(blob)

  console.log(`Original image size (at 1920x1080) is: ${blob.size} bytes`)
  console.log('URL to original image:', img.src)
  
  img.onload = () => resize(img, 'jpeg').then(blob => {
    console.log('Final blob size', blob.size)
    console.log('Final blob url:', URL.createObjectURL(blob))

    console.log('\nNow with webp\n')

    resize(img, 'webp').then(blob => {
      console.log('Final blob size', blob.size)
      console.log('Final blob url:', URL.createObjectURL(blob))
    })
  })
}) 


const MAX_WIDTH = 1280
const MAX_HEIGHT = 720
const MAX_SIZE = 100000 // 100kb

async function resize(img, type = 'jpeg') {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  
  ctx.drawImage(img, 0, 0)
  
  let width = img.width
  let height = img.height
  let start = 0
  let end = 1
  let last, accepted, blob
  
  // keep portration
  if (width > height) {
    if (width > MAX_WIDTH) {
      height *= MAX_WIDTH / width
      width = MAX_WIDTH
    }
  } else {
    if (height > MAX_HEIGHT) {
      width *= MAX_HEIGHT / height
      height = MAX_HEIGHT
    }
  }
  canvas.width = width
  canvas.height = height
  console.log('Scaling image down to max 1280x720 while keeping aspect ratio')
  ctx.drawImage(img, 0, 0, width, height)
  
  accepted = blob = await new Promise(rs => canvas.toBlob(rs, 'image/'+type, 1))
  
  if (blob.size < MAX_SIZE) {
    console.log('No quality change needed')
    return blob
  } else {
    console.log(`Image size after scaling ${blob.size} bytes`)
    console.log('Image sample after resizeing with losseless compression:', URL.createObjectURL(blob))
  }
  
  // Binary search for the right size
  while (true) {
    const mid = Math.round( ((start + end) / 2) * 100 ) / 100
    if (mid === last) break
    last = mid
    blob = await new Promise(rs => canvas.toBlob(rs, 'image/'+type, mid))
        console.log(`Quality set to ${mid} gave a Blob size of ${blob.size} bytes`)
    if (blob.size > MAX_SIZE) { end = mid }
    if (blob.size < MAX_SIZE) { start = mid; accepted = blob }
  }

  return accepted
}

PS/警告 如果您在 Canvas 元素上绘制 jpg 图片并在没有调整大小、操作质量损失或更改格式的情况下恢复图像，则 Canvas 不会进行任何良好的压缩toBlob('image/jpg', cb, 1) 那么你肯定会得到一个更大的文件，因为它们可能已经被很好地压缩了，并且 Canvas 没有任何压缩。我仅更改质量和最大宽度/高度以使用 Canvas api 减小尺寸。您需要一些压缩器来进一步减少它而不损失质量。

• jsfiddle demonstration of file increase with canvas
• imageoptim
• squoosh.app
• zopfli
• pngcrush