Question

如何将div或文件的图像传输到某些可放置的画布区域（画布内部）？我打算写一本写真集。

我当时是用div标签做的，但是我已经看到所有照相簿都是用画布做的。他们甚至将照片作为画布发送。

<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或上传的文件拖放到画布上，该相册几乎可以制作出来。

Answer 1

为了在画布上放置一个区域，我首先标记可放置区域。请参见DataTable table = new DataTable(); foreach (DataColumn column in dt.Columns) { table.Columns.Add(column.ColumnName, typeof(string)); }函数。在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 HTML可放置区域中放置区域？

1 个答案: