javascript - 如何使 Canvas html 中的区域可放置？

Question

如何将 div 或文件的图像传输到某个可放置的 Canvas 区域( Canvas 内部)？我的目的是制作一本相册。

我是用 div 标签做的，但我看到所有的相册都是用 Canvas 做的。他们甚至将照片作为 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>

我相信只要将 blob 或上传的文件拖放到 Canvas 上，相册就差不多制作完成了。

Answer 1

为了使 Canvas 中的区域可放置，我首先标记可放置区域。请参阅 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>