CODEWITHSUNDEEP
fabricjs
melchiar
melchiar

Reputation: 2862

FabricJS Resize filters with canvas zoom

The default behavior of fabricJS resizefilters makes images look great as long as the zoom level is set to 1.0. This means images with a resizefilter look pixelated when zoomed in, as well as when exporting the canvas with a multiplier. Is there a way for resizefilters to take into account the current canvas zoom level or toDataURL multiplier?

https://jsfiddle.net/melchiar/mh9ba4pz/

fabric.Image.fromURL(imageData, function(img) {
  img.set({
    left: 10,
    top: 10
  }).scale(0.5);
  img.resizeFilter = new fabric.Image.filters.Resize({
    resizeType: 'hermite'
  });
  img.applyResizeFilters();
  canvas.add(img);
});

Upvotes: 0

Views: 864

Answers (2)

melchiar
melchiar

Reputation: 2862

Just an update on this question, this issue was a bug that was fixed with Version 2.3.4. Using a resizefilter will now apply resizing based on the current zoom level, and works with toDataURL multipliers as well.

Upvotes: 0

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

Hi i have seen your question on the issue tracker too, as of now there is no simple way to obtain it with the resize filter. The only way to make it non pixellated is to remove at export time the resizeFilter and add one resizeFilter in the normal filter chain with a precalculated ratio.

This is actually a bug.

issue tracker: https://github.com/fabricjs/fabric.js/issues/5071

Upvotes: 1

Related Questions