Skip to main content
erros de digitação
Fonte Link
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228

Estou aqui criando um 'editor' de imagenimagem utilizando Javascript com auxilioauxí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. 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();

eE a minha imagem:

Caman('#canvas-id', 'balanco.jpg', function()
    {
        
        this.render();
    });

Estou aqui criando um 'editor' de imagen utilizando Javascript com auxilio 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();
    });

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();
    });

Adquirindo coordenadas no Javascript com axuilioauxílio da biblioteca CamanJs

Nome do post editado para melhor entendimento
Link

Pegando Adquirindo coordenadas no Javascript com axuilio da biblioteca CamanJs

deleted 32 characters in body
Fonte Link
Felipe Avelar
  • 9,8mil
  • 4
  • 36
  • 69
Carregando
Movendo a tag do título para as tags
Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334
Carregando
Fonte Link
ralfting
  • 812
  • 7
  • 22
Carregando