问题描述
我将Caman Filter应用于包含现有图片数据的画布。但是当我创建Caman对象以后使用,它只是我的画布。
var ca = Caman('#myCanvas');
我试图完全使用,例如:
Caman('#myCanvas',function(){
this.render();
}
但同样的问题,画布是明确的!为什么我无法将画布加载到Caman,然后进行修改,尽管说可以?
您不需要通过以下方式获取对Caman对象的引用: var ca = Caman(#myCanvas) ;
//在原始画布上绘制图形
var canvas = document.getElementById(myCanvas);
var ctx = canvas.getContext(2d);
ctx.fillStyle =red;
ctx.fillRect(20,20,60,40);
然后告诉Caman使用#myCanvas作为任何过滤器的源和目标:
//从#myCanvas修改原始绘图并放回#myCanvas
Caman(#myCanvas ,function(){
this.brightness(50).render();
});
关于您已清除的画布:
由于Caman使用.getImageData,请确保您的图片托管在与您正在投放的网页相同的网站上,否则CORS安全违规将导致您的画布为空白。
< script src =http://cdnjs.cloudflare。 com / ajax / libs / camanjs / 4.0.0 / caman.full.min.js>< / script>< canvas id =originalwidth = 100 height = 100>< / canvas>
I apply Caman Filter to a canvas with existing image data. But when I create Caman object to use later, it emply my canvas.
var ca = Caman('#myCanvas');
I'm try to do exactly with Caman Guide , like this:
Caman('#myCanvas',function(){
this.render();
});
But the same problem, canvas is clear! Why I cannot load canvas to Caman then modify, although documentation says can be?
You don't need to grab a reference to the Caman object with: var ca = Caman("#myCanvas");
First, draw something on the original canvas:
// 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);
Then tell Caman to use #myCanvas as both the source and destination for any filters:
// modify the original drawing from #myCanvas and put it back on #myCanvas
Caman("#myCanvas",function(){
this.brightness(50).render();
});
About your cleared canvas:
Since Caman uses .getImageData, be sure your image is hosted on the same site as the web page you're serving otherwise a CORS security violation will cause your canvas to be blank.
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>
这篇关于Camanjs清除画布时初始化Caman()?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!