Как вызвать контекстное меню для сохранения изображения в приложении Ionic? - PullRequest
Новая
       19

Как вызвать контекстное меню для сохранения изображения в приложении Ionic?

0 голосов
/ 25 февраля 2019

Если я зайду в браузер Safari для мобильных устройств (iOS 11+) и зайду на www.google.com - я могу долго нажимать на логотип Google (элемент img) и вызывать «контекстное меню»:

enter image description here

Теперь я хочу сделать то же самое для элемента img на странице Ionic (независимо от его PWA или гибридного приложения).

Как бы мне этого добиться?

Я предполагаю, что Ionic или Angular имеет много конфигураций, чтобы предотвратить поведение по умолчанию для сенсорного ввода и т. Д., Но, поскольку я вижу, что я могу сделать это с google.com через обычный браузер, я думаю, мы можем переопределить некоторые настройки и добиться того же?

По умолчанию, если я создаю пустое приложение и помещаю в него любое изображение, я могу получить контекстное меню на рабочем столе, но не на мобильном браузере 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?

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

ОК, я понял, как это сделать.Итак, первое - убедитесь, что вы не предотвращаете поведение по умолчанию в контекстном меню вашего приложения.Например, у меня был этот код ниже, чтобы предотвратить странное с контекстным меню и т. Д .: 

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

Благодаря этому вы можете добиться того, чтобы пользователи вызывали контекстное меню для сохранения изображений с использованием стандартного интерфейса платформы.На iOS нет других хороших UX, чтобы «сохранить» изображение прямо сейчас (загружает в основном открытые изображения в новом окне ...)

0 голосов
/ 25 февраля 2019

Есть плагины, такие как LongPress 

npm i ionic-long-press

, а затем просто запустите ActionSheet плагин

...