图像失去对操纵画布

Question

我有一个画布，它处理与CamanJS插件就可以绘制的图像和它完美的作品CamanJS的效果。但是，如果我手动操作画布（没有插件的帮助），图像会失去效果。例如，如果我添加了一个过滤器（葡萄酒等）的形象，完美地工作，但如果我把画布上，用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>