@dootix-developer/photoviewer
Capacitor 6 (experimental)
Disclaimer
We need this plugin for one of our apps. We are just applying the necessary changes to make it work with Capacitor 6 (see this capacitor-community#56 (comment)). As soon as the original plugin supports Capacitor 6, this repository will be dropped. Please do not rely on it.
Note from the upstream 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.
Maintainer | GitHub | Social |
---|---|---|
Quéau Jean Pierre | jepiqueau |
For more info on releases:
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.
npm install @dootix-developer/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;
- in Xcode, open
Info.plist
and add a new Information Property likePrivacy - Photo Library Usage Description
and set a value toWe need to write photos
. This is required to have theShare
of images and thecreate Movie
working.
- on the
res
project folder open thefile_paths.xml
file and add
<files-path name="files" path="."/>
- open the
build.gradle (Project:android)
and make sure thatkotlin
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'
addapply plugin: 'kotlin-android' apply plugin: 'kotlin-kapt'
-
in the
android
block addbuildFeatures { dataBinding = true }
-
in the
repositories
block addmaven { url 'https://jitpack.io' }
-
in the
dependencies
block addimplementation "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.
The plugin works with the companion Stencil component jeep-photoviewer
.
It is mandatory to install it
npm install --save-dev jeep-photoviewer@latest
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
Name | Android | iOS | Electron | Web |
---|---|---|---|---|
echo | ✅ | ✅ | ❌ | ✅ |
show | ✅ | ✅ | ❌ | ✅ |
saveImageFromHttpToInternal | ❌ | ✅ | ❌ | ❌ |
getInternalImagePaths | ❌ | ✅ | ❌ | ❌ |
- 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 outpinch
with your two fingerstap
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)
- make a
- In
One Image
mode (Image Array with one Image only):pinch-zoom
andpan
with your two fingersdouble-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'
})
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)
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!