拖放图像，在画布上显示该图像答案

【问题标题】：drag and drop image, display that image on canvas拖放图像，在画布上显示该图像
【发布时间】：2021-03-27 23:17:22
【问题描述】：

我想做一个拖放图像，然后在画布上显示该图像，我真的不知道该怎么做。但这是我尝试过的：

var canvas = document.getElementById("canvas2");
var c = canvas.getContext("2d");
//console.log(canvas)


canvas.ondrop = function(e){
    e.preventDefault();
    c.drawImage(e.dataTransfer.files[0], 0, 0, c.canvas.width, c.canvas.height);
}

canvas.ondragover = function(e){
    console.log("test")
    return false;
}

#canvas2{
    position:relative;
    z-index:100;
    margin-top: 100px;
    border:1px solid #000000;
}

<html lang="en">
<head>
    <!-- <meta http-equiv="refresh" content="5" >  -->
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- <label for="GridCheck">Grid:</label>  -->
  <!-- <input type="checkbox" id="GridCheck" onclick="GridToggle('canvas1')"> -->
  <div class="canvasContainer">
    <canvas id = "canvas2" class="canvas"></canvas>
  </div>
  <script src="main.js"></script>
</body>
</html>

我知道问题是“c.drawImage(e.dataTransfer.files[0], 0, 0, c.canvas.width, c.canvas.height);”部分。我是否需要实际上传图像才能访问它在画布上显示它？我很困惑...

【问题讨论】：

如果我没记错的话，您需要从中读取文件。 stackoverflow.com/q/22245100
是的，我试过了。该函数返回这个数据 url 的东西（像这样：imgur.com/a/zuzml2I），当我尝试用 context.drawImage() 绘制它时，它会抛出一个错误，说它不是正确的类型或其他东西。

标签： javascript html css canvas

【解决方案1】：

您可以这样做，尽管它可能与您所说的有点不同，我认为您可以对其进行足够的编辑以使其符合您的要求：

代码

const fill = document.querySelector('.fill');
const empties = document.querySelectorAll('.empty');


fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);


for (const empty of empties) {
  empty.addEventListener('dragover', dragOver);
  empty.addEventListener('dragenter', dragEnter);
  empty.addEventListener('dragleave', dragLeave);
  empty.addEventListener('drop', dragDrop);
}



function dragStart() {
  this.className += ' hold';
  setTimeout(() => (this.className = 'invisible'), 0);
}

function dragEnd() {
  this.className = 'fill';
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += ' hovered';
}

function dragLeave() {
  this.className = 'empty';
}

function dragDrop() {
  this.className = 'empty';
  this.append(fill);
}

body {
  background: #1a911a;
}

.fill {
  background-image: url('https://source.unsplash.com/random/150x150');
  position: relative;
  height: 150px;
  width: 150px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}

.hold {
  border: solid 5px #ccc;
}

.empty {
  display: grid;
  height: 160px;
  width: 160px;
  margin: 10px;
  border: solid 3px red;
  background: white;
  grid-row: 1/4;
  grid-column: 3/4;
}

.hovered {
  background: #f4f4f4;
  border-style: dashed;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <script src="(Filename).js"></script>
  <title>Drag and Drop</title>
</head>

<body>
  <div class="empty">
    <div class="fill" draggable="true"> </div>
  </div>
  <div class="empty"></div>
</body>

</html>

【讨论】：

感谢您的建议，但我需要实际显示您放入元素中的图像，而不是从 url 加载图像，因为那是让我感到困惑的部分。编辑：您将图像放入其中的元素最好是画布，虽然我可能可以使用 div，但我认为元素类型没有任何区别，如果我错了，请纠正我......
从我从您的问题中得到的答案是，您只需删除 url('https://source.unsplash.com/random/150x150') 然后在背景图像中添加您喜欢的图像：;