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

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

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

相关推荐

  • android x86 安装教程:如何在 PC 上安装 Android x86

    安装 Android x86 是一个比较简单的过程,但是要求你有一台支持 UEFI 或者 BIOS 的电脑。下载 Android x86 镜像文件:你需要在 Android x86 官网上下载最新的 Android x86 镜像文件,它是一个 ISO 文件,可以在电脑上安装 Android 系统。…

    2023-05-12 06:00:43
    0 12 80
  • android application类:如何使用Android Application类创建强大的应用

    Android Application类是Android应用程序的核心类,它提供了一个全局的上下文,可以被应用程序中的所有组件使用。它还提供了一些系统级别的服务,如活动管理、资源管理和内容提供者管理等。…

    2023-05-17 09:37:08
    0 13 50
  • android 关闭service:如何在Android中关闭Service

    示例示例android 关闭service的方法有两种:使用()方法:…

    2023-05-10 15:20:46
    0 62 27
  • ios系统字体:Experience the Power of iOS Fonts

    iOS系统字体是指iOS系统自带的字体,它们可以在iOS设备上使用,并且都是免费的。iOS系统字体包括:San Francisco,Helvetica Neue,Helvetica,Avenir,Gill Sans,Chalkboard,Courier,Verdana,Georgia,Times New Roman,Trebuchet MS,Apple Color Emoji,Symbol和Menlo。…

    2023-06-06 08:19:36
    0 39 12
  • ios内存管理从 ARC 到 MRC

    示例示例iOS内存管理是指在iOS应用程序中,管理内存的过程。iOS内存管理主要包括以下几个方面:内存分配:在iOS应用程序中,需要根据程序需要分配内存,以便存储数据。内存分配可以使用malloc()、calloc()、realloc()等函数来实现。…

    2023-05-10 02:02:13
    0 12 87
  • axios携带cookie:如何使用axios携带Cookie实现跨域请求

    示例示例axios携带cookie有两种方式:使用属性…

    2023-06-05 02:25:05
    0 59 94
  • android 分辨率适配:The Best Way to Adapt Your App for Android Devices

    Android 分辨率适配是指在不同分辨率的 Android 设备上,使用相同的代码可以实现同样的布局效果。Android 系统支持多种分辨率,如果我们想要在不同分辨率的设备上都能实现同样的布局效果,就需要进行分辨率适配。…

    2023-05-02 03:00:13
    0 96 18
  • ios是基于什么开发的:iOS开发基于Objective-C和Swift编程语言

    iOS是基于Objective-C和Swift开发的,Objective-C是一种面向对象的编程语言,而Swift是苹果公司推出的新一代编程语言。下面是一个Objective-C的简单代码示例:…

    2023-05-11 01:10:08
    0 61 37

发表评论

登录 后才能评论

评论列表(31条)