Fabric.js - 色調濾鏡

Question

我似乎無法獲得fabric.js的色調濾鏡功能，或找到正在使用的任何示例。我曾嘗試：

img.filters[0] = new f.Tint({ 
    color:'green' 
}); 

我也試過#00ff00代替​​，但他們兩人只是把圖像的黑色。

我有一些png的只是黑色和透明的（例如基本形狀），我希望能夠改變它們的顏色，我不知道這是否可行，但我想法色調聽起來很有希望，我只是無法讓它工作。

我也試過它的照片，只是變黑，而且我在代碼中的相同位置使用了其他濾鏡（如反轉），並且它工作正常。

任何幫助，將不勝感激。

更新： 完整的JS使用，圖片三隻是作爲一個黑匣子出現。

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

fabric.Image.fromURL('img/picture3.jpg', function(img) { 
    img.set({ 
    left: 100, 
    top: 120, 
    angle: 0 
    }); 
    img.filters[0] = new f.Tint({ 
     color:'00FF00' 
    }); 
    img.applyFilters(canvas.renderAll.bind(canvas)); 
    canvas.add(img); 
}); 

Answer 1

我寫了這個過濾器，我在我們的一個項目中大量使用它，並且迄今爲止效果很好。但是我錯過的是打電話給applyFilters--也許你可以發佈更多的代碼？

而且我覺得我一直應用的顏色，如：

img.filters[0] = new f.Tint({ 
    color:'FF0000' 
}); 

意味着沒有色彩的名字，在前面沒有散。我知道顏色的解析器應該更健壯一些。此外，請確保此過濾器僅適用於具有Alpha通道的圖像 - 意味着半透明的png文件。

Answer 2

我分析色調過濾器的原班，我發現這條線

var rgb = parseInt(this.color, 10).toString(16); 

應該這樣

var rgb = this.color; 

進行調整，以使其正常工作。當然，那麼rgb變量是無用的，你可以直接將它改爲this.color，但我個人更喜歡單行更改。

我不確定將十六進制轉換爲整數然後轉換爲字符串的原始目的是什麼，因爲它對我沒有意義。

你會propably不想修改fabric.js源，所以我建議你創建自定義過濾器類爲下過濾器部分在本教程中提到：http://fabricjs.com/fabric-intro-part-2/

Answer 3

我有同樣的問題，無論是JPEG圖像或PNG圖像（透明背景）。

我發現色調類不能正常工作，所以我稍微改變了它。你可以找到關於谷歌論壇的主題：https://groups.google.com/forum/#!msg/fabricjs/DPN0WuRtc-o/ZGgIQK5F9xAJ

這裏是我的解決方法類（工作原理是利用一個完整的十六進制值，但你可以輕鬆地適應您的需求）：

