圖像失去對操縱畫布

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>