如何使用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);

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

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

相关推荐

  • ios分辨率 Enjoy the Best Screen Resolution on the Market

    iOS分辨率是指iPhone和iPad设备的屏幕分辨率,它们的分辨率不同。iPhone的分辨率有以下几种:…

    2023-01-13 15:24:03
    0 93 19
  • mac模拟ios:如何使用Mac模拟iOS开发应用

    Mac模拟iOS的方法有以下几种:使用Xcode模拟器:Xcode提供了一个完整的iOS模拟器,可以在Mac上模拟iOS设备,以便开发者可以在Mac上测试iOS应用。…

    2023-01-17 00:55:07
    0 90 88
  • ios ui控件UIPageControl使用UIPageControl实现页面的分页导航

    iOS UI控件是指在iOS应用程序中使用的用户界面控件。它们可以帮助用户更好地理解和控制应用程序的行为。下面是一些iOS UI控件的代码示例:…

    2023-01-18 11:06:41
    0 34 32
  • clarios电池:【超高性能,无与伦比的Clarios电池】

    Clarios电池是一种高性能的蓄电池,它具有耐久性、可靠性和高效性,可以满足各种应用场景的需求。Clarios电池由一种特殊的碱性电解液和一种特殊的储能材料组成,这些材料可以提供更长的使用寿命和更高的可靠性。Clarios电池的主要优势在于它们可以提供更大的电量,可以支持更多的应用,并且可以提供更高的可靠性和更长的使用寿命。…

    2022-12-31 07:15:35
    0 12 44
  • ios免费下载minecraft国际版:iOS免费下载Minecraft国际版,让你畅游沙盒世界!

    iOS用户可以在App Store上免费下载Minecraft国际版,搜索“Minecraft”即可找到。也可以使用以下代码直接下载:…

    2023-01-12 08:15:49
    0 69 71
  • Macos和ios:适用于iOS和macOS的 Swift框架

    关于Macos和ios的问题,在swift framework中经常遇到,目前我正在为我的毕业项目开发一个应用程序。问题是,它不只是一个应用程序,它由一个为用户制作的 iOS 应用程序和一个“所有者”的 macOS 应用程序组成。在 mac 应用程序中,所有者可以创建一个文件,然后在 iOS 应用程序中变为红色。…

    2022-12-23 01:51:38
    0 47 66
  • 华为cloud网址:无法使用 Android从谷歌云存储网址下载图像

    关于华为cloud网址的问题,在how to download photos from google cloud中经常遇到,我从我的 android 应用程序下载来自 Google Cloud Storage public url 的图像时遇到问题。我的代码非常适合来自其他来源的图像。来自 Google Cloud Storage 的图像也可以从 Web 浏览器访问而不会出现问题。以这个图像为例:http://tin_images.storage.googleapis.com/1420678062-zmj1qJQe126843HbyJvbUI.jpg…

    2022-12-21 04:51:14
    0 34 11
  • Ios手机是什么:iOS中的PngCrush是什么

    关于Ios手机是什么的问题,在pngcrush中经常遇到,我知道 Pngcrush 是 iOS 中的图像优化技术,但我的疑问是 X 代码是否会在每次构建期间或在将我们的应用程序部署到 iTunes 商店之前在内部执行此操作,我们需要执行此图像优化?…

    2022-12-21 00:22:18
    0 60 86

发表评论

登录 后才能评论

评论列表(12条)