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

- info_releases

- changelog

- issues

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

``bash
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.

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

export default config;


`


$3

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

$3

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

`xml

`

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

`js
...
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.

$3

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

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

$3

When your app is ready

`bash
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

$3

- angular-photoviewer-app

$3

- vue-photoviewer-app

$3

- vite-react-photoviewer-app

Usage

- In your Ionic/Vue App

- In your Ionic/Angular App

$3

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

`ts
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)

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!