我想使用 Caman JS 和 Fabric JS 在同一画布上对图像产生效果.我怎样才能将它们组合起来

Question

我想同时使用caman js和fabric js来渲染图像。我试图组合代码，但它给出了两个图像而不是一个。我该怎么做才能将 caman js 和 fabric js 结合起来并解决此问题？我指的是：http://camanjs.com/和 http://fabricjs.com/articles/谢谢。

Answer 1

我认为没有直接的方法可以将织物和卡曼结合起来。这是我使用过的解决方法（只是一个简单的解决方法。您可以根据需要对其进行增强）：

.HTML

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

爪哇语

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();
      });
    });
  });
});

这是小提琴：http://jsfiddle.net/k7moorthi/dfp1b0mq/

注意：将跨原点选项设置为结构。Image.fromURL（） 方法，如果你想使用外部图像来避免浏览器对 toDataURL（） 方法的安全阻止。例如：

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