Skip to content
Image blend filter plugin for Fabric.js (http://fabricjs.com)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
Gruntfile.js
README
README.md
blend_filter.class.js
blend_filter.class.min.js
package.json

README.md

An image filter for fabric.js that implements several blend modes

Currently supports add, diff, multiply, and screen modes. More to come.

Usage examples:

Blending image to another image

fabric.Image.fromURL('myimage.jpg', function(img) {
  var filter = new fabric.Image.filters.Blend({
    image: image2,
    mode: 'add',
    alpha: 0.5
  });

  img.filters.push(filter);

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

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

Blending colors to another image

fabric.Image.fromURL('myimage.jpg', function(img) {
  var filter = new fabric.Image.filters.Blend({
    color: '#000',
    mode: 'multiply'
  });

  img.filters.push(filter);

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

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

Note:

Code is still in development stages

You can’t perform that action at this time.