Fabricjs White Mask Filter

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<script id="shader" type="x-shader/x-vertex">
precision highp float;
uniform sampler2D uTexture;
uniform float uPixelsPerRow;
uniform float uStepW,uStepH;
uniform vec3 uColors[10];
uniform float uColorPositions[10];
varying vec2 vTexCoord;

uniform float uParam;


void main() {
	vec4 origColor = texture2D(uTexture, vTexCoord);
  if (origColor.r + origColor.g + origColor.b >= 2.9){
  	origColor.a = 3.0 - origColor.r - origColor.g - origColor.b;
  }
  gl_FragColor = origColor;
}
</script>


<canvas width="600" height="400" id="c"></canvas>
<img style="display:none" src="https://i.postimg.cc/CLwnCFSK/k.jpg" id="my-image" crossorigin="anonymous">
<br/>
<div id="gp"></div>

CSS

body{
  background: orange;
}

JavaScript

//https://github.com/genekogan/Processing-Shader-Examples/blob/master/TextureShaders/data/
fabric.textureSize = 4096;//for filters on large images
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 50,
  angle: 0,
  opacity: 1,
  scaleX:0.1,
  scaleY:0.1
});
canvas.add(imgInstance);

var filterName = "WhiteMask";



fabric.Image.filters[filterName] = fabric.util.createClass(fabric.Image.filters.BaseFilter, {

  type: filterName,
	param:1,
  mainParameter:"param",
  /**
   * Fragment source for the redify program
   */
  fragmentSource: window.document.getElementById("shader").textContent,

  applyTo2d: function(options) {
    var imageData = options.imageData,
        data = imageData.data, i, len = data.length;

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

  },
  getUniformLocations: function(gl, program) {
      return {
        uParam: gl.getUniformLocation(program, 'uParam')
      };
    },
  sendUniformData: function(gl, uniformLocations) {
      gl.uniform1f(uniformLocations.uParam, this.param);
    }
});

fabric.Image.filters[filterName].fromObject = fabric.Image.filters.BaseFilter.fromObject;

var filter = new fabric.Image.filters[filterName]({param:0});
imgInstance.filters.push(filter);
imgInstance.applyFilters();