I'm experiencing difficulty trying to get the download attribute to work on anchor tags when downloading PNGs from a canvas, via data URL.
Essentially I would like to draw to an HTML5 canvas, and download the drawing as a png. I've been using canvas.toDataURL() to generate the href attribute, though the attached examples use premade data URLs.
It would appear that on Google Chrome for iOS, the download attribute is not functioning properly. The downloaded file is simply called "document" with no extension, which makes it impossible to save the image to my iPhone's camera roll. All other browsers I've worked with have not had this problem (Chrome for Mac and PC, and Safari for Mac and iOS).
Here is a link to a test page on my website that demonstrates the issue. Here is a link to my Codepen, though it behaves differently (the Codepen fails to download anything, and simply opens the image).
The relevant code is as follows: (I've shortened the Data URL)
<a download='test.png' target='_blank' href='data:image/png;base64,iV...gg=='>Click me to download</a>
<br><br>
<img src='data:image/png;base64,iV...gg=='>
Is there any way to ensure that the downloaded file has a .png extension?