ios - 如何在 Ionic 应用程序中调用上下文菜单以保存图像？

Question

如果我转到 Safari 移动 (iOS 11+) 浏览器并登陆 www.google.com - 我可以长按谷歌的 Logo (img 元素)并调用“上下文菜单”:

现在我想对 Ionic 页面内的 img 元素执行相同的操作(无论它是 PWA 还是混合应用程序)。

我将如何实现？

我想 Ionic 或 Angular 有很多配置来防止触摸等输入的默认行为，但既然我看到我可以通过普通浏览器使用 google.com 做到这一点，我想我们可以覆盖一些设置并实现相同的目标？

默认情况下，如果我创建一个空白应用程序并将任何 img 放入其中，我可以在桌面上获得上下文菜单，但不能在 Safari 移动版上获得。

在代码方面，我查看了 google 的页面，这应该是任何 img 元素，如下所示:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Try to call context menu here:</h2>
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</ion-content>

默认情况下这不适用于 ios 11 webview，我认为它是 hammer.js 还是 ionic？

Answer 1

好的，我想出了如何做到这一点。所以首先 - 确保您没有阻止应用程序上下文菜单上的默认行为。例如，我在下面有这段代码来防止上下文菜单等出现奇怪的情况:

if ("oncontextmenu" in window) {
      window.oncontextmenu = (event) => {
        event.preventDefault();
        event.stopPropagation();
        return false;
      };
};

现在默认情况下，在您的 Android 应用程序中，长按(触摸)实际 <img>将调用用户可以用来保存图像的上下文菜单。

对于 iOS，您还需要在图像上设置此 CSS 属性:

img {
        -webkit-touch-callout: default !important;
        width: 100%;
        height: 100%;
    }

有了它，您可以实现用户使用标准平台 UI 调用上下文菜单来保存图像。我知道在 iOS 上没有其他好的 UX 可以立即“保存”图像(下载基本上是在新窗口中打开图像...)