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

标签 javascript html html5-canvas

如何将 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 上,相册就差不多制作完成了。

最佳答案

为了使 Canvas 中的区域可放置,我首先标记可放置区域。请参阅 markDroppableZone() 函数。在 dragenterdragoverdrop 上,我首先使用 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>

关于javascript - 如何使 Canvas html 中的区域可放置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56247591/

相关文章:

javascript - 在 thymeleaf 变量中转义撇号

javascript - Bootstrap进度条起始值

javascript - 使用 JQuery 更改类中的 CSS 规则

javascript - iOS 铃声开关使网络音频静音

java - 在 Servlet 中构建 HTML 添加额外的引号

javascript - html5中如何读取图片中的文字

javascript - D3 和​​ Leaflet - svg 圆圈不显示

javascript - 公式不适用于点击游戏

javascript - 编辑两个 Canvas 元素

javascript - WindowsPhone native 应用程序 - 与 Javascript/HTML5/Canvas/CSS 3 的兼容性