3

Possuo um canvas, no qual manipulo imagens desenhadas nele com o plugin CamanJS e funciona perfeitamente. Porém, se eu manipulo o canvas manualmente (sem o auxílio do plugin) a imagem perde o efeito. Por exemplo, eu adiciono um filtro (Vintage, por exemplo) à imagem e funciona perfeitamente, mas, se eu inverto o canvas, utilizando translate e scale o canvas é invertido mas a imagem perde o efeito. Parece que, a cada alteração na imagem através do plugin, ele salva o seu estado atual, e, por isso, o efeito é perdido após alguma mudança sem a utilização dele. Como fazer isso preservando os efeitos da imagem?

Para adicionar o efeito, utilizo os mesmos exemplos do site do plugin, já o código para inverter o canvas é (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);
    });
});

As variáveis filtro_width e filtro correspondem à imagem desenhada no 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>

Exemplo: inserir a descrição da imagem aqui

7
  • Você poderia salvar em algum lugar o último efeito adicionado na imagem, e sempre que fizer algo no canvas como translate, adicionar esse efeito novamente. Tem como colocar o seu código pra gente dar uma olhada? Commented 4/01/2016 às 17:04
  • @PauloHDSousa não teria uma maneira mais simples de fazer isso? Pois o usuário tem a opção de adicionar vários efeitos e talvez seria um pouco trabalhoso salvá-los. Estou dando uma olhada no código do plugin para ver se acho algo referente a essa função de "salvar" a cada efeito adicionado. Adicionei trecho do meu código na pergunta.
    – Igor
    Commented 4/01/2016 às 17:12
  • Tem como postar mais código e o HTML? Se você estiver criando um contexto ou algo parecido e não utilizando o já existente, pode ser que esteja recriando a imagem e por isso ela perde o efeito. Você usa o Caman no canvas e nao na imagem? Commented 4/01/2016 às 17:17
  • O código que realmente importa (onde eu manipulo o canvas) é o que já está na pergunta, @PauloHDSousa . Acredito que seja isso mesmo, estou criando outro contexto... Como posso utilizar o já existente?
    – Igor
    Commented 4/01/2016 às 17:20
  • Tenta fazer estendendo ->Extend o plugin sitepoint.com/manipulating-images-web-pages-camanjs Commented 4/01/2016 às 17:45

1 Resposta 1

1

Parece que alterando

ctx.drawImage(filtro, 0, 0);

para

ctx.drawImage(c, 0, 0);

é a solução.

$(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/http://pt.stackoverflow.com/favicon.ico" crossorigin="">    
<br>
<canvas id="invertido" width="640" height="255"></canvas>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .