Canvas Fabric js大图像渲染提供像素化结果

Canvas Fabric js大图像渲染提供像素化结果,canvas,fabricjs,Canvas,Fabricjs,我必须将大图像(8000x6500)放入800x650画布 当我尝试使用canvas.add()简单地渲染图像,并以100%的比例渲染图像时,得到的图像比原始图像更像素化/模糊 这是我正在使用的代码(只有图像稍微小一点,但您仍然可以看到问题): 您可以看到一个示例JSFIDLE 作为比较,您如何看待konva,禁用图像上的objectCaching将解决像素化问题。默认情况下,Fabric在图像上启用objectCaching,这意味着您的巨大图像将绘制在与图像本身一样大的巨大屏幕外画布上,并且

我必须将大图像(8000x6500)放入800x650画布 当我尝试使用canvas.add()简单地渲染图像,并以100%的比例渲染图像时,得到的图像比原始图像更像素化/模糊

这是我正在使用的代码(只有图像稍微小一点,但您仍然可以看到问题):

您可以看到一个示例JSFIDLE


作为比较,您如何看待konva,禁用图像上的
objectCaching
将解决像素化问题。默认情况下,Fabric在图像上启用
objectCaching
,这意味着您的巨大图像将绘制在与图像本身一样大的巨大屏幕外画布上,并且可能达到浏览器的最大画布大小

有关fabric对象缓存的更多信息,请参见:


谢谢您的详细解释!在android chrome上,即使objectCaching设置为false,图像的分辨率也很差,可能是因为它是一款移动浏览器?您使用的是哪款手机?在运行Chrome的华为p10上看起来不错我使用的是pixel 2 XL,我正在做一些
image.scale()
,因为我必须裁剪图像并调整裁剪区域以适应画布大小,但我尝试在小提琴中复制,它在那里正常工作。。我正在尝试使用remote inspectorOk进行本地调试,因此,如果您尝试使用桌面,我会看到正确的图像,而手机会模糊(只是尝试使用较大的图像,这是我的使用案例)
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);
});