Image loses effect of Camanjs when manipulating canvas

Asked

Viewed 199 times

3

I have a canvas, in which I manipulate images drawn on it with the plugin Camanjs and works perfectly. However, if I manipulate the canvas manually (without the help 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 invert the canvas using translate and scale the canvas is reversed but the image loses the effect. It seems that with each change in the image through the plugin, it saves its current state, and therefore 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 of the plugin site, already the code to invert the canvas is (js scripts.):

$(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 picture drawn in 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: inserir a descrição da imagem aqui

javascript jquery canvas

  • You could save somewhere the last added effect on the image, and whenever you do something on the canvas like Translate, add that effect again. There’s a way to put in your code so we can take a look?

  • @Wouldn’t Paulohdsousa have a simpler way of doing that? Because the user has the option to add several effects and maybe it would be a little difficult to save them. I’m taking a look at the code of the plugin to see if I can find something related to this "save" function for each added effect. I added excerpt of my code to the question.

  • Can you post more code and HTML? If you are creating a context or something similar and not using the existing one, it may be that you are recreating the image and so it loses the effect. You use Caman on canvas and not in the image?

  • The code that really matters (where I manipulate the canvas) is what’s already in the question, @Paulohdsousa . I believe that’s right, I’m creating another context... How can I use the existing?

  • Try extending ->Extend the http://www.sitepoint.com/manipulating-images-web-pages-camanjs plugin/

  • I created an Extended using Register only to invert the image. After adding the effect, by clicking reverse it reverses but I continue with the same problem, by reversing the effect is lost...

  • Managed to Resolve?

Show 2 more comments

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>
<script src="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//favicon.ico" crossorigin="">    
<br>
<canvas id="invertido" width="640" height="255"></canvas>

Browser other questions tagged javascript jquery canvas

You are not signed in. Login or sign up in order to post.