尽管使用了 WebGL，但 Fabric.js 似乎仅限于 2048 纹理大小答案

【问题标题】：Fabric.js seems limited to 2048 texture size despite using WebGL尽管使用了 WebGL，但 Fabric.js 似乎仅限于 2048 纹理大小
【发布时间】：2020-02-19 22:14:51
【问题描述】：

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

我上传的图片很大 (5,400 x 3,600)，但这是故意的。现在连手机都有高分辨率的摄像头，所以我需要为用户上传大图做好准备。

我发现，如果我在加载图像后立即将图像大小随机缩小 0.5，那么亮度调整就可以正常工作。这不是世界末日 - 但我需要知道在收到任何图像后调整多远。那么有没有办法计算当前纹理大小，然后将其调整为我可以确定 Fabric.js 可以处理的大小？我认为当前的纹理大小可能是图像的像素宽度或高度中的较大者，但那里一定有问题，因为我当前的图像将是 5,400，远低于最大值 16,384（将其大小调整一半会将其降至 2,700，仍高于 2,048，但这确实有效）。

关于如何做的任何想法：

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

这里有一些代码 sn-ps..

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
});

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

我也在玩 maxTextureSize。我还没有确定是否有有效的方法来[预先]确定所有平台的硬件限制，但你可以直接设置它；

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

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

【讨论】：

【解决方案2】：

我发现我需要先初始化过滤器后端，然后设置最大纹理大小，然后再次重新初始化过滤器后端。我不确定这是否适用于所有人，但它为我解决了这个问题：

// @ts-ignore
fabric.filterBackend = fabric.initFilterBackend(); //this will init WebGL
// @ts-ignore
fabric.textureSize = fabric.maxTextureSize; //allows for larger images

//This will re-init WebGL with the larger image textureSize.
//  For some reason we need this extra re-init.
//  Otherwise we get an error about 'RangeError out-of-bounds Uint8Array on ArrayBuffer'
// @ts-ignore
fabric.filterBackend = fabric.initFilterBackend();

【讨论】：