Fabric JS渲染大图像可提供像素化结果 [英] Fabric js render of big image gives pixelated results
问题描述
我必须将一张大图片(8000x6500)放入800x650的画布中当我尝试仅使用 canvas.add()
渲染图像并以100%的比例渲染图像时,与原始图像相比,生成的图像像素化/模糊得多.
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);
});
您可以在此处
作为比较,这是您在konva上看到的方式
As a comparison, this is how you see it with konva
推荐答案
在图像上禁用 objectCaching
将解决像素化问题.Fabric默认情况下在图像上启用 objectCaching
,这意味着您的巨大图像被绘制在一块巨大的屏幕外画布上,该画布与图像本身一样大,并且很可能会达到浏览器的最大画布大小.
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.
更多有关Fabric对象缓存的信息: http://fabricjs.com/fabric-object-caching
More on fabric's object caching here: http://fabricjs.com/fabric-object-caching
https://jsfiddle.net/melchiar/edjguh3L/
这篇关于Fabric JS渲染大图像可提供像素化结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!