how to compress a base64 image to custom size
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
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/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.
S.M_Emamian
I was born in Kashan. I think the technology means Let me try.. Actually I'm have interested in a wide-range of technology topics, including programming languages, opensource and any other cool technology that catches my eye. I'm using Ubuntu 15.10,El capital.
Updated on August 23, 2022Comments
-
S.M_Emamian over 1 year
I send/receive my image by using base64. I have a base64 string and I want to compress it to my size.
for example I want to reduce photo size to 100kb.
Is it possible?
-
Ben almost 6 yearsDecode it to an image format, set it to a canvas, then encode it using PNG or jpg to the target size, then encode as base64.
-
Prashant Pimpale almost 6 yearsUsing javascript or any serverside lang?
-
Ben almost 6 yearsPossible duplicate of How to compress an image via Javascript in the browser?
-
Hyyan Abo Fakher almost 6 yearsPossible duplicate of JavaScript reduce the size and quality of image with based64 encoded code
-
Endless almost 6 yearsif you don't encode it as base64 you will save ~3x more in size
-
Venugopal M over 3 yearsExactly the question I wanted to ask !
-
-
Endless almost 6 yearsps, if you change to
image/webp
you get a lower quality loss -
siddharth shah over 4 yearsthanks for the wonderful answer. It would be even great if you are able to attach a working example!!
-
siddharth shah over 4 yearsIn while loop blob is not getting generated. it is null
-
Venugopal M over 3 yearsWorked in a jiffy! Exactly what I was trying to figure out for a couple of weeks. BTW, I just ignored the "webp" part and it gave me a size of 170Kb instead of 900 !