我的网页需要能够将图像保存到用户的设备上，无论他们是从什么设备或web浏览器观看。图像是由网页本身创建的，所以我需要使用img元素、画布元素，或者只使用图像的base64数据(任何数据都可以(。我设法找到了适用于Android设备和PC的技术，但我还没有找到一种能在iPhone上一致工作的技术(尤其是在Safari上(。以下是我尝试过的：
方法1：通过锚元件下载
在点击时下载图像的页面上创建一个锚元素：
<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>
适用于PC和Android。但在iPhone上，会出现一个弹出窗口，询问用户是否要下载图像。如果按"；下载"；，好像什么都没发生。如果确实下载了图像，则它不会出现在照片应用程序中。
方法2:P5JS图形对象上的.save()方法
我使用的是P5JS库，它有特殊的图形对象(基本上只是画布DOM元素的包装器(，带有.save((方法，可以将图像保存到用户的文件系统：
myGraphicsObject.save("myImage.png")
这在iPhone上似乎只有一半的时间有效。有一半的时间，它似乎什么都不做，或者打开一个页面，上面写着"；找不到文件"；。很奇怪。
方法3：允许用户长时间点击图像以自己保存
在谷歌图像上，任何移动用户都可以长按图像将其保存到他们的图库中。我试着在我的网页上重新创建这个，只需在页面上放一个简单的img元素。我尝试将style属性设置为-webkit-user-select: none，以防止长按只突出显示页面上的元素。我甚至尝试使用document.open()从网页中删除所有其他元素，看看这是否有帮助：
document.open();
document.write("<html><body></body></html>")
myCanvas.setAttribute('style', "-webkit-user-select: none;")
document.body.appendChild(myCanvas);
当我尝试这个时，长时间点击图像在iPhone或Android上似乎没有任何作用。这种方法似乎是最有前途的，但我不知道如何让我的网页表现得像谷歌图片。
事实证明，我对方法3的看法是错误的。长时间点击html img元素可以正常工作。问题是我不小心使用了画布元素而不是图像元素。这就是我如何将画布元素转换为图像元素：
var canvas_data = canvas.toDataURL();
var img_element = document.createElement("img")
img_element.src = canvas_data;
document.body.appendChild(img_element);