@capacitor-community/photoviewer

摄影师

@capacitor-community/photoviewer

Web 和 原生相片查看器的电容社区插件, 允许打开全屏

- 从带有缩放和共享功能的图片网格中选择的图片.

- 一张有放大和分享功能的相片.

图片可以通过图像web url,base64数据或内部设备为iOS和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 - 机器人 - 机器人 - 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

在 iOS 插件上,从存储在 所有照片 文件夹现已可用.

维护者

浏览器支持

插件遵循来自 Capacitor Team, (中文(简体) ),

• Capacitor 浏览器支持

意思是,如果没有额外的 JavaScript 转换, 它将无法在 IE11 中工作, 例如: 宝贝。 。 。 .

安装

npm install @capacitor-community/photoviewer
npx cap sync

自3.0.4版本以来 capacitor.config.ts 添加图像位置,将从 HTTP 请求下载的图像保存到内部磁盘.

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

export default config;

iOS系统

• 在 Xcode 中,打开 Info.plist 并添加新的信息属性, 如 Privacy - Photo Library Usage Description 设置值为 We need to write photos。这需要具备 Share图像和图像 create Movie 工作时.

机器人

• 编辑 res 工程文件夹打开 file_paths.xml 文件并添加

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

• 打开 build.gradle (Project:android) 并确保 kotlin 声明

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

• 打开 build.gradle (Module: android.app) 并做下列工作:

  • 之后 apply plugin: 'com.android.application' 添加

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

  • 输入 android 块添加

    buildFeatures {
        dataBinding = true
    }
    

  • 输入 repositories 块添加

    maven { url 'https://jitpack.io' }
    

  • 输入 dependencies 块添加

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

• 现在跑 Sync Project with Gradle Files 你准备好了.

PWA网络

插件与相伴的 Stencil 组件一起工作 jeep-photoviewer。 。 。 . 一定要安装

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

构建您的应用程序

当你的应用程序准备好了

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

支持的方法

文档

API 文档

显示插件用途的应用程序

离子/角

• 角-相机查看器-应用程序

音响/声调

• vue- photoviewer - app 图像查看器

反应

• vite- react-相片查看器-应用

使用量

• 在您的离子/ Vue App中

• 在您的离子/角相上

iOS和Android 软件

• 单位 Gallery 模式(图像分数不只一个) :
  • 制作一个 tap 将选择图像并进行全屏
  • 在富尔屏幕中
    • tap 将隐藏共享和退出按钮并打开窗口用于其他手势.
    • double tap 缩放
    • pinch 用你的两只手指
    • tap 将显示共享和退出按钮,并将窗口留给其他手势.
    • double tap 将隐藏按钮并缩放为直截了当(只有iOS)
• 单位 One Image 模式(只包含一个图像的图像矩阵) :
  • pinch-zoom 财务报告和审定财务报表 pan 用你的两只手指
  • double-tap 直接缩放到最大缩放
• 您可以在选项中通过自定义信头对象, 让插件将这些信头传递给 http 图像请求 。 例如:

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'
})

依赖关系

Android 代码正在使用 MikeOrtiz/TouchImageView 使图片缩放https://github.com/MikeOrtiz/TouchImageView 页面存档备份,存于互联网档案馆(中文(简体) )

IOS 代码正在使用 SDWebImage 用于 httpasync 图像下载器 (https://github.com/SDWebImage/SDWebImage 页面存档备份,存于互联网档案馆和 ISVImageScrollView 图片中的相片和相片https://github.com/yuriik/ISVImage 互联网档案馆的存檔,存档日期2013-12-22(中文(简体) )

贡献者

感谢这些伟大的人emoji 密钥:

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!