初始Caman()时Camanjs清除画布?

时间:2013-12-25 15:03:53

标签: javascript html5 canvas camanjs

我将Caman Filter应用于包含现有图像数据的画布。但是当我创建Caman对象以便稍后使用时,它会占据我的画布。

var ca = Caman('#myCanvas');

我试着和Caman Guide完全一样,就像这样:

Caman('#myCanvas',function(){
   this.render();
});

但同样的问题,帆布很清楚!为什么我无法将画布加载到Caman然后修改,虽然documentation说可以?

1 个答案:

答案 0 :(得分:2)

您不需要使用:var ca = Caman("#myCanvas");

获取对Caman对象的引用

首先,在原始画布上绘制一些东西:

// make a drawing on the original canvas

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,60,40);

然后告诉Caman使用#myCanvas作为任何过滤器的源和目的地:

// modify the original drawing from #myCanvas and put it back on #myCanvas

Caman("#myCanvas",function(){
    this.brightness(50).render();
});

关于您清除的画布:

由于Caman使用.getImageData,请确保您的图片托管在与您所服务的网页相同的网站上,否则CORS安全违规将导致您的画布为空。

var canvas = document.getElementById("original");
var ctx = canvas.getContext("2d");

// make a drawing on the original canvas
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 60, 40);

// modify the original drawing 
Caman("#original", function () {
    this.brightness(75).render();
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<canvas id="original" width=100 height=100></canvas>