2

Me podrian por favor ayudar, lo que quiero que suceda es que pueda insertar una imagen que es de tipo canvas y esa imagen moverla con el mouse sobre una caja... Esta inserta pero al dar clic sobre la imagen, esta desaparece. GRACIAS!!!

document.getElementById('inp').onchange = function (e) {
   var img = new Image();
   img.onload = draw;
   img.onerror = failed;
   img.src = URL.createObjectURL(this.files[0]);
   };
  function draw() {
   var canvas = document.getElementById('upper-canvas');
   canvas.width = this.width;
   canvas.height = this.height;
   var ctx = canvas.getContext('2d');
   ctx.drawImage(this, 0, 0);

   var down = false;

  ctx.canvas.addEventListener('mousedown', function () { 
      down = true; 
  }, false);
  ctx.canvas.addEventListener('mouseup', function () { 
      down = false; 
  }, false);
  ctx.canvas.addEventListener('mousemove', function (event) {
      if (down){
          clear();
          ctx.drawImage(event.clientX - this.offsetLeft,
          event.clientY - this.offsetTop, 50, 50);
      }
  }, false);

  function clear(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.fillRect(200, 200, 0, 200);     
  }
   }
  function failed() {
      console.error("El archivo proporcionado no se pudo cargar como un medio de imagen");
  }
<div class="col-md-2" style="width: 50px; height: 30px;">
<input type="file" id="inp"></input></div>                               
<div id="canvas" style="width: 400px; height: 400px; background-color: blue;">
<canvas id="upper-canvas" style="position: absolute; width: 50px; height: 50px;  left:15px; top: 45px; user-select: none; cursor: default;"></canvas>
</div>  

1
  • Bienvenida a SO en español!. Buena primera pregunta (detallada y clara); te recomiendo que completes el recorrido de bienvenida para conseguir tu primera medalla y conocer algunos detalles extras sobre el sitio :) el 26 sep. 2018 a las 7:34

1 respuesta 1

2

Hice algunos cambios a tu código, principalmente he cambiado el tamaño del canvas de 50px a 500px, porque ya que tengo que mover una imagen necesito más espacio. Pero tu puedes volver a hacerlo de 50px si así lo necesitas.

¿Que he hecho?

  1. He añadido una función que detecta la posición del ratón en el canvas:
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

Esta función devuelve un objeto que lo guardo en una variable var m. También necesito guardar la imagen en una variable global, ya que la voy a reutilizar más tarde. Otras dos variables se encargan de guardar la distancia entre el punto de agarre y el origen de la imagen en x e y.

Espero que sea lo que necesitas.

Una observación: quise dejar el código muy parecido a lo que tu has hecho. Yo lo habría hecho un poco diferente.

var m = { x: 0, y: 0 }; // la posición del ratón
var img,// la imagen
    // distancia entre el punto de agarre y el origen de la imagen en x e y
  dx = 0,
  dy = 0;

document.getElementById("inp").onchange = function(e) {
  img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);
};

function draw() {
  var canvas = document.getElementById("upper-canvas");
  var cw = (canvas.width = 500);
  var ch = (canvas.height = 500);
  var ctx = canvas.getContext("2d");
  ctx.drawImage(this, 0, 0);

  var down = false;

  canvas.addEventListener(
    "mousedown",
    function() {
      down = true;
      var punto_de_agarre = oMousePos(canvas, event);
      dx -= punto_de_agarre.x;
      dy -= punto_de_agarre.y;
    },
    false
  );
  canvas.addEventListener(
    "mouseup",
    function() {
      down = false;
      m = oMousePos(canvas, event);
      dx += m.x;
      dy += m.y;
    },
    false
  );
  canvas.addEventListener(
    "mousemove",
    function(event) {
      if (down) {
        clear();
        m = oMousePos(canvas, event);
        ctx.drawImage(img, m.x + dx, m.y + dy);
      }
    },
    false
  );

  function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //ctx.fillRect(200, 200, 0, 200);
  }
}
function failed() {
  console.error(
    "El archivo proporcionado no se pudo cargar como un medio de imagen"
  );
}

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}
canvas{position: absolute; width: 500px; height: 500px;  left:15px; top: 45px; user-select: none; cursor: default; border:1px solid #d9d9d9;}
#canvas{background-color: blue;}
<div class="col-md-2">
<input type="file" id="inp"></input></div>                               
<div id="canvas">
<canvas id="upper-canvas"></canvas>
</div> 

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.