如何使用Javascript(使用base64数据)将图像保存到 iPhone

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

我的网页需要能够将图像保存到用户的设备,无论他们从什么设备或网络浏览器查看。图像是由网页本身创建的,所以我需要使用 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);

当我尝试这个时,长按图像似乎没有在 iPhoneAndroid 上做任何事情。这种方法似乎是最有前途的,但我不知道如何使我的网页表现得像谷歌图片。

0

原来我对方法 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);

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(882)
由于支付宝和微信支付 iOS应用程序被拒绝
上一篇
无法运行 istio-ingressgateway 获得就绪探测失败:连接被拒绝
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(32条)