Question

我必须将一张大图片（8000x6500）放入800x650的画布中当我尝试仅使用canvas.add()渲染图像并以其100％比例渲染图像时，与原始图像相比，生成的图像像素化/模糊得多。

这是我正在使用的代码（只是图像稍小，但您仍然可以看到问题）：

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);
});

您可以看到一个示例jsfiddle here

作为比较，this是您使用konva看到的方式

Answer 1

在图像上禁用objectCaching将解决像素问题。默认情况下，Fabric在图像上启用objectCaching，这意味着巨大的图像被绘制在一块巨大的屏幕外画布上，该画布与图像本身一样大，并且很可能会达到浏览器的最大画布大小。

更多有关Fabric对象缓存的信息：http://fabricjs.com/fabric-object-caching

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

大图像的Fabric JS渲染给出像素化结果

1 个答案: