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

Question

如果我转到 Safari 移动版 (iOS 11+) 浏览器并登陆 www.google.com - 我可以长按 google 的徽标（img 元素）并调用 "context menu":

现在我想对 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

有像LongPress

这样的插件

npm i ionic-long-press

然后运行 ActionSheet 插件

Answer 2

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

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 到 "save" 图像目前没有其他好的用户体验（下载基本上是在新的 window 中打开图像...）

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

How can I call context menu for image saving inside Ionic application?

safari

contextmenu

save-as

ios

ionic-framework