My webpage needs to allow mobile users to long-tap HTML image elements to save them to their gallery, like how you can when browsing Google Images on any mobile web browser.
When I create an HTML img element, long-tapping doesn't seem to open the context menu or do anything on Android (Chrome) or iOS (Safari). Even when I set the img element's style to -webkit-user-select: none; (to prevent user from highlighting the image) it doesn't seem to work. I tried reverse-engineering the way Google Images does it, but I can't figure it out.
I would just allow the user to download the image via an anchor element, but this seems to save the photo to the phone's file system, meaning that on iPhone, it won't appear in the user's Photos app (not very user-friendly).
<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>
I found the problem. 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);