White space invades image on android phone for the first image taken in camera

[kyoung-jnn]

Reason

I tried to compress jpeg image, but white space Intermittent occurs..
I think that it is reason of extra canvas. 🙄 how think about it?!

Code Example

export const compressImage = async (targetImage: File) => {
  const options = {
    fileType: 'image/jpeg',
    maxSizeMB: 0.5,
    maxIteration: 100,
  };
  try {
    const imageCompression = (await import('browser-image-compression')).default;
    const compressedFile = await imageCompression(targetImage, options);

    return compressedFile;
  } catch (error) {
    console.error(error);
  }
};

const compressedImage = await compressImage(targetImage);
return new File([compressedImage], targetImage.name, {
    type: targetImage.type,
    lastModified: targetImage.lastModified,
});

[sscholle]

i find this seems to happen when I upload a photo that i took directly with camera (not a file upload) on my Huawei P20 Pro.

In other words: If i choose the upload source to be "Camera" instead of 'File/Browse" in the Android File section dialog.
So if Camera is the source, it them fails to somehow detect the correct image size, and seemingly shrinks down the main image and adds some white border;

[Donaldcwl]

@kyoung-jnn @sscholle
Can you upload the image file as a zip file here so I can reproduce this issue?

Also, can you try it here: https://donaldcwl.github.io/browser-image-compression/example/basic.html

[todevmilen]

New info here ? We have the same problem with Huawei P30 Lite.

[Donaldcwl]

Can someone give detailed steps to reproduce this issue?

lib version, browser, original image file, config, etc

[dyscordia]

Had the same problem. My settings for image compression were:

{ maxSizeMB: 0.5,
maxWidthOrHeight: 1920,
useWebWorker: true }

I found that the combination of maxSize + maxWidthOrHeight caused the image to shrink down in the space, but cause the additional whitespace to appear. I only ever experienced this while using a mobile device camera - never from files from the system.

This was noticed by users on multiple android phones. It seemed to happen frequently on the first image taken, but subsequent images compressed as expected.

I removed the maxWidthOrHeight and that helped resolve the issue.

Hope this helps someone!

[todevmilen]

@dyscordia Thanks for the advice.

[sscholle]

@kyoung-jnn @sscholle Can you upload the image file as a zip file here so I can reproduce this issue?

Also, can you try it here: https://donaldcwl.github.io/browser-image-compression/example/basic.html

Original
Cannot get it, as it's sent directly to the file element on your sample page.

[sscholle]

Maybe the MB size is the problem.

I tried with a 0.5MB limit, and this gives the bad result with large white border.

When I choose the bigger size, it seems to work better.

The images that I used are similar to this one, check resolution and meta data to maybe try replicate.

[quique0194]

This error is so critical for us that we sadly have to migrate to another library: https://github.com/fengyuanchen/compressorjs