Fabric js render of big image gives pixelated results

问题

I have to fit a big image (8000x6500) into a 800x650 canvas When I try to render the image simply using canvas.add() and having the image render at its 100% scale the resulting image is much more pixelated/blurred compared to the original one.

This is the code I'm using (only the image is a little bit smaller but you can still see the issue):

const canvas = new fabric.Canvas('c', { imageSmoothingEnabled: false });
fabric.Image.fromURL('http://cms.web.cern.ch/sites/cms.web.cern.ch/files/styles/large/public/field/image/LHC_and_mountains-0503019-1-nice.jpg', (image) => {
    image.left = -3000;
  image.top = -3500;
    canvas.add(image);
});

you can see an example jsfiddle here

As a comparison, this is how you see it with konva

回答1:

Disabling objectCaching on your image will fix the pixelation issue. Fabric enables objectCaching on images by default, which means that your enormous image is being drawn on a massive offscreen canvas that's as big as the image itself and is likely hitting the browser's max canvas size.

More on fabric's object caching here: http://fabricjs.com/fabric-object-caching

https://jsfiddle.net/melchiar/edjguh3L/

来源：https://stackoverflow.com/questions/52798525/fabric-js-render-of-big-image-gives-pixelated-results