terikon / cordova-plugin-photo-library Goto Github PK

The thumbnails that are returned are being rotated 90 degrees counter-clockwise, but cropped correctly.

Here is a snip of code that is producing the error:

  const photoLibrary = window.cordova.plugins.photoLibrary;
  photoLibrary.getLibrary(
    items => {
      // do stuff
    },
    error => {
      console.log('Error loading library:', error);
    },
    {
      thumbnailWidth: 924,
      thumbnailHeight: 520,
      quality: 0.8,
    }
  );

It's cool if I can add this feature.
Maybe copy https://github.com/SuryaL/cordova-gallery-api getAlbums

iOS build fails on build.phonegap.com, log output attached.
build.zip

I have read that using infinite scroll seems like a good way of loading thumbnails quickly when there are thousands in the gallery.

However I have no problem with the speed that the first thumbnails load, just the order they do it in.

The oldest thumbnails - the ones you see only once you scroll to the bottom of the gallery - load first and very quickly (about 8 a second). How can I make it load from the top (newest) thumbnails first instead of oldest/bottom first?

I added this plugin to my project, and it works great for iOS, but Android will no longer build. I am getting:

/MyProject/platforms/android/src/com/terikon/cordova/photolibrary/PhotoLibraryService.java:78: error: diamond operator is not supported in -source 1.6
    ArrayList<JSONObject> results = new ArrayList<>();

Am I missing something?

Thanks!

In your plugin, I can search all pictures (getLibrary), save picture or video (thanks a lot for all of this).

It's possible to search videos?

i tested to upload photo on ios and android. android is very good. but ios can not upload.

error is..
FileTransferError
body: null
code: 1
exception: null
http_status: null
source: "cdvphotolibrary://photo?photoId=67E3D042-F2D7-4FC2-A205-
AE5E27A95336%2FL0%2F001"

how can i upload photo on ios?
sorry for not good English.

using the plugIn on ionic 2 + angular 2 the promise resolves an object
Blob {size: 1015926, type: "image/jpeg", slice: function}'
and not the expected blob string

Excellent plugin, I hope it becomes part of the native plugins soon, I'll contribute where possible (and will look into making the wrapper)!

Just a small issue, I think it is related to CSP and Angular 2 (thus Ionic 2), but I can't get thumbnails to be displayed without sanitizing the URL's. When doing so, the whole <meta> tag is not required anymore, therefore it feels wrong but it is the only way I got it working. Maybe I'm missing something... I posted my current solution below.

<!-- without sanitizing, the following error shows up in the console -->
Refused to load the image 'unsafe:cdvphotolibrary://thumbnail?...height=384&quality=0.8' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: cdvphotolibrary:".

<!-- not required when sanitizing your URL's, therefore it feels "wrong" -->
  <meta http-equiv="Content-Security-Policy" 
        content="default-src 'self' data: gap: https://ssl.gstatic.com; 
                 style-src 'self' 'unsafe-inline'; 
                 img-src 'self' data: blob: cdvphotolibrary:"> 

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

...

list: Array<string> = new Array();
constructor( private ds: DomSanitizer) { }

...

var self = this;
cordova.plugins.photoLibrary.getLibrary(
      function (library) {

        library.forEach(function (libraryItem) {
          // sanitize, else Angular 2 prepends: "unsafe:"
          let url: SafeUrl = self.ds.bypassSecurityTrustUrl(libraryItem.thumbnailURL);
          self.list.push(<string>url);
         
        });

      },
      function (err) { },
      {
        thumbnailWidth: 512,
        thumbnailHeight: 384,
        quality: 0.8
      }
);

WKWebView still does not provide support for custom schemas. See this issue.
This seems to be completely in hands of apache/ionic. Nevertheless, if such support will appear, it will significantly improve performance of cordova-plugin-photo-library on iOS.

What is the fastest way of getting one or more random photos from the library?

with knowledge of iOS and Swift. That's where most development needed.
I need to focus on my current project (no cordova), but want to keep this library alive.

Love your plugin, and it works pretty well with Ionic.

