Question

FabricJS由于“最大纹理大小”而无法将滤镜应用于大图像我正在尝试将滤镜应用于大小为（5168X3448）的图像。可以帮我解决这个问题吗？

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
</head>
<body>
  <button id="color">Apply color</button>
  <canvas id="c" width=500 height=500></canvas>
</body>
</html>
<script>
  var canvas = new fabric.Canvas('c');
  fabric.Image.fromURL('driver.png', function (img) {
    img.set({
      scaleX: 0.1,
      scaleY: 0.1,

    })
    canvas.add(img);

    var filter = new fabric.Image.filters.BlendColor({
      color: 'red',
      mode: 'multiply'
    });
    img.filters.push(filter);
    img.applyFilters();
    canvas.renderAll();
  }, {
      crossOrigin: 'null'
    });

</script>

Answer 1

您可以为画布设置更高的最大纹理大小，如下所示：fabric.textureSize = 5168。

请注意，使用如此大的价值时，您可能会遇到硬件支持方面的问题。 Fabric.js官方文档指出，textureSize为4096是一个相当安全的限制，因此理想情况下，您将尝试将图像保持在该值以下以避免硬件问题。

推荐阅读：http://fabricjs.com/fabric-filters

滤镜不适用于结构2.4.6中的大图像

1 个答案: