我将Caman滤镜应用于具有现有图像数据的画布。但是当我创建Caman对象以供以后使用时,它实际上是我的画布。var ca = Caman('#myCanvas');
我尝试完全使用Caman Guide,就像这样:
Caman('#myCanvas',function(){
this.render();
});
但是同样的问题,画布很明显!为什么我不能将画布加载到Caman然后进行修改,尽管documentation说可以呢?
最佳答案
您无需使用以下命令获取对Caman对象的引用:var ca = Caman("#myCanvas");
首先,在原始画布上绘制一些东西:
// 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>