1

カラーコードを受け入れるカスタムフィルターを作成しようとしています。

これが私のコードです。

正常に動作しています。

fabric.Image.fromURL('pug.jpg', function(img) {
  img.filters.push(
    new fabric.Image.filters.Sepia(),
    new fabric.Image.filters.Brightness({ brightness: 100 }));

  img.applyFilters(canvas.renderAll.bind(canvas));
  canvas.add(img);
}); 

ここで、特定のカラー コードでフィルターを作成する必要があります。私が見つけたのは

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

  type: 'Redify',

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

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

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

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

forループが何をするのか説明が必要です...また、カラーコードを渡す方法を説明してください。

4

2 に答える 2