由于“最大纹理大小”，FabricJS 无法将过滤器应用于大图像

Posted 2023-03-25

【中文标题】由于“最大纹理大小”，FabricJS 无法将过滤器应用于大图像

【英文标题】：FabricJS Can't Apply Filters To Large Image Due To "Max Texture Size"

【发布时间】：2018-12-31 04:54:33

【问题描述】：

我可以通过一些帮助来理解面料的含义：最大纹理尺寸：16,384 - 16,384 什么？我使用的图像是 5MP (2560 x 1920) 并尝试像这样对图像应用过滤器：

object.filters.push(new fabric.Image.filters.Sepia());
object.applyFilters();

图像对象消失，上面的消息出现在控制台中。如果图像

那么这是什么意思，我怎样才能让它在更大尺寸的图像上允许过滤器？

【问题讨论】：

检查this

@Durga 太好了。看来如果织物默认为 2048x2048 并且它检测到我的机器要高得多，那么必须有一种方法来确定它，以便可以根据用户的机器进行更改，感谢您的输入！

@Durga 问题是如果图像是 5MP 16,384 不够大，从我读到的 web gl 不能再高了。您知道如何根据图像的大小计算纹理大小吗？

【参考方案1】：

您可以根据为用户机器检测到的最大 textureSize 设置 Fabric 的 alotted textureSize，方法是运行：

 if (fabric.isWebglSupported()) 
            fabric.textureSize = fabric.maxTextureSize;
 

请注意，运行fabric.isWebglSupported() 似乎是计算fabric.maxTextureSize 所必需的。否则，它将返回 undefined。

【参考方案2】：

我通过使用织物 js 的混合滤色器遇到了这个问题，我发现它是由我将照片给画布的方式引起的，检查一下，也许它也适合你。 （注意：当我尝试这个过滤器不适用于 svg 格式......我将它用于 png 和 jpg ，代码基于 javascript）

    fabric.Image.fromURL(require("../../assets/mockup/100.png"), (img) => 
  canvas.add(img);
  img.scaleToWidth(canvas.getWidth());
  img.scaleToHeight(canvas.getHeight());
  img.filters.push(filter);
  img.applyFilters();
  canvas.renderAll();
);