Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ATLAS-128: Support download of map images #84

merged 1 commit into from Jul 3, 2019


Copy link

commented Jul 2, 2019

JIRA issue:

I changed the resolution options from dimensions to scale (for now) because there don't seem to be any direct options for dimensions in html2canvas (there are width and height parameters, but they aren't working as expected). If we'd like dimensions, we'll probably need to scale the map canvas, take the screenshot, then scale it down again. I wasn't sure if the effort was worth it, as x2 generates a decent resolution image on a modern pc. What do you think?

Screenshot from 2019-07-02 18-04-20

@HelioStrike HelioStrike requested review from bmamlin and cintiadr Jul 2, 2019

@HelioStrike HelioStrike force-pushed the HelioStrike:ATLAS-128 branch from e1a975b to 7687916 Jul 2, 2019


This comment has been minimized.

Copy link

commented Jul 3, 2019

Great work, @HelioStrike. I like having the work done on the client and, while we lose the ability to set specific dimensions, this approach has the advantage of generating an image based on the user's current settings. However, the "x1" and "x2" are not intuitive. I'd suggest getting rid of the dropdown for the Download button and, instead, just make the Download button generate the scale: 2 image.

canvas2image is a nice touch, but it's 5+ years old. It also generate a download file named "download" without an extension. Based on this suggestion, how about something like this instead:

html2canvas(document.getElementById('map_canvas'), {
  scale: 2,
  useCORS: true,
}).then(function(canvas) {
  var link = document.createElement("a"); = "openmrs-atlas.png";
  link.href = canvas.toDataURL("image/png");;

I think that would eliminate the need for canvas2image and generate a friendlier filename.

@HelioStrike HelioStrike force-pushed the HelioStrike:ATLAS-128 branch 2 times, most recently from 1879d97 to 8cc50e8 Jul 3, 2019

@HelioStrike HelioStrike force-pushed the HelioStrike:ATLAS-128 branch from 8cc50e8 to 11ca17d Jul 3, 2019


This comment has been minimized.

Copy link
Collaborator Author

commented Jul 3, 2019

@bmamlin I made the changes. I had to append link to the document's body to make it work. This code works perfectly on mozilla, but says "Failed - Network error" on chrome for me. Canvas2Image doesn't work on chrome for me either, I didn't notice it until half an hour ago. Comments on stackoverflow say that the code snippet you provided works for them, so I suspect that this may be a problem in my computer.

views/index.ejs Show resolved Hide resolved

@bmamlin bmamlin merged commit 48bb227 into openmrs:master Jul 3, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.