我想同时使用 caman js 和 fabric js 来赋予图像效果。我试图组合代码,但它给出了两个图像而不是一个。我能做些什么来结合 caman js 和 fabric js 并解决这个问题?
我指的是:http://camanjs.com/ 和 http://fabricjs.com/articles/
谢谢你。
最佳答案
我不认为有一种直接的方法可以将 Fabric 和卡曼结合起来。这是我使用的一种解决方法(只是一个简单的方法。您可以根据自己的意愿增强它):
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();
});
});
});
});
这是 fiddle :http://jsfiddle.net/k7moorthi/dfp1b0mq/
注意:如果您想使用外部图像以避免 toDataURL() 方法的浏览器安全阻塞,请将 crossOrigin 选项设置为 fabric.Image.fromURL() 方法。例如:
fabric.Image.fromURL('https://s3-eu-west-1.amazonaws.com/kienzle.dev.cors/img/image2.png', function(img) {
...
}, { crossOrigin: 'anonymous' });
关于fabricjs - 我想使用 caman js 和 fabric js 来对同一 Canvas 中的图像产生影响。我怎样才能把它们结合起来?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28123799/