像图像一样拖放画布

Drag and drop a canvas like an image

本文关键字：一样 拖放 图像      更新时间：2023-09-26

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

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

下面是一个正在工作的JSFiddle示例。

我们使用了一个插件，它还为图表的特定区域提供了工具提示，所以我不能替换悬停在/悬停在外的元素，因为这会使工具提示停止工作。

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

在应用程序开始时预先构建img元素，而不是花时间"动态"构建。

使用内存画布创建图表：

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

然后从画布创建img元素

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

您的代码工作正常，但由于图像是base64，因此无法将图像放到word上，如果您将图像拖放到浏览器中的新选项卡上，或者添加css border或图像id

图像：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAGQCAYAAAA9TUphAAAgAElEQVR4Xu3dsW5bURBDQfvP/edJHSCFYFnW4WJSJ/a+IRviFvn88IcAAQIECBAgQIAAAQIECBB4u8Dn2y9wAAECBAgQIECAAAECBAgQIPBhoCsBAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQKPD/Svjz+4QgJf/g/7UBpOIUCAAAECBAgQIECAwNMCBvrThG/6AQb6m+D9WgIECBAgQIAAAQIECLxGwEB/jevrf6qB/npjv4EAAQIECBAgQIAAAQK/KGCg/yL2j/4qA/1HOf0wAgQIECBAgAABAgQIvFvAQH93At/9/Qb6d+X8OwIECBAgQIAAAQIECCQFDPRkLA8cZaA/gOSvECBAgAABAgQIECBAYEfAQN/J6t9LDfTV5NxNgAABAgQIECBAgACB/woY6KvFMNBXk3M3AQIECBAgQIAAAQIEDPRTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQIDAky/oAAkQIECAAAECBAgQIECAAIGXCTz+gv6yE/xgAgQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECCtJVbsAAABWSURBVBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBA4C+co8mRzOcVPQAAAABJRU5ErkJggg==

如果你复制上面的base64代码并将其粘贴到浏览器地址栏中，它会很好地渲染，但如果你在文字上也这样做，它就不起作用了，所以你需要先解码图像，然后再在鼠标下上显示它

更多信息：

使用javascript 进行Base64编码/解码

客户端Javascript 中的Base64编码和解码

编辑：
您可以右键单击画布，然后将图像保存为，这样它将被保存为图像文件

相关文章：