Question

我的网页需要能够将图像保存到用户的设备,无论他们从什么设备或网络浏览器查看。图像是由网页本身创建的,所以我需要使用 img 元素,画布元素,或者只是图像的 base64 数据 (任何都可以)。

方法 1：通过锚元素下载

在单击时下载图像的页面上创建一个 anchor 元素：

<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：允许用户长按图像保存自己

在 Google 图片上，任何移动用户都可以长按图像以将其保存到其图库中。我试图通过在页面上放置一个简单的 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 上做任何事情。这种方法似乎是最有前途的，但我不知道如何使我的网页表现得像谷歌图片。

0

Answer 1

原来我对方法 3 是错误的。长按 html img 元素按预期工作。问题是我不小心使用了 canvas 元素而不是 image 元素。这是我如何将我的 canvas 元素转换为 image 元素:

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