Fabric.js: Как применить фильтр для всего холста?

Question

Хотя я видел несколько методов применения фильтров к изображениям, мне еще нужно увидеть все, что применило бы фильтр ткани к всему холсту.

Пример функции изображения фильтра из http://fabricjs.com/fabric-intro-part-2/

fabric.Image.fromURL('pug.jpg', function(img) { 

    // add filter 
    img.filters.push(new fabric.Image.filters.Grayscale()); 

    // apply filters and re-render canvas when done 
    img.applyFilters(canvas.renderAll.bind(canvas)); 

    // add image onto canvas 
    canvas.add(img); 
}); 

Я хочу передать весь холст элемент и все фигуры внутри и применить фильтр ко всем.

Нужно ли выравнивать холст, преобразовывать его в изображение, а затем применять фильтр? Пользователь может вносить изменения после того, как после сглаживания и применения, холст нужно будет отделить до «слоев», чтобы пользователь мог продолжить редактирование.

Документы для фильтра GreyScale. http://fabricjs.com/docs/symbols/fabric.Image.filters.Grayscale.html

Answer 1

Закончено преобразовать холст в изображение, а затем добавить его из скрытого изображения в html.

<img class="test-image" src="" style="display:none;" /> в разметке

var addFilterToCanvas = function (name) { 

    // remove controls on filter click, have to do it before it creates the image to 
    // get rid of shape controls 
    canvas.deactivateAll() 

    var overlayImageUrl = canvas.toDataURL('png'); 
    $('.test-image').attr('src', overlayImageUrl); 
    var filterImageUrl = $('.test-image').attr('src'); 


      fabric.Image.fromURL(filterImageUrl, function(img) { 

      // add filter 
      switch (name) { 
       case 'Grayscale': 
        img.filters.push(new fabric.Image.filters.Grayscale()); 
       break; 
       case 'Sepia': 
        img.filters.push(new fabric.Image.filters.Sepia()); 
       break; 
       case 'Sepia2': 
        img.filters.push(new fabric.Image.filters.Sepia2()); 
       break; 
       case 'Invert': 
        img.filters.push(new fabric.Image.filters.Invert()); 
       break; 
      } 

       // apply filters and re-render canvas when done 
       img.applyFilters(canvas.renderAll.bind(canvas)); 

       // center image 
       img.top = canvas.getHeight()/2; 
       img.left = canvas.getWidth()/2; 

       // add image onto canvas 
       canvas.add(img); 
      }); 

     // remove controls on after filter applied to get rid of 
     // new image resize controls 
     canvas.deactivateAll().renderAll(); 

}