Javascript Fabric.js似乎仅限于2048纹理大小,尽管使用了WebGL

Javascript Fabric.js似乎仅限于2048纹理大小,尽管使用了WebGL,javascript,fabricjs,Javascript,Fabricjs,我正在设置一个应用程序,允许用户上传一幅图像并进行一些小的修改(缩放、亮度、旋转等)。我遇到了亮度调整的问题,Fabric.js只是重新绘制了图像的2048 x 2048部分,而不是整个图像。这是尽管最大纹理大小为16384 我上传的图像很大(5400 x 3600),但这是故意的。现在甚至手机都有高分辨率的摄像头,所以我需要为用户上传大图像做好准备 我发现,如果在加载图像后立即将其随机调整0.5的大小,那么亮度调整就可以正常工作。这并不是世界末日,但我需要知道在收到任何图像后,要调整图像的大小

我正在设置一个应用程序,允许用户上传一幅图像并进行一些小的修改(缩放、亮度、旋转等)。我遇到了亮度调整的问题,Fabric.js只是重新绘制了图像的2048 x 2048部分,而不是整个图像。这是尽管最大纹理大小为16384

我上传的图像很大(5400 x 3600),但这是故意的。现在甚至手机都有高分辨率的摄像头,所以我需要为用户上传大图像做好准备

我发现,如果在加载图像后立即将其随机调整0.5的大小,那么亮度调整就可以正常工作。这并不是世界末日,但我需要知道在收到任何图像后,要调整图像的大小有多远。那么,有没有一种方法可以计算当前的纹理大小,然后将其调整到我可以确定Fabric.js能够处理的大小?我认为当前的纹理大小可能是图像像素宽度或高度中较大的一个,但肯定有问题,因为我当前的图像将为5400,远低于最大值16384(将其大小调整一半将使其降至2700,仍高于2048,但这实际上是可行的)

关于如何:

  • 确定调整图像大小的距离,以便Fabric.js能够处理它
  • 或者,让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
    });
    
    

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

        if (fabric.isWebglSupported()) fabric.textureSize = 65536;
    
    我怀疑它肯定需要至少是mod4(每像素4字节)。。。但增量是否可以小于1k,我还没有确定