-
Notifications
You must be signed in to change notification settings - Fork 2.4k
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
Comments
hi did you plan to add effect in cropperjs ? |
Maybe. You can try other image editors first. |
@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 ? |
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.? |
Here is an old example from the early jQuery version: Use Cropper with CamanJS. |
Maybe you can try fabric.js for filters http://fabricjs.com/image-filters |
For Cropper.js v2.x, try the cropperSelection.$toCanvas({
beforeDraw: (context, canvas) => {
context.filter = 'grayscale(100%)';
},
}); |
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 likeimageFilter
, 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 thegetCroppedCanvas
, 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.The text was updated successfully, but these errors were encountered: