如何显示 Cordova PhotoLibrary 返回的图像？

Posted 2023-03-13

【中文标题】如何显示 Cordova PhotoLibrary 返回的图像？

【英文标题】：How to display images returned by Cordova PhotoLibrary?

【发布时间】：2018-04-17 06:00:08

【问题描述】：

我似乎无法在 android 上的图片库中显示图片。 PhotoLibrary 插件返回文件列表，但是当我将图像 URL 提供给 img 标签时，它们不会加载。

            window['cordova']['plugins']['photoLibrary'].getLibrary(
                result => console.log(libraryItem),
                err => console.log(err);
                ,
                
                    thumbnailWidth: 512,
                    thumbnailHeight: 384,
                    quality: 0.8,
                    includeAlbumData: true
                );

这将检索图像的 URL，但它们不能用于实际显示它们。我得到类似的东西：

creationDate: Fri Nov 03 2017 20:06:01 GMT-0400 (EDT)
fileName: "2017-10-4-1.jpg"
height: 960
id: "1907;/storage/emulated/0/Pictures/Timelapser/2017-10-4-1.jpg"
latitude: 0
longitude: 0
photoURL: "cdvphotolibrary://photo?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg"
thumbnailURL: "cdvphotolibrary://thumbnail?photoId=1907%3B%2Fstorage%2Femulated%2F0%2FPictures%2FTimelapser%2F2017-10-4-1.jpg&width=512&height=384&quality=0.8"
width: 1280

将photoURL 或thumbnailURL 馈送到img src 不起作用。我尝试decodeURI他们，使用;之前或之后的部分，什么都没有。

【参考方案1】：

你需要使用Native Photo Library插件和cdvphotolibrarypipe如下图。

这里正在工作Git project

html

<ion-grid no-padding margin-top>
    <ion-row class="row">
      <ion-col col-6 *ngFor="let data of library">
        <img [src]="data?.thumbnailURL | cdvPhotoLibrary">
      </ion-col>
    </ion-row>
  </ion-grid>

ts

  //fetch Photos
  fetchPhotos() 
    this.platform.ready().then(() => 
      this.library = [];

      this.photoLibrary.getLibrary( thumbnailWidth: THUMBNAIL_WIDTH, thumbnailHeight: THUMBNAIL_HEIGHT ).subscribe(
        next: (chunk) => 
          this.library = this.library.concat(chunk);
          this.cd.detectChanges();
        ,
        error: (err: string) => 
          if (err.startsWith('Permission')) 
            this.platform.ready().then(() => 
              this.photoLibrary.requestAuthorization( read: true )
                .then(() => 
                ).catch((err) => 
                  let message = 'requestAuthorization error: $err';
                  this.showToast.showErrorToast(message);
                );
            );
           else  // Real error
            let message: 'getLibrary error: $err';
            this.showToast.showErrorToast(message);
          
        ,
        complete: () => 
          // Library completely loaded
        
      );
    );
  

cdv-photo-library.ts (pipe)

import  Pipe, PipeTransform  from '@angular/core';
import  DomSanitizer  from '@angular/platform-browser';

@Pipe(
  name: 'cdvPhotoLibrary',
)
export class CdvPhotoLibraryPipe implements PipeTransform 

  constructor(private sanitizer: DomSanitizer)  

  transform(url: string) 
    if (url != null) 
      return url.startsWith('cdvphotolibrary://') ? this.sanitizer.bypassSecurityTrustUrl(url) : url;
    
  

【讨论】：

有谁知道如何使用 Quasar/Vue 和 Cordova 做到这一点？