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>

​