Кажется, что Fabric.js ограничен размером текстуры 2048, несмотря на использование WebGL - PullRequest
Новая
       8

Кажется, что Fabric.js ограничен размером текстуры 2048, несмотря на использование WebGL

0 голосов
/ 23 октября 2019

Я настраиваю приложение, которое позволяет пользователю загружать изображение и вносить незначительные изменения (увеличение, яркость, поворот и т. Д.). У меня проблема с регулировкой яркости, когда Fabric.js просто перерисовывает сегмент изображения размером 2048 x 2048, а не весь объект. И это несмотря на то, что максимальный размер текстуры составляет 16 384

1002 * Загружаемое изображение большое (5400 x 3600), но это специально. В наши дни даже сотовые телефоны имеют камеры с высоким разрешением, поэтому я должен быть готов к тому, что пользователи будут загружать большие изображения.

Я обнаружил, что если я случайно изменю размер изображения на 0,5, как только оно будет загружено, торегулировка яркости работает просто отлично. Это не конец света - но мне нужно знать, как далеко можно изменить размеры любого изображения при получении. Так есть ли способ рассчитать текущий размер текстуры, а затем изменить его размер до чего-то, что я могу быть уверен, что Fabric.js будет обрабатывать? Я думал, что текущий размер текстуры может быть больше либо ширины пикселя, либо высоты изображения, но там должно быть что-то не так, потому что мое текущее изображение будет 5400, что значительно ниже максимума 16384 (и изменение его размера вдвоеуменьшите его до 2700, что все еще превышает 2048, но это на самом деле работает).

Любые идеи о том, как:

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

1 Ответ

0 голосов
/ 30 октября 2019

Я тоже играю с maxTextureSize. Я еще не определил, существует ли допустимый метод для [пред] определения аппаратного лимита для всех платформ, но вы можете установить его напрямую; 

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

Я подозреваю, что он обязательно должен быть как минимум mod4(4 байта на пиксель) ... но может ли приращение быть меньше 1 Кб, я еще не определился.

...