balance3840
PHOTO VIEWER
@capacitor-community/photoviewer
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.JPGcapacitor://localhost/_capacitor_file_/var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/Documents/photo1.jpg
- Android
file:///sdcard/DCIM/YOUR_IMAGE.JPGfile:///sdcard/Pictures/YOUR_IMAGE.JPGhttp://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 |
|---|---|---|
| Robin Genz | robingenz | @robin_genz |
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 syncSince 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.plistand add a new Information Property likePrivacy - Photo Library Usage Descriptionand set a value toWe need to write photos. This is required to have theShareof images and thecreate Movieworking.
Android
- on the
resproject folder open thefile_paths.xmlfile and add
<files-path name="files" path="."/>- open the
build.gradle (Project:android)and make sure thatkotlinis declared
...
buildscript {
ext.kotlin_version = '1.9.25'
dependencies {
...
classpath 'com.android.tools.build:gradle:8.8.1'
classpath 'com.google.gms:google-services:4.4.2'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
...open the
build.gradle (Module: android.app)and do the followingafter
apply plugin: 'com.android.application'addapply plugin: 'kotlin-android' apply plugin: 'kotlin-kapt'in the
androidblock addbuildFeatures { dataBinding = true }in the
repositoriesblock addmaven { url 'https://jitpack.io' }- in the
dependenciesblock addimplementation "androidx.core:core-ktx:1.15.0" implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
Now run
Sync Project with Gradle Filesand 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@latestBuild 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 // WebSupported methods
| Name | Android | iOS | Electron | Web |
|---|---|---|---|---|
| echo | ✅ | ✅ | ❌ | ✅ |
| show | ✅ | ✅ | ❌ | ✅ |
| saveImageFromHttpToInternal | ❌ | ✅ | ❌ | ❌ |
| getInternalImagePaths | ❌ | ✅ | ❌ | ❌ |
Documentation
Applications demonstrating the use of the plugin
Ionic/Angular
Ionic/Vue
React
Usage
iOS and Android
- In
Gallerymode (Image Array with more than one Image):- make a
tapwill select the image and go fullscreen - In Fulscreen
tapwill hide the share and exit buttons and open the window for other gestures.double tapto zoom in and outpinchwith your two fingerstapwill show the share and exit buttons and leave the window for other gestures.double tapwill hide the buttons and zoom in straightforward (iOS only)
- make a
- In
One Imagemode (Image Array with one Image only):pinch-zoomandpanwith your two fingersdouble-tapto 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)
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!