4

Our company's website uses canvas elements to render graphs and charts on our pages. However, these cannot be drag-and-dropped into, say, a Microsoft Word Document or an email client. So I devised a way to replace the canvas with an identical-looking img on mouse down, by getting the base64 data from the canvas.

The canvas is properly replaced by an image on mousedown, and placed back on mouseup. However, this does not allow dragging and dropping the image tag, probably because the replacement happens too late.

Here is a working JSFiddle example.

We use a plugin which also provides tooltips to specific areas of the charts, so I cannot replace the elements on hover in/hover out, as that would stop the tooltips from working.

How do I make dragging and dropping the image itself possible?

Improve this question
1
  • If your charts don't change after they are rendered to the canvas you can (1) create in-memory canvases to draw your charts at the start of your app and then (2) create img elements (from the canvas.toDataURL) to present on-screen. Even if the charts are not static, this might be the closest solution that keeps your drag & tooltips without changes. Commented Dec 24, 2015 at 14:31

2 Answers 2

Reset to default
1

Prebuild your img elements at the start of your app instead of taking the time to do it "on-the-fly".

Create your charts using in-memory canvases: 

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

Then create img elements from the canvases

var chart1=new Image(); document.body.appendChild(chart1); chart1.src=canvas1.toDataURL();
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I had come this far too, but the problem is that this makes tooltips not work. I need tooltips in specific areas. If this is possible with imagemaps, then that's a possibility too.
1

your code is working correctly but you can't drop the image onto word because IMO the image is base64, you'll see that if you drag and drop the image onto a new tab in the browser or add a css border or the image id

The Image:

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==

If you copy the above base64 code and paste it in the browser address bar it will render just fine, but if you do the same in word it won't work, so you need to decode the image first before showing it on mouse down

for more information:

Base64 encoding / decoding with javascript

Base64 encoding and decoding in client-side Javascript

Edit:
You can right click on the canvas and then save image as, thus it will be saved as an image file

Improve this answer

7 Comments

Good idea, but dragging and dropping the image seems to work as expected, if I literally put an img element on the page, using the data URL that you provided. Maybe it would not work in Word, but it does seem to work in Thunderbird, which is what I mainly need it for. The problem seems to be that the browser tries to "drag" the canvas before the canvas is replaced by an image.
If you drag/drop the image from your fiddle or from the image rendered by the browser in a standalone window with the bas64 in the URL it'll show the same result, which was lots of eastern-Asian symbols
However, in Thunderbird, if you try to insert the image topmenu > insert > image, and in the image location field you paste this base64 code , in the image preview box you'll see the exact same image rendered correctly and it'll be inserted like it should
another option is to right click on the canvas and then save image as, thus it will be saved as image file
@Mi-Creativity. IE & Edge don't treat the canvas as an img so you can't right-click-save-as.
|