Compression settings ignored when using Crop

[sigma-technology]

Describe the bug
When using the Crop plugin, the compression, compressionFromMimes, and compressionToMime settings seem to be ignored - it simply uploads a PNG no matter what.
Using v3.0.1

To Reproduce
Steps to reproduce the behavior:

1. Use the settings (for example):

compression: 0.8,
compressionFromMimes: ["image/jpeg", "image/webp"],
compressionToMime: "image/jpeg"

2. Add in the Crop plugin
3. Upload from File, a JPG image
4. Select crop area
5. Click Upload
6. Image is uploaded as a PNG with no compression, and is very large

Expected behavior
The compression settings should be adhered to even when using the Crop function. The Blob image should somehow retain its original Mime type and convert to the compressionToMime if appropriate.

Desktop (please complete the following information):

• OS: Windows 10 x64
• Browser: Chrome
• Version: Latest

[AnandChowdhary]

This mainly has to do with our dependency for cropping, which returns PNGs. I think I can convert it post-result, let me see what I can do. 😄

[sigma-technology]

I've just been looking at the cropperjs docs and it looks like you can use: cropper.getCroppedCanvas().toDataURL('image/jpeg') - could maybe substitute the Mime type in brackets for the original submitted Mime type, before conversion using compressionToMime ?

Hope this helps in some small way.

[github-actions]

🎉 This issue has been resolved in version 3.0.2 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[sigma-technology]

From my initial testing this seems to be working great now, thank you.

Also many thanks for the addition to the Contributors. We plan to contribute much more than just bug reports in the future.

[AnandChowdhary]

Thanks! Your contributions have been invaluable! You've found so many bugs, I'm happy to have you on the front page. :)

[saqueib]

@AnandChowdhary I am using "uppload": "^3.1.0", but still same issue, it always uses original mime and from camera always png. here is my config

this.uppload = new Uppload({
    lang: en,
    uploader: this.uploadHandler,
    maxSize: [430, 430],
    compression: 0.8,
    compressionFromMimes: ["image/jpeg", "image/webp", "image/png"],
    compressionToMime: "image/jpeg"
});

let camera = new Camera();

this.uppload.use([
    new Local({
        mimeTypes: ["image/png", "image/jpeg"]
    }),
    new Crop({aspectRatio: 1}),
    new Rotate(),
    new Brightness(),
    new Contrast(),
    new Saturate(),
    camera
]);

// stop the camera when done
this.uppload.on('close', () => camera.stop())

[saqueib]

@AnandChowdhary One more thing about compression, although I set compression: 1, image quality is not that good, it looks grainy, feels like compression: 0.5

Thanks for this amazing uploader, waiting for your response on this
Keep up the good work 👍

[AnandChowdhary]

@saqueib I'll have to look into this, can you perhaps create an example on CodeSandbox or JSFiddle to reproduce it? The graininess of photos typically depends on your webcam quality (if you're using the Camera service) or perhaps an effect like Crop. Otherwise, if you upload a 5 MB high-resolution JPEG with on effects, it should upload that exact file in the same quality.

[saqueib]

Yes I am using Crop effect to resize image before uploading. How do I use this image resize library https://github.com/nodeca/pica

[AnandChowdhary]

If you want to use it for compression instead of our default helper, you can use the compressor property: https://uppload.js.org/compression#image-compression. If you want to use it as a custom Effect (instead of crop, for example), you'll have to write an effect like this: https://github.com/elninotech/uppload/blob/master/src/effects/crop/index.ts