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 :) Commented el 26 sept. 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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