To make our screenshot downloadable we need to export the image data from the screenshot canvas
However, the tricky part is how to make the browsers popup the 'Download' or 'Save File' dialog
I'm going to add a dummy link element for this example with id="test"
Then we'll set "href" attribute of the link to our image data
We can get the image data from canvas by using canvas.toDataURL("image/png") method
Then, we'll name our image file by setting the 'download' attribute
I'm going to name it "Test file.png"
And finally, we'll trigger the link using click() method
Noted that I have to add [0] as we're using click native method, not jQuery.click() or it won't work
Looking good!
Unfortunately this technique won't work with IE (again)
We need to find another workaround
You can see that IE didn't popup any download dialog at all!
In order to make IE save the file - we need to utilize "Blob" object
But Blob is IE specific and does not work with other browsers
So we need to write a code to check which browser that client's using and determine our solution
I just pasted the code snippet that I used to check for IE9-11
(The link to the complete code at the video description below)
To get the Blob object - simply call canvas.msToBlob()
Then, to save file, we will call msSaveBlob() and pass the returned Blob object to it
The second parameter is the file name. We'll also name it "Test file.png"
(Sorry, the IE save dialog was at the bottom and off the screen record. But the code is actually worked)
Thanks you for watching. Hope you'll find a good use of html2canvas!