Problem with file size

[po1yarniy]

Hello everyone
Perhaps someone has encountered a similar problem.

How to solve the problem, so that the format of the image after cropping does not change, and the file size does not increase?
input: jpeg file size 1920x1280 / 239kb
output: png file size 1917x1078 / 2.36mb

[sekoyo]

Hi, PNG is a lot larger than JPG format. If you look at the syntax of toBlob (or toDataURL though that's not recommended) it can take 3 arguments toBlob(callback, type, quality) so you can do toBlob(callback, 'image/jpeg', 1) you can also lower the quality of the jpeg e.g. toBlob(callback, 'image/jpeg', 0.8) for 80% quality.

[IDavidCP]

I'm having the same issue. Changing to JPEG with canvas.toBlob(callback, 'image/jpeg', 0.8) does help, the file size won't go too high but the resolution is still increasing. For me setting 80% quality is the right balance. Thanks @dominictobias for the solution 👍

[sekoyo]

@IDavidCP is the image coming out larger than expected? Are you on a retina device like a macbook? If you put window.devicePixelRatio in your console what does it say? If the value is larger than 1 then the image will come out bigger than expected. I should put an example up of resizing the image down in an offscreen canvas before saving but I haven't written the code yet and been lazy to do it... will do at some point

[po1yarniy]

Hi, PNG is a lot larger than JPG format. If you look at the syntax of toBlob (or toDataURL though that's not recommended) it can take 3 arguments toBlob(callback, type, quality) so you can do toBlob(callback, 'image/jpeg', 1) you can also lower the quality of the jpeg e.g. toBlob(callback, 'image/jpeg', 0.8) for 80% quality.

Thank you, it works!

[IDavidCP]

@dominictobias Yes, the image is coming out larger than expected. I'm not using retina device and window.devicePixelRatio is 1. This is function I'm using to create the blob:

function toBlob(canvas: HTMLCanvasElement): Promise<Blob | null> {
  return new Promise((resolve) => {
    canvas.toBlob(resolve, 'image/jpeg', 0.8)
  })
}

Original image: .jpg 900x900 100kb
New image: .jpeg 1349x1349 141kb