Fabric.js似乎限制为2048纹理大小，尽管使用WebGL

Question

我正在设置一个应用程序，允许用户上传图像并进行较小的修改（缩放，亮度，旋转等）。我遇到了亮度调整问题，其中Fabric.js仅重绘了图像的2,048 x 2,048片段，而不是整个图像。尽管最大纹理大小为16,384。

我正在上传的图像很大（5,400 x 3,600），但这是故意的。如今，即使手机也配备高分辨率相机，因此我需要为用户上传大图像做好准备。

我发现，如果我在加载图像后立即随机将图像尺寸缩小.5，那么亮度调整就可以了。那不是世界末日-但是我需要知道在接收到图像时调整尺寸的距离。因此，有没有一种方法可以计算当前的纹理大小，然后将其调整为我可以确定Fabric.js可以处理的大小？我以为当前的纹理大小可能大于图像的像素宽度或高度，但那一定是有问题的，因为我的当前图像将是5,400，远低于最大的16,384（然后将其调整一半）将其降低到2,700，仍然高于2,048，但这实际上是有效的）。

有关如何选择的任何想法：

1. 确定调整图像大小的距离，以便Fabric.js可以处理它
2. 或者，让Fabric.js使用最大纹理大小（因为它似乎忽略了它）

这里有一些代码片段。。

var FabricCanvas = new fabric.Canvas('FabricCanvas');

// image file upload handler
jQuery(".FabricPhotoUpload").on("change", function( event_change ) {
   var reader = new FileReader();
   reader.onload = function ( event_onload ) {
      var imgObj = new Image();
      imgObj.src = event.target.result;
      imgObj.onload = function () {
         var FabricImage = new fabric.Image(imgObj);
         FabricImage.set({ angle: 0, top: 0, left: 0 });
         fabric.filterBackend = fabric.initFilterBackend();
         if ( fabric.isWebglSupported() ) {
            fabric.textureSize = fabric.maxTextureSize;
         }
         FabricCanvas.add(FabricImage);
         FabricCanvas.renderAll();
      }
   }
   reader.readAsDataURL( event_change.target.files[0] );
   event_change.target.value = "";
});

// using jQueryUI for the brightness slider
window.FabricSliderMax_Bright = 50;
jQuery( ".FabricBrightness" ).slider({
   slide: function( event, ui ) {
      var NewBrightness = ui.value / window.FabricSliderMax_Bright;
      // for now I'm assuming FabricImage.filters[0] is the brightness filter
      if ( typeof( FabricImage.filters[0] ) == "undefined" ) {
         FabricImage.filters[0] = new fabric.Image.filters.Brightness({ brightness: NewBrightness });
      } else {
         FabricImage.filters[0].brightness = NewBrightness;
      }

      FabricImage.applyFilters();
      FabricCanvas.renderAll();
   },
   max: window.FabricSliderMax_Bright,
   min: -50,
   value: 1
});

Answer 1

我也正在玩maxTextureSize。我尚未确定是否有一种有效的方法来[确定]所有平台的硬件限制，但是您可以直接设置；

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

我怀疑它肯定至少需要为mod4（每个像素4个字节）...但是增量是否可以小于1k，我尚未确定。