Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply Image Filter on Getting Cropped Canvas #652

Open
Chopinsky opened this issue Apr 13, 2020 · 7 comments
Open

Apply Image Filter on Getting Cropped Canvas #652

Chopinsky opened this issue Apr 13, 2020 · 7 comments

Comments

@Chopinsky
Copy link

Is your feature request related to a problem? Please describe.
When building a more complex photo editor application on top of this library, the applied image filter (which are CSS filters applied to the canvas images in the control) will not be applied to the cropped canvas image output from the getCroppedCanvas function call.

Lacking the ability to apply image filters in this API will make it harder to work with the use cases like the one above. Alternative solution would be creating a new canvas using the getCroppedCanvas, apply the filter, draw the image, and then retrieve the image again. This workaround is sub-optimal, and we should at least give library users the ability to apply the filter before drawing the canvas.

Describe the solution you'd like
Give the application an option in the getCroppedCanvas, e.g. something like imageFilter, and then use this value for the filter property of the canvas context.

Describe alternatives you've considered
As mentioned above, the workaround is to create another canvas, apply the image data output from the API, apply the filter, and then extract the image again. This solution is sub-optimal as we will need to create an extra canvas element, draw the image with the filter, and dump it right after. This could be a performance hit for large images.

Additional context
The canvas object is returned after context calls the drawImage API, which makes it impossible to apply the filter after the getCroppedCanvas, because the canvas has been drawn and the image won't include the filters added after.

Proposed Solution
Add an option for the imageFilter, or give the application an opportunity to apply any extra effects and then draw/redraw the image.

@micker
Copy link

micker commented Apr 20, 2020

hi did you plan to add effect in cropperjs ?

@fengyuanchen
Copy link
Owner

Maybe. You can try other image editors first.

@abhinavsi1
Copy link

@fengyuanchen I would like to work on this, i am using cropperjs on multiple projects and want this feature. Right now we are using other libraries and custom code which is performance kill and instead of using css filters i am planning to do canvas pixels manipulation. let me do a poc and see the results ?

@bestulin
Copy link

bestulin commented Nov 28, 2021

I this being worked on? Is there a working example that someone can share that demonstrates how one can use cropperjs with css style property to set brightness, contrast, etc.?

@fengyuanchen
Copy link
Owner

fengyuanchen commented Dec 5, 2021

Here is an old example from the early jQuery version: Use Cropper with CamanJS.

@enjineerds
Copy link

Maybe you can try fabric.js for filters http://fabricjs.com/image-filters

@fengyuanchen
Copy link
Owner

For Cropper.js v2.x, try the beforeDraw option of the $toCanvas method:

cropperSelection.$toCanvas({
  beforeDraw: (context, canvas) => {
    context.filter = 'grayscale(100%)';
  },
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants