像图像一样拖放画布

Question

我们公司的网站使用canvas元素在我们的网页上呈现图形和图表。但是，这些不能拖放到Microsoft Word文档或电子邮件客户端中。因此，我设计了一种方法，通过从画布中获取base64数据，在鼠标按下时用相同外观的img替换画布。

画布被mousedown上的图像正确替换，并放回鼠标上。但是，这不允许拖放图像标记，可能是因为替换发生得太晚了。

Here is a working JSFiddle example.

我们使用的插件还提供了图表特定区域的工具提示，因此我无法在悬停/悬停时替换元素，因为这会阻止工具提示工作。

如何使图像本身拖放？

Answer 1

在应用开始时预建img元素，而不是花时间去做＃34;即时＆＃34;。

使用内存画布创建图表：

var canvas1=document.createElement('canvas');
// draw your chart on canvas1

然后从画布

创建img元素

var chart1=new Image();
document.body.appendChild(chart1);
chart1.src=canvas1.toDataURL();

Answer 2

你的代码工作正常，但你不能将图像放到单词上，因为IMO图像是base64，你会看到如果你将图像拖放到浏览器中的新标签上或添加一个css {{ 1}}或图片border

图片：

id

如果您复制上面的base64代码并将其粘贴到浏览器地址栏中，它将呈现得很好，但如果您在单词中执行相同操作它将无法正常工作，因此您需要首先解码图像然后再显示它鼠标按下

了解更多信息：

Base64 encoding / decoding with javascript

Base64 encoding and decoding in client-side Javascript

修改
您可以右键单击画布，然后将图像另存为，因此它将保存为图像文件