Screenshot Deck button - html2canvas?
Closed this issue · 5 comments
The ability to screenshot the main deck/extra deck/side deck without having to go through Prt Scr (and then manually stitch images together) might be useful.
I've been looking into html2canvas which uses Javascript to do this.
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the
page.
Example usage is:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
The best class to capture would possibly be "deck" as it seems to incorporate the main deck, extra deck and side deck.
html2canvas currently implemented. Tested using various versions.
0.4.1 - Image result is slightly blurry. Not confident in quality. Used various "fixes" to upgrade the image quality but still wasn't good enough.
1.0.0 beta - Image quality is better, more usable for a quick deck image.
Implemented so that it captures the .deck class.
Once the screenshot button is pressed, the following occurs:
- Button is disabled to prevent spam clicking it.
- Side deck div is hidden temporarily as it causes the screenshot to be too long.
- If the extra dev div is empty, it's hidden.
- app-deck div is stretched to 1110px for optimal deck screenshot. On mobile the primary div is also stretched.
- HTML2Canvas "captures" the main deck and extra deck (if not empty).
- All display modifications are reset.
- The captured image is uploaded to imgur in the background and opened in a new tab (browser may prompt user about this).
- Button is re-enabled.
Currently, once the button is pressed the user may not think it's working correctly. I'm thinking about implementing some message to ask the user to patiently wait for the image to generate and upload. Not sure the best way to go about this currently.
Thinking:
- Window alert. Doesn't look nice.
- Modal pop-up?
- Message injection on the page? Some sort of "Success" message under the screenshot button?
Will need modifications for #17
Will need to wait until UI is finalized before modifying but should be fast, just need to point it at the right divs.
Started progress in e73e2d7
As discussed attempt to open image in new tab instead of imgur integration
Completed in ff1dc67