@capacitor-community/photoviewer
TypeScript icon, indicating that this package has built-in type declarations

3.0.6 • Public • Published


PHOTO VIEWER

@capacitor-community/photoviewer


Capacitor 5

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,

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

Ionic/Angular

Ionic/Vue

React

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

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!

Package Sidebar

Install

npm i @capacitor-community/photoviewer

Weekly Downloads

1,098

Version

3.0.6

License

MIT

Unpacked Size

257 kB

Total Files

79

Last publish

Collaborators

  • ionicjs
  • danielprrazevedo
  • nkalupahana
  • dtarnawsky
  • ryaa
  • dallasjames
  • tafelnl
  • thegnuu
  • pbowyer
  • capcombot
  • jcesarmobile
  • maxlynch
  • mhartington
  • dotnetkow
  • it_mike_s
  • byrds
  • rdlabo
  • priyankpatel
  • dwieeb
  • stewan
  • arielhernandezmusa
  • jeepq
  • start9keagan
  • boosten
  • nklayman
  • ihadeed
  • ckgaparajita
  • jpender
  • nhyatt
  • pwespi
  • epicshaggy
  • thomasvidas
  • robingenz
  • diachedelic
  • johnborges
  • tobyas
  • elylucas
  • larsmikkelsen
  • giodimiliaionic
  • brownoxford
  • mrbatista
  • bazuka5801
  • hemang