图像失去了CamanJS对操纵画布的影响

Question

我有一个画布，用CamanJS插件处理在其上绘制的图像，它完美地运行。但是如果我手动操作画布（没有插件的帮助），图像会失去效果。例如，如果我向图像添加一个过滤器（例如Vintage），效果很好，但如果我转动画布，使用translate和scale画布会反转，但图像会失效。似乎通过插件对图像中的每次更改，它都会保存其当前状态，因此，在不使用它的情况下更改后效果会丢失。如何在保留图像效果的同时做到这一点？

要添加效果，请使用插件网站的相同示例，因为反转画布的代码是（ scripts.js ）：

$(document).ready(function() {
    $("html, body").on("click", "#vintage", function() {
        Caman("#filtrar", function() {
            this.vintage().render();
        });
    });

    $("html, body").on("click", "#inverter_foto", function() {
        var c = $("#filtrar")[0];

        var ctx = c.getContext("2d");

        ctx.translate(filtro_width, 0);
        ctx.scale(-1, 1);
        ctx.drawImage(filtro, 0, 0);
    });
});

filtro_width个变量和filtro对应于画布上绘制的图像。

HTML上的

：

<canvas id="filtrar" width="640" height="255"></canvas>

<button id="vintage">Vintage Effect</button>
<button id="inverter_foto">Reverse</button>

<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
</script>
<script type="text/javascript" src="/js/caman.full.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>

实施例：

Answer 1

如果你在Caman库之外操作画布，你需要使用reloadCanvasData方法重新初始化存储在Caman对象中的imageData，否则，它只使用第一个+它自己更新的内容。

vintage.onclick = function() {
  Caman("#filtrar", function() {
    this.vintage().render();
  });
};

inverter_foto.onclick = function() {

  var c = $("#filtrar")[0];

  var clone = c.cloneNode(true);
  var ctx = clone.getContext("2d");

  ctx.translate(c.width, 0);
  ctx.scale(-1, 1);
  ctx.drawImage(c, 0, 0);

  var oCtx = c.getContext('2d');
  oCtx.clearRect(0, 0, c.width, c.height);
  oCtx.drawImage(clone, 0, 0);

  if(check.checked){
    Caman("#filtrar", function() {
      this.reloadCanvasData();
    });
   }
};

var filtro = new Image();
filtro.crossOrigin = 'Anonymous';
var filtro_width = filtrar.width / 2;
filtro.onload = function() {
  filtrar.getContext('2d').drawImage(this, 0, 0, filtrar.width, filtrar.height);
};
filtro.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<p>First revert the image then apply the effect</p>
<button id="inverter_foto">Reverse</button>
<button id="vintage">Vintage Effect</button>
reloadCanvasData<input id="check" type="checkbox" checked/>

<canvas id="filtrar" width="640" height="255"></canvas>