search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.02k stars 3.45k forks source link

[Bug]: clipPath destroys quality of big images #9951

Closed technowsky closed 2 days ago

technowsky commented 3 days ago

This is bug from very long ago (When fabric.js changed clipTo (work fine) to clipPath (quality loss)). I have tried many workarounds from github but no luck.

Version

5.3.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://jsfiddle.net/zc98q6nb/26/

Steps To Reproduce

  1. Load big image (around 5000x5000 pixels) to canvas
  2. Add clipPath to image
  3. The image will be of lower quality

Expected Behavior

Image quality will be the same after adding clipPath

Actual Behavior

Adding clipPath results quality loss

Without clipPath: image

With clipPath: image

Error Message & Stack Trace

None
asturur commented 2 days ago

The issue with clipTo is that it can't be nested. If you are not interested in nesting you can still subclass or change the render method of the image and clip with clipTo. The reason why clipPath has a bad effect on images is because it forces caching on an intermediate surface area.

Not sure what many workarounds you tried, but since you didn't mention them i supposed you didn't try tweaking object-caching http://fabricjs.com/fabric-object-caching