Как сделать область на холсте HTML сбрасываемым?

Question

Как вы переносите изображение div или файла в какую-то область холста (внутри холста)? Я собираюсь сделать фотокнигу.

Я делал это с тегами div, но я видел, что все фотокниги делают это с помощью canvas. Они даже отправляют фотографию в виде холста.

<canvas id="canvas" style="position:absolute;"></canvas>

<canvas id="canvas-encima" style="position:absolute;left:8em;top:7em;"></canvas>

<script>
  var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d");

  canvas.width= 1000;
  canvas.height = 481;

  var background = new Image();
  background.src = "upload/plantilla5prueba.jpg";
  background.onload = function() {
    ctx.drawImage(background,0,0);
  }  

  var canvas2 = document.getElementById("canvas-encima"),
  ctx2 = canvas2.getContext("2d");
  canvas2.width= 330;
  canvas2.height = 280;
  var image2 = new Image();
  image2.src = "upload/celular.png";
  image2.onload = function() {
  ctx2.drawImage(image2,0,0);
   ;}
</script>

Я полагаю, что при перетаскивании капли или загруженного файла на холст, фотокнига будет почти готова.

Answer 1

Чтобы сделать область на холсте выпадающей, я сначала отмечаю зону сбрасывания. Смотрите функцию markDroppableZone(). На dragenter, dragover и drop Сначала я проверяю, находится ли мышь внутри зоны сброса, используя isPointInPath. Пожалуйста, смотрите onEvent() функция.

Если мышь находится в пути, я использую e.stopPropagation(); e.preventDefault();. Это предотвращает открытие перетаскиваемого изображения в новом окне.

Далее drop Я продолжаю обрабатывать удаленные файлы. Смотрите функцию handleFiles().

const ctx = canvas.getContext("2d")
let cw = canvas.width;
let ch = canvas.height;
//the mouse
let m = {}


ctx.setLineDash([4]);
markDroppableZone();
ctx.stroke();
ctx.setLineDash([]);

function markDroppableZone(){
  ctx.beginPath();
  ctx.rect(10,10,160,160);
}


  canvas.addEventListener("dragenter", dragenter, false);
  canvas.addEventListener("dragover", dragover, false);
  canvas.addEventListener("drop", drop, false);
  
function dragenter(e) {
    onEvent(e);
  }
  
function dragover(e) {
    onEvent(e);
  }
  
function drop(e) {
    onEvent(e);
  
   let data = e.dataTransfer;
   let files = data.files;
   // handle files
   handleFiles(files);
  }



function handleFiles(files){
   for (var i = 0; i < files.length; i++) {
      var theFile = files[i];
      // check if the file is an image
      var isImagen = /^image\//;
      // if it's not an image continu
      if (!isImagen.test(theFile.type)) {
        continue;
      }
      
      var img = new Image(); 
      img.src = window.URL.createObjectURL(theFile);
      img.onload = function() {
        
      ctx.save();  
      markDroppableZone();
      // clip the context
      ctx.clip();
      // draw the image 
      ctx.drawImage(this, 10, 10);
      ctx.restore();
      window.URL.revokeObjectURL(this.src);     
      }
   }
}



function onEvent(e){
    m = oMousePos(canvas, e);
    markDroppableZone();
    if (ctx.isPointInPath(m.x, m.y)){ 
    e.stopPropagation();
    e.preventDefault();
    }
}


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{background:#e9e9e9}

<canvas id="canvas" width="500" height="500"></canvas>