javascript – 像图像一样拖放画布

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

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

Here is a working JSFiddle example.

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

如何使图像本身拖放成为可能？

解决方法:

在应用程序开始时预构建img元素,而不是花时间“动态”执行此操作.

使用内存画布创建图表：

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

然后从画布创建img元素

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