Изображение теряет эффект 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); 
    }); 
}); 

The 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

Если вы манипулировать холст за пределами библиотеки Каман, вам нужно использовать метод reloadCanvasData переинициализировать 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>