大图像的Fabric js渲染给出了像素化的结果答案

【问题标题】：Fabric js render of big image gives pixelated results大图像的Fabric js渲染给出了像素化的结果
【发布时间】：2018-10-14 10:26:05
【问题描述】：

我必须将大图像 (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 的看法

【问题讨论】：

标签： canvas fabricjs

【解决方案1】：

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

更多关于fabric的对象缓存在这里：http://fabricjs.com/fabric-object-caching

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

【讨论】：

感谢您的详细解释！
在 android chrome 上，即使 objectCaching 设置为 false，图像的分辨率也很差，可能是因为它是移动浏览器？
您使用的是哪款手机？在我的运行 chrome 的华为 p10 上看起来不错
我正在使用像素 2 XL，我正在做一些 image.scale() 因为我必须裁剪图像并将裁剪区域调整为画布大小，但我试图复制它在小提琴中，它在那里正常工作..我正在尝试使用远程检查器在本地调试
好吧，如果您尝试jsfiddle.net/al3x88/edjguh3L/8/embedded 使用桌面，我会看到正确的图像，但手机是模糊的（只是尝试使用更大的图像，这是我的用例）