Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

keep pixels 'sharp' after zoom with fabricjs

I am displaying images using fabricjs and enabled zooming using fabrics

myFabric.zoomToPoint({ x: x, y: y }, newZoom);

the problem is that when I zoom in the pixels are getting blurred instead of being kept 'sharp'\'separated' from one another.
zoomed out:

zoomed out
zoomed in:
zoomed in

like image 732
Alon Segal Avatar asked Oct 22 '25 15:10

Alon Segal


1 Answers

There is an imageSmoothingEnabled option you can pass at the creation of your fabric's Canvas :

var canvas = new fabric.Canvas('a', {
  imageSmoothingEnabled: false // here you go
});
fabric.Image.fromURL("https://i.sstatic.net/dQRkt.png", function(img) {
  canvas.add(img);
  canvas.zoomToPoint({x: 50, y: 50}, 120);
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="a" height="380" width="250"></canvas>
like image 78
Kaiido Avatar answered Oct 25 '25 03:10

Kaiido