Image loses effect of CamanJS when manipulating canvas

Question

Image loses effect of CamanJS when manipulating canvas

Navigation

#1 by (1 votes)

3

I own a canvas, in which I manipulate images drawn on it with the CamanJS plugin and works perfectly. However, if I manipulate the canvas manually (without the aid of the plugin) the image loses the effect. For example, I add a filter (Vintage, for example) to the image and it works perfectly, but if I reverse the canvas using translate and scale the canvas is inverted but the image loses its effect. It seems that with each change in the image through the plugin, it saves its current state, and so the effect is lost after some change without using it. How to do this while preserving the effects of the image?

To add the effect, I use the same examples from the plugin site, since the code to flip the canvas is ( 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 variables filtro_width and filtro match the image drawn on the canvas.

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>

Example:

javascript jquery canvas

asked by anonymous 04.01.2016 / 17:57

1 answer

Block access to a URL or system folder path Regular expression in pattern

score 1 · Answer 1

It seems that changing

ctx.drawImage(filtro, 0, 0);

for

ctx.drawImage(c, 0, 0);

is the solution.

$(document).ready(function() {

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

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

    var invc = $("#invertido")[0];
    ctx = invc.getContext('2d');

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>

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

<img id="filtrar" src="https://crossorigin.me/http://pt.stackoverflow.com/favicon.ico"crossorigin="">    
<br>
<canvas id="invertido" width="640" height="255"></canvas>