My webpage needs to be able to save an image to the user's device, no matter what device or web browser they are viewing from. The image is created by the webpage itself, so I need to work with either an img element, a canvas element, or just the base64 data of the image (any will do). I've managed to find techniques that work on Android devices and PCs, but I haven't found one that works consistently across iPhones (especially on Safari). Here is what I've tried:
Method 1: Download via anchor element
Create an anchor element on the page that downloads the image when clicked on:
<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>
Works on PCs and Android. But on iPhone, a pop-up will appear asking the user if they want to download the image. If you press "download", it seems like nothing happens. If it does download the image, it isn't appearing in the Photos app.
Method 2: .save() method on P5JS graphics objects
I am using the P5JS library, which has special graphics objects (basically just wrappers for a canvas DOM element) that come with a .save() method which will save the image to the user's file system:
myGraphicsObject.save("myImage.png")
This seems to only work half the time on iPhones. Half the time it doesn't seem to do anything at all, or it opens a page that says something along the lines of "the file couldn't be found". Very strange.
Method 3: Allow user to long-tap the image to save it themselves
On Google Images, any mobile user can long-tap an image to save it to their gallery. I tried to recreate this on my webpage by just putting a simple img element on the page. I tried setting the style attribute to -webkit-user-select: none to prevent the long-tap from just highlighting elements on the page. I even tried removing all other elements from the webpage, using document.open(), to see if that would help:
document.open();
document.write("<html><body></body></html>")
myCanvas.setAttribute('style', "-webkit-user-select: none;")
document.body.appendChild(myCanvas);
When I try this, long-tapping the image doesn't seem to do anything on iPhone or Android. This method seems the most promising but I don't know how to make my webpage behave like Google Images.
It turns out I was wrong about Method 3. Long-tapping an html img element works as intended. The problem is that I was accidentally using a canvas element instead of an image element. This is how I converted my canvas element into an image element:
var canvas_data = canvas.toDataURL();
var img_element = document.createElement("img")
img_element.src = canvas_data;
document.body.appendChild(img_element);