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

问题

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":

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

How would I achieve that?

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?

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.

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>

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

回答1:

There are plugins like LongPress

npm i ionic-long-press

and then just run ActionSheet plugin

回答2:

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;
      };
};

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.

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

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

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...)

来源：https://stackoverflow.com/questions/54857570/how-can-i-call-context-menu-for-image-saving-inside-ionic-application

标签

ios

ionic-framework

safari

contextmenu

save-as