我想使用caman js和fabric js对同一画布中的图像产生影响.我怎样才能把它们结合起来? [英] i want to use caman js and fabric js to give effect on an image in same canvas. how can i combine them?
问题描述
我想同时使用caman js和fabric js来实现图像效果.我试图合并代码,但它给出了两个图像而不是一个图像.我该如何结合caman js和fabric js并解决此问题? 我参考: http://camanjs.com/和
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.
推荐答案
我认为没有直接的方法可以将面料和caman结合起来.这是我使用的一种变通方法(只是一个简单的方法.您可以根据自己的意愿进行增强):
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
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();
});
});
});
});
这是小提琴: http://jsfiddle.net/k7moorthi/dfp1b0mq/
注意:如果要使用外部图像来避免浏览器对toDataURL()方法的安全性阻塞,请将crossOrigin选项设置为fabric.Image.fromURL()方法.例如:
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' });
这篇关于我想使用caman js和fabric js对同一画布中的图像产生影响.我怎样才能把它们结合起来?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!