Apply Image Filter on Getting Cropped Canvas

[Chopinsky]

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]

hi did you plan to add effect in cropperjs ?

[fengyuanchen]

Maybe. You can try other image editors first.

[abhinavsi1]

@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]

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]

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

[enjineerds]

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

[fengyuanchen]

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

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