2017-09-06 29 views
0

目前与结构2.0.6一起使用,以在HD图像上应用滤镜。我需要在最短的时间内应用过滤器。为此,我使用webGL方法来应用滤波器,如here (fabric.js demo)所述。如果您将其应用于大小为< = 1 MB的图像,则效果非常好,但图像尺寸大于此值时,滤镜确实应用得相当好,但它在剪裁图像时效果非常好。附接在测试图像和应用灰度滤波器,用于参考在高清图像上应用WebGL滤镜会削减图像(结构V2-beta-6)

原图像(大小1.90 MB) OrignalImage

应用滤波器 Before

它如何出现施加灰度滤波器前后它如何出现 enter image description here

回答

2

请参考更新日志和说明:

http://fabricjs.com/fabric-filters

而不是查看演示应用程序,您会注意到该文档讨论的是fabric.textureSize属性。

该限制与以兆字节为单位的大小无关,但与像素大小有关。

它设置为2048,大小为基础设置,以适应大多数旧硬件并为您提供最大2048x2048的过滤器尺寸。

在将您的应用程序启动至您认为想要支持的最大大小之前,请提高此值。例如4096。

如果你超过5000你可能会失去对ie11的支持。

有两个限制,您必须注意: 浏览器中的最大画布尺寸和用户正在使用的笔记本电脑的硬件中的最大纹理尺寸。

+0

感谢您的帮助。如果我可能会问,如何计算适合2800 x 1800尺寸图像的滤镜尺寸?是否有公式可以预测图像的合适滤镜尺寸? –

+0

您必须选取2800.纹理的创建与图像一样大,而用于保持它的画布则是创建方形。可能是因为我没有插入2个参数,其背后真的没有具体的原因。所以你的webgl画布将是2800x2800 – AndreaBogazzi

+0

我将fabric.textureSize增加到了4096,就像你指示的一样,但是图像被剪掉了 –