javascript - Camanjs 在初始化 Caman() 时清除 Canvas ？

Question

我将卡曼滤镜应用到具有现有图像数据的 Canvas 上。但是当我创建稍后使用的 Caman 对象时，它会占用我的 Canvas 。

var ca = Caman('#myCanvas');

我尝试完全按照 Caman Guide 进行操作，像这样:

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

但是同样的问题， Canvas 是清晰的!为什么我无法将 Canvas 加载到 Caman 然后进行修改，尽管documentation说可以吗？

Answer 1

您不需要使用以下方式获取对 Caman 对象的引用:var ca = Caman("#myCanvas");

首先，在原始 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);

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

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

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

关于您清除的 Canvas :

由于 Caman 使用 .getImageData，请确保您的图像与您所服务的网页托管在同一网站上，否则 CORS 安全违规将导致您的 Canvas 为空白。

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>