Git Product home page Git Product logo

dan-leech / com.danleech.cordova.plugin.imagepicker Goto Github PK

View Code? Open in Web Editor NEW

This project forked from terikon/cordova-plugin-photo-library

3.0 2.0 0.0 4.57 MB

Cordova plugin that provide Native Photo/Video Gallery for iOS and Android

License: MIT License

Java 31.70% JavaScript 0.71% Swift 64.18% Objective-C 3.41%
cordova cordova-plugin cordova-android cordova-ios image-gallary image-picker native

com.danleech.cordova.plugin.imagepicker's Introduction

Cordova Instagram Image Picker plugin

Native Photo/Video Gallery for iOS and Android, inspired by Terikon

Totally rewritten to native components for Android and iOS.

Android screenshot

android-screenshot

iOS screenshot

coming soon

Install

cordova plugin add https://github.com/dan-leech/com.danleech.cordova.plugin.imagePicker

Android

Add cdvimagepicker protocol to Content-Security-Policy, like this:

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: ws: cdvimagepicker: https://ssl.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src * data: blob: cdvimagepicker: https://firebasestorage.googleapis.com">

iOS

Set swift 4.1 manually in xcode target build settings

Usage

Pick Images:

  cordova.plugins.ImagePicker.getPictures(images => {
    // do something with images      
  },
  err => {
    console.log('ImagePicker error:', err)
  }, { 
    selectedImages: selectedImages, 
    limit: 5, 
    thumbWidth: 500, 
    thumbHeight: 500, 
    thumbQuality: 100 
  })

Take image source:

Android
'cdvimagepicker://thumbnail?photoId=' + encodeURIComponent(img.id + ';' + img.path) + '&width=500&height=500&quality=100&cropX=' + img.cropX + '&cropY=' + img.cropY + '&cropW=' + img.cropW + '&cropH=' + img.cropH
iOS

You need to get blob and use it in createObjectURL Be careful with memory leak clean you url after using revokeObjectURL

function processImages (oldImages, images) {
  oldImages.forEach(function (img) {
    if (img._objUrl) {
      URL.revokeObjectURL(img._objUrl)
      img._objUrl = null
      img._blob = null
    }
  })

  images.forEach(function (img) {
    if (img.imageData) {
      let byteArray = new Uint8Array(img.imageData)
      let blob = new Blob([byteArray], {type: img.mimeType})

      img._blob = blob
    }
    if (img._blob) {
      img._objUrl = URL.createObjectURL(img._blob)
    }
  })

  return images
}

Get image data from iOS:

cordova.plugins.ImagePicker.requestPermission(() => {
   items.forEach(item => {
     promises.push(new Promise((resolve, reject) => {
       cordova.plugins.ImagePicker.getThumbnail(dataUrl => {
         if (!dataUrl) reject(new Error('Data is empty'))
           item._blob = dataURLtoBlob(dataUrl)
           item.id = 'image'
           resolve()
         }, err => {
           console.log('cordova.plugins.ImagePicker.getThumbnail err', err)
           reject(err)
         }, {
           photoId: 'image;' + item.path,
           width: 500,
           quality: 100,
           fit: true
       })
     }))
       console.log('item', item)
   })

     Promise.all(promises).then(() => { 
       // show images
      })
     .catch(err => { console.log('process images error', err) })
   }, () => {
     alert('Need photo library permission')
   })
}

function dataURLtoBlob (dataUrl) {
  let input = dataUrl.split(',')[1]
  input = input.replace(/\s/g, '') // remove spaces

  // let byteString = atob(unescape(encodeURIComponent(input))) // encoded url
  let byteString = atob(input)
  let mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  let ab = new ArrayBuffer(byteString.length)

  // create a view into the buffer
  let ia = new Uint8Array(ab)

  // set the bytes of the buffer to the correct values
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }

  return new Blob([ab], { type: mimeString })
}

Select video:

cordova.plugins.ImagePicker.getVideo(videos => {
  // do something with video
}, err => {
  console.log('ImagePicker error:', err)
}, { thumbWidth: 1920, thumbHeight: 1080, thumbQuality: 100 })

Play video:

use https://github.com/dan-leech/com.danleech.cordova.plugin.videoplayer

cordova.plugins.VideoPlayer.play(this.src)

Process video before play on iOS:

Video thumbnail:
cordova.plugins.ImagePicker.requestPermission(() => {
  items.forEach(item => {
    promises.push(new Promise((resolve, reject) => {
      cordova.plugins.ImagePicker.getThumbnail(dataUrl => {
        if (!dataUrl) reject(new Error('Data is empty'))
          item._blob = dataURLtoBlob(dataUrl)
          item.id = 'video'
          resolve()
        }, err => {
          console.log('cordova.plugins.ImagePicker.getThumbnail err', err)
          reject(err)
        }, {
          photoId: 'video;' + item.path,
          width: 1920,
          height: 1080,
          quality: 100
        })
    }))
    console.log('item', item)
  })

  Promise.all(promises).then(() => {
    // show thumbnail
  }).catch(err => {
    console.log('_checkSharedItems process images error', err)
  })
}, () => {
  alert('Need photo library permission')
})

Get video Blob

Android
'cdvimagepicker://photo?photoId=' + encodeURIComponent(payload.source.src.id + ';' + payload.source.src.path
iOS
new Promise((resolve, reject) => {
  cordova.plugins.ImagePicker.getPhoto(dataUrl => {
    if (!dataUrl) reject(new Error('Data is empty'))
    resolve(dataURLtoBlob(dataUrl))
  }, err => {
    console.log('cordova.plugins.ImagePicker.getPhoto video err', err)
    reject(err)
  }, {
    photoId: payload.source.src.id + ';' + payload.source.src.path,
    cropX: payload.source.src.cropX,
    cropY: payload.source.src.cropY,
    cropW: payload.source.src.cropW,
    cropH: payload.source.src.cropH
  })
  }).then(blob => {
    console.log('Video blob', blob)
}))

TODO

  • Improve documentation.
  • iOS switch orientation
  • iOS crash on big videos

References

Parts are based on

com.danleech.cordova.plugin.imagepicker's People

Contributors

andreasgassmann avatar dan-leech avatar fiahfy avatar kosssi avatar lentyaishe avatar menardi avatar viskin avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.