I am trying to make this work with the Crop plugin (https://github.com/jeduan/cordova-plugin-crop), which takes in an absolute URL of an image.

Is there a way I can resolve the "cdvphotolibrary://" URL into a "file://" URL?

With this plugin, my app immediately requests access to Photos. The photos a user will save typically won't come up until they've used the app a bit more, so I'd rather only request the permission when they first try to save an image from the app.

I've looked through the code, but am not too familiar with Swift or iOS development, so I'm not sure what exactly triggers this first prompt - there don't appear to be any calls to requestAuthorization. I'm guessing that the instantiation of PHCachingImageManager or something like that automatically causes the system to bring up the prompt?

I'm happy to work on a PR for this, but am at a bit of a loss as to where to begin! Any guidance would be great. Thanks!

The returned photo object's thumbnailURL is showing the default quality in the URL instead of the one passed into options:

cdvphotolibrary://thumbnail?photoId=98%3B%2Fstorage%2Femulated%2F0%2FDCIM%2FCamera%2F20161109_164248.jpg&width=924&height=520&quality=0.5

Here is a snip of code that creates the error:

  const photoLibrary = window.cordova.plugins.photoLibrary;
  photoLibrary.getLibrary(
    items => {
      // do stuff
    },
    error => {
      console.log('Error loading library:', error);
    },
    {
      thumbnailWidth: 924,
      thumbnailHeight: 520,
      quality: 0.8,
    }
  );

Hi there! I'm really excited to give this plugin a try, but was wondering if you have an example of how to use it with the types you've created? So for instance, would I import something like this:

import PhotoLibraryCorova from 'cordova-plugin-photo-library'

... I tried this and it didn't seem to work, but I'm pretty sure I'm not doing it correctly, ha.

Thanks for your time!

Hi there, I have a blob or an HTMLImageElement (both versions are possible) that I need to write to my gallery. It is mandatory to convert to base64 or is there a way to directly write the object to the gallery ? converting to base64 takes up a lot of memory (its a 22MB animated GIF blob)

thanks

I want to use the 'saveVideo' function in this library to save a remote mp4 video to the iOS Video gallery

I forked the demo project and added a simple text input for a remote url and a save button

Lothrazar/photo-library-demo-ionic2@cf3dca0#diff-cee9e659d51e33fd1c3c22b4d9da7bd2R39

Please advise if I am using saveVideo incorrectly. It sounds like its trying to put a video in a "photo/image gallery" and being rejected. but on iOS in my gallery there are lots of working Videos

hi. thank you for your plugin.

i hava problum.

i used this and transfer plugins. i want to upload photo.

I tried it several times with the photoURL.

how can i used photoURL and upload file??

Currently getLibrary returns all photos on device.
It would be nice to add an option to select only specific albums.

Hello everyone,
How can i download the photo source (base64) from the photoURL?

I tried with cordova.plugins.photoLibrary.getPhoto function, as well as reading photoURL with XHR request, and neither way does return file with EXIF info. Only EXIF info that I see is:

Orientation - Right top
ExifOffset - 38
ColorSpace - sRGB
ExifImageWidth - 2576
ExifImageHeight - 1932

Is there way to retrieve all EXIF info from photo, like location, date/time taken, camera type... etc... all?

Call getThumbnail(), and get thumbnail blob.
But the provided blob is very low-quality image by ignoring thumbnailWidth, thumbnailHeight and quality.

PHCachingImageManager
requestImage(for:targetSize:contentMode:options:resultHandler:)
This method is explained as following

By default, this method executes asynchronously. If you call it from a background thread you may change the isSynchronous property of the options parameter to true to block the calling thread until either the requested image is ready or an error occurs, at which time Photos calls your result handler.
For an asynchronous request, Photos may call your result handler block more than once. Photos first calls the block to provide a low-quality image suitable for displaying temporarily while it prepares a high-quality image. (If low-quality image data is immediately available, the first call may occur before the method returns.) When the high-quality image is ready, Photos calls your result handler again to provide it. If the image manager has already cached the requested image at full quality, Photos calls your result handler only once. The PHImageResultIsDegradedKey key in the result handler’s info parameter indicates when Photos is providing a temporary low-quality image.

I think that deliveryMode is changed to .highQualityFormat because result handler is called once.

        thumbnailRequestOptions.deliveryMode = .highQualityFormat

What do you think?

Sorry my English.

var doUIChanges = function(library) {
  library.forEach(function(libraryItem) {
      $("#gallery").css("display", "none");
      image = "<img height='100px' width='100px' src='"+libraryItem.thumbnailURL+"' style='margin: 5px' />";
      $(image).appendTo(document.body);
  });
};
$("#gallery").on("click", function() {
  cordova.plugins.photoLibrary.getLibrary().then(doUIChanges);
});

Hello,
I found this plugin, hoping to create my own grid with checkboxes on selected images and so on, but why would it take this long?

It's an idea for new feature

Hi,
i have put a videos in the www/videos folder (.mov)
and i want to save it to photos gallery
is it possible ?
thanks

Hi, first thanks for an awsome library. Works great.

I'm trying to save an gif on the gallery but it's saved as an static image.

Is there any workaround ?

Here's the url of the image I'm trying to save as gif: http://i.imgur.com/WI1A58C.gif

Hello,

All of a sudden I began getting the below error.

I looked into the .app, and it isn't there. I always do cordova prepare ios prior to running.

Hello,
Although the code at https://jsfiddle.net/kartagis/pjdqp3ku/6/ loads up the images instantly on Android, it stalls at ActivityIndicator.show() on iOS, resulting in not showing any images.

1. Is there way to use this plugin together with wkwebview? As it seems that cdvphotolibrary: cannot be accesed from wkwebview, at least not in ios10. Yes, I added it in CPS meta tag, as you suggesting, but it seems that wkvebview is ignoring it.
2. Is there plan to convert it to latest swift 3.0 code, because in latest Xcode 8, you can not build project anymore, unless you change a bunch of things.

Hi,
I want to bypass compressing video popover after selecting video. i want to bypass this process. I want original video which i imported from gallery.
Thanks

Hi and congrat for the plugin.
On Android, I'm getting message "Permission Denial: This application is not allowed to access Photo data"
when i try to save a video to the library.
It's an mp4 file previously downloaded using filetransfer plugin to directory cordova.file.externalDataDirectory (given by the file plugin)
The file is downloaded and in fact it is on the supposed directory...
then i execute

                cordova.plugins.photoLibrary.saveVideo(store + fileName, 'MyAppName', 
                    function () { console.log('Yeah?');}, 
                    function (err) { console.log('No!'); console.log(err);});

And that is when i get error.

In the manifest file i can see...

Any ideas on what's going on?

Many thanks.

Hi,

This is my code

document.addEventListener("deviceready", function() {
  ActivityIndicator.show("Galeri yükleniyor, lütfen bekleyin");
  cordova.plugins.photoLibrary.requestAuthorization(function() {
    readLibrary();
  },function(err) {
    console.log(err);
  });
});
function readLibrary() {
  var st=new Date().getTime();
  cordova.plugins.photoLibrary.getLibrary(function(res){
    var et=new Date().getTime();
    var diff=et-st;
    alert(diff);
    ActivityIndicator.hide();
    var library=res.library;
    library.forEach(function(libraryItem){
      var st=new Date().getTime();
      image = "<div class='imgHolder'><img height='100px' class='img' width='100px' src='"+libraryItem.thumbnailURL+"' style='margin: 5px' /></div>";
      $(image).appendTo($("#images"));
    });
      var et=new Date().getTime();
      var diff=et-st;
      alert(diff);
  });
}

On iOS, I get alert() but never the images. Also, the last diff reports 11000~ ms (again on iOS)

Hello,
I'm looking for a way to read images as Blob so I can append them later to FormData. I could do it via cordova-plugin-file, but I'd be interested to know if there is a way to do with this plugin.

when i using this plugin on IOS, there have two problems accour. No.1 i cant get the permission to access the gallery which belongs to celephone. No.2 when i have the permission to access the gallery as long as i use the plugin flash back accour

Hi,
It would be great if saveImage returns saved file url or FileEtry.
Thanks

On my android 7.1.1

I would like make more test on others devices.

cordova plugin add cordova-plugin-photo-library --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="To choose photos" --save

returns

Error: undefined is not a function

This error also occurs when I try to build the app.

Occurs when building iOS or Android. I removed/added platforms.

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v0.12.2
Xcode version: Xcode 8.0 Build version 8A218a

Any ideas? I would love to use this plugin.

Dear Sirs. I added the plugin, following the instructions on the README file from MASTER but when I run on Android, the App, it crashed, saying that the App has stopped working.

I tried to read the logcat file, but can't understand or find where the problem could be.

Can someone instruct me how to make it work in Android ? Under iOS is working perfectly.
Can someone instruct me how to find the lines on logcat to help find the problem ?

Environment:

• Mac
• Ionic v1
• Using Cross-browser plugin and others

Thanks. Cassio

1. Images returned from this plugin are not showing up. Also from the Ionic2 demo project.
   @viskin you said that the demo project is showing pictures on your iOS device. But I see that in index.html (in demo project) you did not include the CSP mentioned in Readme. I tried with CSP and without CSP (ink. pipe for sanitizing the url), but no luck whatsoever. I think the problem relies on this (ie. CSP) since the photos are showing up in the iPhone simulator, just not in real device. Is it necessary to change any settings in XCode btw ?

2. @viskin You mentioned somewhere that you are using CropperJS in combination with this plugin, in some of your projects. I noticed that for big sized images (ca. 4MB), it takes about 3-5sec for the image to load. However, Im passing the base64 image into it (since I cant make it work with FILE_URI/ NATIVE_URI), so maybe thats the case. Can you help me with the approach you took, to optimize this step a little? I think If you could just pass the NATIVE_URI/FILE_URI into cropperJS, it would be significantly faster, since theres no need to convert it into base64.

I would appreciate some thoughts here ... Thank You in Advance

I would like to implement a multi-image uploader in ionic. Currently (single picture upload) I'm using https://github.com/apache/cordova-plugin-file and https://github.com/apache/cordova-plugin-file-transfer to do the upload. It looks like with this library I would have to convert the pictures to base64, which I would like to avoid.

Is there any way to get the native location / resource URI of the pictures with this plugin?

I make a call to getLibrary similar to this:

var width = 256;
PhotoLibrary.getLibrary({thumbnailWidth: width})

Photos don't maintain aspect ratio when being resized. Is there a temporary workaround, or better solution to do what I'm trying to do? I know that I can pass in a thumbnailHeight, but that stretches the image.

Edit: Nevermind, this issue appeared related to my CSS, not this library itself.

I am getting error like

/storage/emulated/0/Android/data/com.ionicframework.maapp301549890139879898799/files/mobapp/images/IMG-1493259358390.jpg: open failed: ENOENT (No such file or directory)

I'm trying to get this library to work for the first time on Ionic.

I run the sample code inside my Ionic app built on an iOS 10 device, connected to Xcode:

cordova.plugins.photoLibrary.getLibrary(
        function (library) {
          $log.debug('library',library);
          // Here we have the library as array

          library.forEach(function(libraryItem) {
            $log.debug(libraryItem.id);          // Id of the photo
            $log.debug(libraryItem.photoURL);    // Cross-platform access to photo
            $log.debug(libraryItem.thumbnailURL);// Cross-platform access to thumbnail
            $log.debug(libraryItem.filename);
            $log.debug(libraryItem.width);
            $log.debug(libraryItem.height);
            $log.debug(libraryItem.creationDate);
            $log.debug(libraryItem.nativeURL);   // Do not use, as it is not accessible on all platforms;

          });

        },
        function (err) {
          $log.error('Error occured',err);
        },
        {
          thumbnailWidth: 512,
          thumbnailHeight: 384,
          quality: 0.8
        }
      );

In the Xcode console, the following errors appear, and after about 30 secs Xcode 'loses connection' with the app because it quits. I guess this could be iOS killing the app for generating too many errors? But how do I avoid these errors (many hundreds are generated until the app crashes):

Failed to load image data for asset <PHAsset: 0x100c896c0> 7BE3559A-45F5-4182-8635-C81284D4CF03/L0/001 mediaType=1/0, sourceType=1, (2448x3264), creationDate=2016-07-13 23:09:13 +0000, location=0, hidden=0, favorite=0 with format 9999
2016-11-12 11:57:23.065292 Hisgeogram[6153:1488288] [Generic] Failed to load image data for asset <PHAsset: 0x100c89d50> 76494272-6B94-4053-91E9-D08C78F0F5D3/L0/001 mediaType=1/0, sourceType=1, (2448x3264), creationDate=2016-07-14 02:23:27 +0000, location=0, hidden=0, favorite=0 with format 9999

I have no idea what is going on, appreciate any tips.

Cordova CLI: 6.4.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

I think attaching album name to each libraryItem that returned from getLibrary is very useful.
Should be implemented on both iOS and Android.

There is no support for cordova.plugin.file about cdvfile.

Is this feature in future plan?