在HD图像上应用WebGL滤镜可剪切图像(织物V2-beta-6) [英] Applying WebGL filter on HD Images cuts the image (fabric V2-beta-6)

问题描述

当前与 fabric 2.0.6 一起在高清图像上应用滤镜.我需要在最少的时间内应用过滤器.为此，我正在使用webGL方法来应用过滤器，如此处(fabric.js演示)所述.如果将其应用于大小小于等于1 MB的图像，则可以很好地工作，但图像大小大于该大小时，过滤器的效果确实很好，但这样做会剪切图像.附加测试图像并应用灰度滤镜作为参考

Currently working with fabric 2.0.6 to apply filters on HD images. I need to apply the filters in least amount of time. for that purpose i am using the webGL method to apply filters as explained here (fabric.js demo). If you apply it on images with size <= 1 MB it works perfectly fine but with image size greater than that, filter does apply fairly well but it cuts the image in doing so. Attaching the test Image and applying greyscale filter for reference

原始图像(大小1.90 MB)

Original Image(size 1.90 MB)

应用过滤器之前的外观

How it appears before applying filter

应用greyScale滤镜后的外观

How it appears after applying greyScale filter

推荐答案

请参考变更日志和说明:

Please if you refer to changelog and explanation:

http://fabricjs.com/fabric-filters

您会发现文档谈论的是fabric.textureSize属性，而不是查看演示应用程序.

instead of looking at a demo application, you will notice that the doc talks about a fabric.textureSize property.

该限制与兆字节大小无关，但与像素大小有关.

The limit is unrelated to the size in Megabytes, but is related to pixel size.

设置为2048，作为基本设置，以适应大多数旧硬件，并为您提供最大2048x2048的过滤器大小.

It is set up at 2048, size as base setting, to accomodate most of old hardware and giving you a max 2048x2048 filter size.

在启动您的应用之前将这个值提高到您想支持的最大大小.例如4096.

Rise this value before starting your app to the maximum size you think you want to support. 4096 for example.

如果您超过5000，则可能会失去对ie11的支持.

If you go over 5000 you will probably loose support for ie11.

您必须注意两个限制: 浏览器中的最大画布大小和用户使用的笔记本电脑的硬件中的最大纹理大小.

There are 2 limits you have to be aware of: Max canvas size in the browser and max texture size in the hardware of the laptop your user is using.

这篇关于在HD图像上应用WebGL滤镜可剪切图像(织物V2-beta-6)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！