capacitor-community/photoviewer

PHOTO VIEWER

@capacitor-community/photoviewer

Capacitor 5

Note from the Owner

Start -->

I have been dedicated to developing and maintaining this plugin for many years since the inception of Ionic Capacitor. Now, at 73+ years old, and with my MacBook Pro becoming obsolete for running Capacitor 6 for iOS, I have made the decision to cease maintenance of the plugin. If anyone wishes to take ownership of this plugin, they are welcome to do so.

It has been a great honor to be part of this development journey alongside the developer community. I am grateful to see many of you following me on this path and incorporating the plugin into your applications. Your comments and suggestions have motivated me to continuously improve it.

I have made this decision due to several family-related troubles that require my full attention and time. Therefore, I will not be stepping back. Thank you to all of you for your support.

End <--

Capacitor community plugin for Web and Native Photo Viewer allowing to open fullscreen

- a selected picture from a grid of pictures with zoom-in and sharing features.

- a single picture with zoom-in and sharing features.

A picture can be acessed by image web url, base64 data or from internal device for iOS and Android.

- iOS

file:///var/mobile/Media/DCIM/100APPLE/YOUR_IMAGE.JPG
capacitor://localhost/_capacitor_file_/var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/Documents/photo1.jpg

- Android

file:///sdcard/DCIM/YOUR_IMAGE.JPG
file:///sdcard/Pictures/YOUR_IMAGE.JPG
http://localhost/_capacitor_file_/storage/emulated/0/Pictures/JPEG_20221001_113835_7582877022250987909.jpg

On iOS plugin, the creation of a movie from the pictures stored in the All Photos folder is now available.

Maintainers

Maintainer	GitHub	Social
Quéau Jean Pierre	jepiqueau

CAPACITOR 5 (Master)

For more info on releases:

Browser Support

The plugin follows the guidelines from the Capacitor Team,

Capacitor Browser Support

meaning that it will not work in IE11 without additional JavaScript transformations, e.g. with Babel.

Installation

npm install @capacitor-community/photoviewer
npx cap sync

Since version 3.0.4, modify the capacitor.config.ts to add the image location to save the image downloaded from an HTTP request to the internal disk.

const config: CapacitorConfig = {
  ...
  plugins: {
    PhotoViewer: {
      iosImageLocation: 'Library/Images',
      androidImageLocation: 'Files/Images',
    }
  }
  ...
};

export default config;

iOS

in Xcode, open Info.plist and add a new Information Property like Privacy - Photo Library Usage Description and set a value to We need to write photos. This is required to have the Shareof images and the create Movie working.

Android

on the res project folder open the file_paths.xml file and add

    <files-path name="files" path="."/>

open the build.gradle (Project:android) and make sure that kotlin is declared

...
buildscript {
    ext.kotlin_version = '1.8.20'
    dependencies {
        ...
        classpath 'com.android.tools.build:gradle:8.0.0'
        classpath 'com.google.gms:google-services:4.3.15'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
...

open the build.gradle (Module: android.app) and do the following

after apply plugin: 'com.android.application' add

apply plugin: 'kotlin-android'
apply plugin: 'kotlin-kapt'

in the android block add

buildFeatures {
    dataBinding = true
}

in the repositories block add
```
maven { url 'https://jitpack.io' }
```

in the dependencies block add

implementation "androidx.core:core-ktx:1.10.0"
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

Now run Sync Project with Gradle Files and you are ready.

Web, PWA

The plugin works with the companion Stencil component jeep-photoviewer. It is mandatory to install it

npm install --save-dev jeep-photoviewer@latest

Build your App

When your app is ready

npm run build
npx cap copy
npx cap copy web
npx cap open android   // Android
npx cap open ios       // iOS
npm run serve          // Web

Supported methods

Name	Android	iOS	Electron	Web
echo	✅	✅	❌	✅
show	✅	✅	❌	✅
saveImageFromHttpToInternal	❌	✅	❌	❌
getInternalImagePaths	❌	✅	❌	❌

Documentation

API_Documentation

Applications demonstrating the use of the plugin

Usage

iOS and Android

In Gallery mode (Image Array with more than one Image):
- make a tap will select the image and go fullscreen
- In Fulscreen
  - tap will hide the share and exit buttons and open the window for other gestures.
  - double tap to zoom in and out
  - pinch with your two fingers
  - tap will show the share and exit buttons and leave the window for other gestures.
  - double tap will hide the buttons and zoom in straightforward (iOS only)
In One Image mode (Image Array with one Image only):
- pinch-zoom and pan with your two fingers
- double-tap to zoom directly to the maximum zoom
You can pass customHeaders in the options object to let the plugin pass those headers to the http request for the image. For example:

PhotoViewer.show({
  images: [
    {
      url: 'https://picsum.photos/id/237/200/300',
      title: 'Title'
    },
    {
      url: 'https://picsum.photos/id/238/200/300',
      title: 'Title'
    },
  ],
  options: {
    customHeaders: {
      accept: 'image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/*;q=0.8, */*;q=0.5',
      cookie: 'session=foo;',
    },
  },
  mode: 'slider'
})

Dependencies

The Android code is using MikeOrtiz/TouchImageView allowing for the zooming in picture (https://github.com/MikeOrtiz/TouchImageView)

The iOS code is using SDWebImage for http async image downloader (https://github.com/SDWebImage/SDWebImage) and ISVImageScrollView for the pinch-zoom and pan in picture (https://github.com/yuriiik/ISVImageScrollView)