FabricJS v3.4.0:过滤器和maxTextureSize-性能/尺寸限制

问题描述 投票:0回答:1

Intro:

我一直在使用fabricJS图像过滤功能,试图在我的Web应用程序中开始使用它们,但是我遇到了以下问题。

[似乎fabricJS默认情况下仅将滤镜上的图像大小上限(textureSize)设置为2048,这意味着最大图像为2048x2048像素。

我试图通过调用fabric.isWebGLSupported()然后设置fabric.textureSize = fabric.maxTextureSize来提高默认值,但是即使我设备上的maxTextureSize在16000〜范围内,也仍然将其限制为4096x4096像素。

我意识到设备通常会报告全部价值而不考虑实际可用的当前内存,但这似乎仍然是一个硬限制。

所以我想我在这里要开始有效使用此功能的主要问题:

1-渲染阻止applyFilters()方法:

当前的过滤器应用程序功能似乎在浏览器中处于渲染阻止状态,有没有一种方法可以在不阻止渲染的情况下调用它,因此我可以显示不确定的加载微调器或其他东西?

是否像使apply filter方法异步并从应用程序中其他位置调用它那样简单? (我将vue用于上下文,使用webpack / babel来填充async / await等。)

2-大小限制:

是否有办法绕过图像的尺寸限制?我正在寻找过滤最大4800x7200像素的图像

我可以想到的至少一种方法是将图像“分解”为较小的图像,应用滤镜,然后将其缝合在一起。但是我担心这可能会降低性能,因为在此过程中将进行很多画布导出和画布初始化。

我很惊讶,fabricjs在默认情况下并没有进行“分块”操作,因为它是一个非常全面的库,我认为他们已经到了使用webGL着色器(对我来说是黑盒)的地步。过滤性能,有没有更好的方法?

我的另一种解决方案是将图像发送到服务(我手动购买,或已存在的付费服务),该服务将过滤器应用到云中的某个地方并将其返回给用户,但这不是我更喜欢的解决方案求助于。

对于上下文,我主要使用fabric.Canvasfabric.StaticCanvas在我的应用程序中初始化画布。

任何对此的见解/帮助都很好。

简介:我一直在使用fabricJS图像过滤功能,试图在我的Web应用程序中开始使用它们,但是我遇到了以下问题。似乎默认情况下fabricJS仅设置图像大小...

vue.js html5-canvas webgl fabricjs
1个回答
0
投票

[我和Scott Seaward先生一起写了fabricJS的过滤后端(也向他致谢,我可以给你一些答案。

© www.soinside.com 2019 - 2024. All rights reserved.