File gets to large when convert it to blob.

[TaeyoonKwon]

It seems the file size gets too large after converting the canvas to a blob.

I am using toBlob() method as instructed in the documetation.

const fr = new FileReader();
fr].readAsDataURL(this.files[0].file);
fr.onload = () => {
    this.cropper = fr.result;
}

const blob = await new Promise((resolve) => canvas.toBlob(resolve));

I am currently using stencil to crop the canvas, the result is cropped, so I think the file size should be smaller, but it results bigger. For example, one of my image's original size is 1.3MB but results in 5MB.

[Norserium]

@TaeyoonKwon, I'm not sure that it's the concern of this library. When you converts a canvas to a blob you literally create a new image and its size probably can be different than the original image.

Such big gap can be explained that you upload image/jpeg file, but when you use canvas.toBlob method you omits mimeType argument and create image/png file.

This line will get the better result (with some limitations): const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/jpg'));

But it's better to determine the format of an original image and use one.

The similar issue.

[Norserium]

@TaeyoonKwon, did I answer your question?

[TaeyoonKwon]

@Norserium Thank you for the answer. Though it still increases the file size, I understand it is not the conern of the library.

[Norserium]

@TaeyoonKwon, take a look at the updated upload example.