fabric.Image.filters.Tint = fabric.util.createClass({ 

    type: 'Tint', 

    /** 
    * Constructor 
    * @memberOf fabric.Image.filters.Tint.prototype 
    * @param {Object} [options] Options object 
    */ 
    //That's Different : HexColor 
    initialize: function(HexColor) { 
    this.color = HexColor; 
    }, 


    /** 
    * Applies filter to canvas element 
    * @param {Object} canvasEl Canvas element to apply filter to 
    */ 
    applyTo: function(canvasEl) { 
    var context = canvasEl.getContext('2d'), 
     imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height), 
     data = imageData.data; 

    //That's different : computation of values 
    var rUser = ((this.color).toString()).substr(0,2); 
    var gUser = ((this.color).toString()).substr(2,2); 
    var bUser = ((this.color).toString()).substr(4,2); 


    for (var i = 0, len = data.length; i < len; i += 4) { 


     r = data[i]; 
     g = data[i + 1]; 
     b = data[i + 2]; 

     data[i] = parseInt ((r * parseInt (rUser, 16))/255); 
     data[i + 1] = parseInt ((g * parseInt (gUser, 16))/255); 
     data[i + 2] = parseInt ((b * parseInt (bUser, 16))/255); 


    } 

    context.putImageData(imageData, 0, 0); 
    }, 

/** 
* Returns json representation of filter 
* @return {Object} json representation of filter 
*/ 
toJSON: function() { 
    return { 
    type: this.type, 
    color: this.color 
    }; 
} 

}）`

我使用這種方式壽：

//$oCanvas is my fabric Canvas object 
//data.color could be 'ff0000' but not 'f00' not anything else like fabric.Color 
$img.filters[0] = new fabric.Image.filters.Tint(data.color); 
$img.applyFilters($oCanvas.renderAll.bind($oCanvas)); 

希望幫助別人。

L.

編輯

一些修改色調濾鏡類內部完成（Github上：https://github.com/kangax/fabric.js/pull/862）。

我再次測試它仍然沒有運氣，所以我稍微改變了一遍。你可以找到源代碼+解釋在谷歌網上論壇（https://groups.google.com/forum/#!topic/fabricjs/DPN0WuRtc-o）

編輯＃2

好了，所以Kienz提出，使用色調過濾器類與修正錯誤一個的jsfiddle（http://jsfiddle.net/Kienz/4wGzk/），他得到了它的工作。我建議按照他的方式來實施它。

Answer 4

我遇到了同樣的問題。它原來是我使用的織物js的版本。如果不抓住最新版本，擔心會破壞其他東西，我只抓住我所需要的東西，並將其用作覆蓋當前着色實現的自定義過濾器。

下面是我用什麼：

/** 
    * Tint filter class 
    * Adapted from <a href="https://github.com/mezzoblue/PaintbrushJS">https://github.com/mezzoblue/PaintbrushJS</a> 
    * @class fabric.Image.filters.Tint 
    * @memberOf fabric.Image.filters 
    * @extends fabric.Image.filters.BaseFilter 
    * @see {@link fabric.Image.filters.Tint#initialize} for constructor definition 
    * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo} 
    * @example <caption>Tint filter with hex color and opacity</caption> 
    * var filter = new fabric.Image.filters.Tint({ 
    * color: '#3513B0', 
    * opacity: 0.5 
    * }); 
    * object.filters.push(filter); 
    * object.applyFilters(canvas.renderAll.bind(canvas)); 
    * @example <caption>Tint filter with rgba color</caption> 
    * var filter = new fabric.Image.filters.Tint({ 
    * color: 'rgba(53, 21, 176, 0.5)' 
    * }); 
    * object.filters.push(filter); 
    * object.applyFilters(canvas.renderAll.bind(canvas)); 
    */ 
    fabric.Image.filters.Tint = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Tint.prototype */ { 

    /** 
    * Filter type 
    * @param {String} type 
    * @default 
    */ 
    type: 'Tint', 

    /** 
    * Constructor 
    * @memberOf fabric.Image.filters.Tint.prototype 
    * @param {Object} [options] Options object 
    * @param {String} [options.color=#000000] Color to tint the image with 
    * @param {Number} [options.opacity] Opacity value that controls the tint effect's transparency (0..1) 
    */ 
    initialize: function(options) { 
     options = options || { }; 

     this.color = options.color || '#000000'; 
     this.opacity = typeof options.opacity !== 'undefined' 
         ? options.opacity 
         : new fabric.Color(this.color).getAlpha(); 

     console.log(this.color + " " + this.opacity);     
    }, 

    /** 
    * Applies filter to canvas element 
    * @param {Object} canvasEl Canvas element to apply filter to 
    */ 
    applyTo: function(canvasEl) { 
     var context = canvasEl.getContext('2d'), 
      imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height), 
      data = imageData.data, 
      iLen = data.length, i, 
      tintR, tintG, tintB, 
      r, g, b, alpha1, 
      source; 

     source = new fabric.Color(this.color).getSource(); 

     tintR = source[0] * this.opacity; 
     tintG = source[1] * this.opacity; 
     tintB = source[2] * this.opacity; 

     alpha1 = 1 - this.opacity; 

     for (i = 0; i < iLen; i+=4) { 
     r = data[i]; 
     g = data[i + 1]; 
     b = data[i + 2]; 

     // alpha compositing 
     data[i] = tintR + r * alpha1; 
     data[i + 1] = tintG + g * alpha1; 
     data[i + 2] = tintB + b * alpha1; 
     } 

     context.putImageData(imageData, 0, 0); 
    }, 

    /** 
    * Returns object representation of an instance 
    * @return {Object} Object representation of an instance 
    */ 
    toObject: function() { 
     return extend(this.callSuper('toObject'), { 
     color: this.color, 
     opacity: this.opacity 
     }); 
    } 
    }); 

Answer 5

一件事做類似的事情的時候，我注意到的是，該過濾器不會工作，直到圖像本身加入到畫布上。