最大調用堆棧大小的自定義圖像過濾超過

Question

我正在尋找一種方式來填補的圖像與在FabricJs畫布上的圖像模式，因爲沒有內置image filter做到這一點。儘管我的代碼仍然處於早期版本，但基本上它應該可以工作（不幸的是它不會）。 所有的eavy工作都是通過applyTo方法完成的，在這裏我加載圖像，然後用圖案填充隱藏的畫布。我注意到，有一個函數（source）落在無限遞歸：我已經準備上JSFiddle演示

誰能幫助我瞭解如何解決這個問題

var pattern = new fabric.Pattern({ 
    source: function() { 
     fhc.setDimensions({ 
      width: smile.getWidth() + 5, 
      height: smile.getHeight() + 5, 
     }); 
     return fhc.getElement(); 
    }, 
    repeat: 'repeat' 
}); 

？

(function (global) { 

    'use strict'; 

    var fabric = global.fabric || (global.fabric = {}), 
     extend = fabric.util.object.extend; 

    fabric.Image.filters.ImagePatternEffect = fabric.util.createClass(fabric.Image.filters.BaseFilter, { 

     type: 'ImagePatternEffect', 

     initialize: function (options) { 
      options = options || {}; 

      this.img = options.img; 
     }, 

     applyTo: function (canvasEl) { 

      var w = canvasEl.width; 
      var h = canvasEl.height; 
      var hc = document.createElement('canvas'); 

      fabric.Image.fromURL('http://i.imgur.com/0Ks0mlY.png', function (smile) { 
       debugger; 
       hc.setAttribute('width', w); 
       hc.setAttribute('height', h); 

       var fhc = new fabric.StaticCanvas(hc); 
       fhc.add(smile); 
       var pattern = new fabric.Pattern({ 
        source: function() { 
         fhc.setDimensions({ 
          width: smile.getWidth() + 5, 
          height: smile.getHeight() + 5, 
         }); 
         return fhc.getElement(); 
        }, 
        repeat: 'repeat' 
       }); 
       var rect = new fabric.Rect({ 
        fill: pattern, 
        width: w, 
        height: h 
       }); 

       fhc.add(rect); 
       fhc.renderAll(); 

       var ifhcContext = fhc.getContext('2d'); 
       var fhcImageData = ifhcContext.getImageData(0, 0, fhc.width, fhc.height); 
       var fhcData = fhcImageData.data; 

       var context = canvasEl.getContext('2d'), 
        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height), 
        data = imageData.data; 

       for (var i = 0, n = data.length; i < n; i += 4) { 
        data[i] += fhcData[i]; 
        data[i + 1] += fhcData[i + 1]; 
        data[i + 2] += fhcData[i + 2]; 

       } 

       context.putImageData(imageData, 0, 0); 

      }); 

     }, 

     toObject: function() { 
      return extend(this.callSuper('toObject'), { 


      }); 
     } 
    }); 

    fabric.Image.filters.ImagePatternEffect.fromObject = function (object) { 
     return new fabric.Image.filters.ImagePatternEffect(object); 
    }; 

})(typeof exports !== 'undefined' ? exports : this); 


var canvas = new fabric.Canvas('c'); 


fabric.Image.fromURL('http://i.imgur.com/qaQ8jir.png', function (img) { 
    var orImg = img; 
    img.filters.push(new fabric.Image.filters.ImagePatternEffect({ 

     img: orImg, 

    })); 
    img.applyFilters(canvas.renderAll.bind(canvas)); 
    canvas.add(img.set({ 
     width: 300, 
     height: 300, 

    })); 
}, { 
    crossOrigin: '' 
}); 

Answer 1

我也在我的web應用程序上使用模式圖像，以便將其添加到對象上，並且它可以工作。

所有你需要的是這個函數函數loadPattern（url，seatObj）在那裏我傳遞的對象，我想每次添加模式和圖像（模式）鏈接。

這裏的片段：

 function loadPattern(url, seatObj) { 
    //i use the loadImage function to load the image and pass it to the fabric.Pattern constructor 

        fabric.util.loadImage(url, function (img) { 
     //i change the fill property of the object to the 
     //image that i want to load on it as a pattern 

         seatObj.fill = new fabric.Pattern({ 
          source: img, 
          repeat: 'no-repeat' 
         }); 
//refresh canvas and watch your image pattern on the object 
         canvas.renderAll(); 
        }); 
       } 

希望這有助於 好運