2

Estou aqui criando um 'editor' de imagem utilizando Javascript com auxílio da biblioteca CamanJs e do elemento canvas do HTML5, porém não estou conseguindo fazer ele desenhar uma caixa em cima da minha imagem (ela some assim que começa a desenhar); <canvas id="cavas-id"></canvas>. Pensei em algo como canvas dentro de canvas, porém meu fundo fica branco.

var canvas = document.getElementById('crop'),
ctx = canvas.getContext('2d'),
rect = {},
drag = false;

function init() {
  canvas.addEventListener('mousedown', mouseDown, false);
  canvas.addEventListener('mouseup', mouseUp, false);
  canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
  alert('asd');
  rect.startX = e.pageX - this.offsetLeft;
  rect.startY = e.pageY - this.offsetTop;
  drag = true;
}

function mouseUp() {
  drag = false;
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY ;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    draw();
  }
}

function draw() {
  ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();

E a minha imagem:

Caman('#canvas-id', 'balanco.jpg', function()
    {

        this.render();
    });
1
  • Não estou conseguindo reproduzir seu problema. Que browser você está usando? Testei o exemplo a seguir no Chrome, e funcionou perfeitamente (i.e. ao clicar e arrastar sobre a imagem, aparece um retângulo preto sobre ela): jsfiddle.net/mgibsonbr/v3A3R/1 (Nota: usei uma imagem em base64 porque não tinha como testar uma imagem num domínio cruzado, mas o resultado final é o mesmo - o Caman transforma a img em canvas)
    – mgibsonbr
    Commented 10/04/2014 às 10:43

1 Resposta 1

2

Como o próprio CamanJS cria um canvas com sua imagem, não é necessário criar outro - isso só traz complicação adicional. Sugiro usar o próprio canvas e desenhar por cima - logo após a imagem ser renderizada:

var caman = Caman('#canvas-id', 'balanco.jpg', function()
{
    this.render();
    canvas = this.canvas; // Salva uma referência para o canvas
    ctx = this.context;   // e para o contexto
    init(); // Só então inicializa
});

var canvas, ctx, rect = {}, drag = false; // Inicialmente, canvas e ctx são vazios

...

function draw() {
  // Desenhe a imagem e, quando ela estiver pronta...
  caman.render(function() {
      // ... desenhe o retângulo por cima
      ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
  });
}
//init(); // Não pode inicializar agora, pois o canvas ainda não está pronto

Exemplo no jsFiddle. Nesse exemplo eu ainda faço um crop rudimentar (no mouseUp eu renderizo de novo, pra limpar o retângulo, chamo o crop e renderizo mais uma vez, pro crop ter efeito), mas como não estou familiarizado com essa biblioteca, não caprichei demais não...

1
  • Funciono perfeitamente!
    – ralfting
    Commented 10/04/2014 às 13:57

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 .