pqina / filepond-plugin-image-transform

đź–Ľ Client-side image transformations for FilePond
https://pqina.nl/filepond
MIT License
18 stars 8 forks source link

Uploading original image in case there are no transformations applied #1

Closed kasparek closed 6 years ago

kasparek commented 6 years ago

Trying to understand if there is a way to do that, but so far I did not have any luck.

I've noticed you implemented the upscale = false, to prevent upscaling images smaller than target size, which is one thing I was looking before.

But my next issues is I need to be able to upload original images without re-encoding into JPG again in case there are not transformations applied. Is that possible?

kasparek commented 6 years ago

The problem seems to be here:

// no transforms defined, we done!
if (quality === null && type === null && !crop && !transforms.length) {

where in transforms list there I have one transformation - resize - but since that is upscale=false, did not apply for my image, but is still in the list of transforms and the image is re-encoded

rikschennink commented 6 years ago

Good one.

A transform can be defined but it can still have no effect on the output. For instance when the image size matches the required output size or there's no upscaling allowed and the image is smaller than the target size.

Will see if I can add this somehow.

kasparek commented 6 years ago

One way easy to do I thought would be just compare the imagedata after the transform worker returns the response. If the imagedata are unchanged, you can upload the original image. Problem I found is that the original image does not seem to be stored anywhere.

rikschennink commented 6 years ago

That could work but I'm a bit worried comparing big ImageData objects might be too heavy on the CPU.

A way to know if a transform should be applied or if it has already been applied ( suppose the file is loaded from the server and has already been compressed / filtered / watermarked / resized / etc. ) would be more flexible and faster. With server files the server could return some additional information with the file ( as a custom header maybe ), then each transform ( currently it's only the crop and resize plugins, but I'm planning to add more ) could expose a boolean indicating whether it should be applied or not.

kasparek commented 6 years ago

That would definitely make more sense to do sort of verification on transforms before the image is loaded into canvas, since in case there are no transforms to be applied, that would not be necessary.

rikschennink commented 6 years ago

@kasparek Just wanted to let you know that this is still on my radar but haven't gotten around to picking it up yet.

kasparek commented 6 years ago

Great, I was thinking creating additional plugin to sort of do verification for necessity of each transformation. But would be probably better implemented in transformer itself.

po 18. 6. 2018 v 14:08 odesĂ­latel Rik notifications@github.com napsal:

@kasparek https://github.com/kasparek Just wanted to let you know that this is still on my radar but haven't gotten around to picking it up yet.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pqina/filepond-plugin-image-transform/issues/1#issuecomment-398048050, or mute the thread https://github.com/notifications/unsubscribe-auth/AAOPSILQbjntFX9KLUw5LIxSPYp1ZDXJks5t96ZOgaJpZM4UhC3A .

rikschennink commented 6 years ago

It's tricky so I'm taking a bit of time to consider a good (future proof) approach, would hate to build something and have to make breaking changes later on.

rikschennink commented 6 years ago

Just wanted to let you know that it's still on my todo list, life has got in the way ;-)

kasparek commented 6 years ago

Great, this is really important for my case. Need to be able upload prepared images from more advanced users without re-encoding, but also scale big image directly from cameras.

ÄŤt 12. 7. 2018 v 7:43 odesĂ­latel Rik notifications@github.com napsal:

Just wanted to let you know that it's still on my todo list, life has got in the way ;-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pqina/filepond-plugin-image-transform/issues/1#issuecomment-404406769, or mute the thread https://github.com/notifications/unsubscribe-auth/AAOPSKXAyM8PClifCXcossjUlCkMvYZNks5uFvAngaJpZM4UhC3A .

rikschennink commented 6 years ago

I'm wondering if the new File Poster plugin combined with file mock information could help resolve this issue.

Add file mock information and poster image, with these settings FilePond does not load the actual file but creates a mock item. In this setup, the files don't have to be re-uploaded (and are therefore not transformed twice)?

const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: 'my-file.png',
                    size: 3001025,
                    type: 'image/png'
                },

                // url used by poster plugin
                metadata: {
                    poster: './url/to/my-file-thumb.png',
                }
            }
        }
    ]
});
kasparek commented 6 years ago

I am not sure I follow how do you mean to use that plugin for the given problem. The images that need NOT to be re-encoded are not uploaded yet.

po 23. 7. 2018 v 7:23 odesĂ­latel Rik notifications@github.com napsal:

I'm wondering if the new File Poster plugin https://github.com/pqina/filepond-plugin-file-poster combined with file mock information could help resolve this issue.

Add file mock information and poster image, with these settings FilePond does not load the actual file but creates a mock item.

const pond = FilePond.create({ files: [ { // the server file reference source: '12345',

        // set type to local to indicate an already uploaded file
        options: {
            type: 'local',

            // mock file information
            file: {
                name: 'my-file.png',
                size: 3001025,
                type: 'image/png'
            },

            // url used by poster plugin
            metadata: {
                poster: './url/to/my-file-thumb.png',
            },
        }
    }
]

});

As the files have already been uploaded before, maybe you can "mock" them and set poster images? In that situation, the files don't have to be re-uploaded (and are therefore not transformed twice)?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pqina/filepond-plugin-image-transform/issues/1#issuecomment-406952223, or mute the thread https://github.com/notifications/unsubscribe-auth/AAOPSGnEXRUWnEilVLgXGXq-bdpkgx59ks5uJWvrgaJpZM4UhC3A .

rikschennink commented 6 years ago

Alright, I assumed this only concerned files uploaded by the user in an earlier session.

rikschennink commented 6 years ago

Can you try with this alpha version of the image resize plugin? https://github.com/pqina/filepond-plugin-image-resize/tree/1.2.0-alpha

It tests the original image size against the target image size and if they're the same, or if upscaling is disabled and the original image is smaller it wont set the resize info.

kasparek commented 6 years ago

Nope, did not help. Image still re-encoded even though I have set the target image size bigger that the source image is. The uploaded image is same size like the client uploading, but file size changes / so it is re-encoded into new JPG.

Ăşt 24. 7. 2018 v 9:22 odesĂ­latel Rik notifications@github.com napsal:

Can you try with this alpha version of the image resize plugin? https://github.com/pqina/filepond-plugin-image-resize/tree/1.2.0-alpha

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pqina/filepond-plugin-image-transform/issues/1#issuecomment-407323475, or mute the thread https://github.com/notifications/unsubscribe-auth/AAOPSIcQj_Y12R17MGy07zX_l5rCYfAsks5uJtkugaJpZM4UhC3A .

rikschennink commented 6 years ago

Okay, I’ll test this further when I get back from vacation in two weeks, had my fingers crossed that this was a quick fix to get it working.

rikschennink commented 6 years ago

Just got back and ran some tests. I missed some edge cases. I've added reading of image orientation and the resulting width height corrections plus corrections for null values in the imageResizeTargetWidth and imageResizeTargetHeight properties. Just published version 2.0.1 of the image-resize plugin which contains these fixes, please let me know if this solves the problem on your side.

I've also published version 1.1.2 of the image-transform plugin, it's not related to this problem but it does fix another EXIF orientation bug so it's best to update that plugin as well.

kasparek commented 6 years ago

Great, will test and let you know.

kasparek commented 6 years ago

So, I'm not sure if I'm doing something wrong, but the image when smaller than target size and upscale is false, is correctly not upscaled (is uploaded with same dimensions), but still re-encoded (the filesize is different). This is my configuration for filepond: FilePond.create( input, { imageTransformOutputQuality: 60, imagePreviewHeight: 270, imageResizeUpscale: false, imageResizeTargetWidth: 2190, imageResizeTargetHeight: 2190, imageResizeMode: 'contain' } );

rikschennink commented 6 years ago

It gets re-encoded because the output quality parameter is set.

I'm going to add a bool that allows you to configure it to only apply quality to images when they require a transform.

rikschennink commented 6 years ago

I've just published version 2.1.0 adding the imageTransformOutputQualityMode option.

Set it to 'optional' to only apply quality when resizing, cropping or changing file format.

kasparek commented 6 years ago

Great, that works.