html2canvas Tutorial – Part 3: Save the Screenshot – Howtoshtab – how to, lifehacks, tips and tricks

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!.

You may also like