Camanjs清除画布时初始化Caman（）？ [英] Camanjs clear canvas when init Caman()?

问题描述

我将Caman Filter应用于包含现有图片数据的画布。但是当我创建Caman对象以后使用，它只是我的画布。

var ca = Caman（'＃myCanvas'）;

我试图完全使用 Caman指南，例如：

  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（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！