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

Question

如果我去Safari移动（iOS 11+）浏览器并登陆www.google.com - 我可以长按google的徽标（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或者离子？

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上我没有其他好的用户体验现在可以“保存”图像（在新窗口中下载基本打开的图像......）