如何使用 Javascript（使用 base64 数据）将图像保存到 iPhone？

Question

我的网页需要能够将图像保存到用户的设备，无论他们使用什么设备或网络浏览器查看。该图像是由网页本身创建的，因此我需要使用 img 元素、canvas 元素或图像的 base64 数据（任何都可以）。我设法找到了适用于 Android 设备和 PC 的技术，但我还没有找到一种适用于 iPhone 设备和 PC 的技术（尤其是在 Safari 上）。这是我尝试过的：

方法一：通过锚元素下载

在点击时下载图像的页面上创建锚元素：

<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>

适用于 PC 和 Android。但是在 iPhone 上，会出现一个弹出窗口，询问用户是否要下载图像。如果你按下“下载”，似乎什么也没有发生。如果它确实下载图像，则它不会出现在“照片”应用中。

方法 2：.save() P5JS 图形对象上的方法

我正在使用 P5JS 库，它有特殊的图形对象（基本上只是 canvas DOM 元素的包装器），带有 .save() 方法，可以将图像保存到用户的文件系统：

myGraphicsObject.save("myImage.png")

这似乎只在 iPhone 的一半时间内有效。有一半时间它似乎什么也没做，或者它打开一个页面，上面写着“找不到文件”。很奇怪。

方法三：长按图片自行保存

在 Google 图片上，任何移动用户都可以长按图片以将其保存到他们的图库中。我试图通过在页面上放置一个简单的 img 元素来在我的网页上重新创建它。我尝试将样式属性设置为 -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 上长按图像似乎没有任何作用。这种方法似乎最有希望，但我不知道如何使我的网页表现得像 Google 图片。

Answer 1

事实证明我对方法 3 的看法是错误的。Long-tapping html img 元素按预期工作。问题是我不小心使用了 canvas 元素而不是图像元素。这就是我将 canvas 元素转换为图像元素的方式：

var canvas_data = canvas.toDataURL();
var img_element = document.createElement("img")
img_element.src = canvas_data;
document.body.appendChild(img_element);

如何使用 Javascript（使用 base64 数据）将图像保存到 iPhone？

How to save an image to iPhone using Javascript (using base64 data)?

javascript

ios

dom

mobile-safari

compatibility