如何在Ionic应用程序中调用上下文菜单进行图像保存？ [英] How can I call context menu for image saving inside Ionic application?

问题描述

如果我转到Safari移动版（iOS 11+）浏览器并登陆www.google.com-我可以长按Google的徽标（img元素）并调用上下文菜单：

If I go to Safari mobile (iOS 11+) browser and land on www.google.com - I can long press on google's logo (img element) and call "context menu":

现在，我想对Ionic页面中的img元素执行相同的操作（无论如何

Now I want to do the same for an img element inside Ionic's page (regardless whether its PWA or hybrid app).

我将如何实现？

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

I guess Ionic or Angular has a lot of configurations to prevent default behaviors for touch etc inputs, but since I see I can do it with google.com via normal browser I guess we can override some setting and achieve the same?

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

By default if I create a blank app and place any img into it I can get context menu on desktop but not on Safari mobile.

代码明智我看了谷歌的页面，这应该只是任何img元素，就像这样：

Code wise I looked at google's page and this should be just any img element, something like this:

<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还是离子型？

This does not work for ios 11 webview by default and I think its hammer.js or maybe ionic?

推荐答案

好的，我知道了如何做到这一点。
首先，请确保您没有在应用程序的contextmenu中阻止Default行为。例如，我在下面使用此代码来防止上下文菜单等怪异：

OK I figured out how to do this. So first thing - make sure you are not preventingDefault behavior on contextmenu in your app. For example I had this code below to prevent weird with context menu etc:

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

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

Now by default in your android app the long press (touch) over actual <img> will call a context menu which user can use to save image.

在iOS上，您还需要在图片上设置此CSS属性：

With iOS you also need to set this CSS prop on image:

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

使用此功能，您可以使用户调用上下文菜单以使用标准平台保存图像用户界面。我知道在iOS上没有其他好的UX可以立即保存图像（下载基本上是在新窗口中打开图像...）

With this you can achieve users calling the context menu to save images using standard platform UI. There is no other good UX I am aware off on iOS to "save" image right now (downloads basically open images in new window...)

这篇关于如何在Ionic应用程序中调用上下文菜单进行图像保存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！