3

I want to give effect to image using both caman js and fabric js. I tried to combine the code but it gives two images instead of one. What can i do to combine caman js and fabric js and fix this? I reffered to: http://camanjs.com/ and http://fabricjs.com/articles/ Thank you.

maitri kothari
  • 51
  • 5
  • If you provide the code that you have tried then folks might respond – Kirby Sep 14 '15 at 19:12
  • Why not use the latest Fabricjs release, 1.6.6? Contrast and saturation were both added in this release. Refer to this answer for a demo: http://stackoverflow.com/a/40115261/2465213 – jdrake Oct 18 '16 at 18:18

1 Answers1

8

I don't think there is a direct way to combine fabric and caman. Here is a workaround that i have used (Just a simple one. You can enhance it as per your wish) :

HTML

<canvas id="canvas" width="600" height="300"></canvas>

Javascript

var canvas = new fabric.Canvas('canvas');

fabric.Image.fromURL('image.png', function(img) {
  img.set({
    left: 10,
    top: 50
  });

  canvas.add(img).setActiveObject(img);
  canvas.renderAll();

  var hiddenImg = document.createElement('img');
  hiddenImg.src = canvas.getActiveObject().toDataURL();
  hiddenImg.id = 'target';
  hiddenImg.style.display = 'none';
  document.body.appendChild(hiddenImg);

  Caman('#target', function(value) {
    this.brightness(10);
    this.contrast(20);

    this.render(function() {
      canvas.getActiveObject().setSrc(document.getElementById('target').toDataURL(), function() {
        canvas.renderAll();
      });
    });
  });
});

Here is the fiddle: http://jsfiddle.net/k7moorthi/dfp1b0mq/

NOTE: Set crossOrigin option to fabric.Image.fromURL() method if you want to use external images to avoid browser security blocking for toDataURL() method. Eg:

fabric.Image.fromURL('https://s3-eu-west-1.amazonaws.com/kienzle.dev.cors/img/image2.png', function(img) {
  ...
}, { crossOrigin: 'anonymous' });
Kesavamoorthi
  • 959
  • 2
  • 11
  • 21