我的网页需要能够将图像保存到用户的设备，无论他们从什么设备或网络浏览器查看。该图像是由网页本身创建的，因此我需要使用 img 元素、canvas 元素或仅使用图像的 base64 数据（任何都可以）。我已经设法找到适用于 Android 设备和 PC 的技术，但我还没有找到一种适用于 iPhone（尤其是在 Safari 上）的技术。这是我尝试过的：
方法一：通过锚元素下载
在单击时下载图像的页面上创建一个锚元素：
<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>
适用于 PC 和 Android。但在 iPhone 上，会出现一个弹出窗口，询问用户是否要下载图像。如果您按“下载”，似乎什么也没有发生。如果它确实下载了图像，则它不会出现在照片应用程序中。
方法二：.save()P5JS图形对象上的方法
我正在使用 P5JS 库，它具有特殊的图形对象（基本上只是画布 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 图片。
事实证明我对方法 3 的看法是错误的。长按 html img 元素按预期工作。问题是我不小心使用了画布元素而不是图像元素。这就是我将画布元素转换为图像元素的方式：
var canvas_data = canvas.toDataURL();
var img_element = document.createElement("img")
img_element.src = canvas_data;
document.body.appendChild(img_element);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句