如何将base64图像压缩到自定义大小 [英] how to compress a base64 image to custom size
问题描述
我通过使用base64发送/接收我的图像.我有一个base64字符串，我想将其压缩到我的大小.
I send/receive my image by using base64. I have a base64 string and I want to compress it to my size.
例如，我想将照片大小减小到100kb.
for example I want to reduce photo size to 100kb.
有可能吗?
推荐答案
这是一个有趣的挑战，因为它涉及二进制搜索，直到找到合适的大小为止.我不建议您使用base64而不是blob来解决此问题，因为您应该将其真正以二进制(blob)的方式进行处理，否则它将以base64的形式占用约33％的数据
This was a fun challenge cuz it involved a binary search until it finds the right size. I'm not going to advice you to solve this with base64 instead of blob cuz you should really handle it as binary (blob) otherwise it takes up ~33% more data as base64
此代码包含调整大小的功能，您可以设置最大宽度/高度，并且仍然能够保持宽高比和自动质量查找，直到找到与MAX_SIZE相匹配的正确质量为止
This code includes resizing that you can set a max width/hight and still be able to keep the aspect ratio and auto quality lookup until it finds the correct quality to match the 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/警告，如果您在画布元素上绘制jpg图片并返回图像而没有调整大小，处理质量损失或更改格式，则画布不会做任何良好的压缩 toBlob('image/jpg'，cb，1)，那么您肯定会得到更大的文件，因为它们可能已经被很好地压缩了，而画布没有任何作用.我只更改质量和最大宽度/高度，以使用canvas api减小尺寸.您将需要一些压缩器以进一步减少压缩器而不会造成质量损失.
PS/warning Canvas don't do any good compression, if you paint a jpg picture on a canvas element and get the image back with no resizing, manipulation quality loss or changing the format toBlob('image/jpg', cb, 1) then you will most definitely get a larger file back since they probably already are well compressed and canvas dose none. I only change the quality & max width/height to reduce the size with the canvas api. You would need some compressor to reduce it even more without quality loss.
这篇关于如何将base64图像压缩到自定义大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
