是否可以将DataTransfer.setData与图像类型一起使用

Question

我正在尝试将HTML画布元素作为图像拖动到其他应用程序(例如桌面(中。我可以使用它的toDataURL((方法获得画布的数据URL，并尝试将其设置为画布的拖动数据，如下所示：

canvas.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("image/png", canvas.toDataURL());
});

通过将draggable="true"添加到画布元素，我可以从页面中拖动图像。当尝试将图像放入应用程序时，不会发生任何事情。

我知道我传递给setData((函数的数据参数的格式可能不正确，但我找不到任何相关的文档。

Answer 1

以下是我使用dataTransfer.setData的尝试，因为toDataURL的输出是base64字符串，我使用的是dataTransfer.setData("text/plain"和dataTransfer.getData("text")。

我们可以在这个例子中看到；下落区"；工作良好，还测试了拖动到文本编辑器中，它也工作良好；你只需要接收应用程序中的代码就可以知道如何处理base64字符串。

const canvas = document.getElementById('source');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.translate(50, 50);
delta = 0
function dragstart(ev) {
ev.dataTransfer.setData("text/plain", canvas.toDataURL())
}
function dragover(ev) {
ev.preventDefault()
}
function drop(ev) {
ev.target.innerHTML = ev.dataTransfer.getData("text")
}
function draw() {
delta++
for (i = 11; i > 0; i--) {
angle = i - delta
ctx.beginPath();
for (j = angle; j < angle + 360; j += 120) {
a = j * Math.PI / 180
ctx.lineTo(i * 8 * Math.sin(a), i * 8 * Math.cos(a));
}
ctx.fillStyle = (i % 2 == 0 ? "black" : "white");
ctx.fill()
}
}
setInterval(draw, 1000 / 24);

div {
padding: 0.5em;
}
#source {
border: 2px solid blue;
}
#target {
border: 1px solid black;
overflow-wrap: break-word;
}

<div>
<canvas id="source" ondragstart="dragstart(event);" draggable=true></canvas>
</div>
<div id="target" ondrop="drop(event);" ondragover="dragover(event);">
Drop Zone
</div>