我必须将大图像(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
相比之下,这就是您使用konva看到的样子
禁用objectCaching
图像可以解决像素问题。objectCaching
默认情况下,Fabric在图像上启用,这意味着您的巨大图像被绘制在一块巨大的屏幕外画布上,该画布与图像本身一样大,并且很可能会达到浏览器的最大画布大小。
有关Fabric对象缓存的更多信息,请访问:http : //fabricjs.com/fabric-object-caching
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句