Selfie.js

Selfie with Java Script

Install

bower

$ bower install selfie.js

npm

$ bower install selfie.js

How to use

<!-- add selfie.js -->
<script src="path/to/selfie.min.js"></script>

const s = selfie.init(options);
s.takePhoto(); // method to take photo.
s.removePhoto(); // method to remove photo.

Options (Everything is optional. Not necessary)

• option - (Object)
  • target - (Object) It shoud be 'Node Element'. Its default value is document.body.
  • fileName - (String) Set file's name. Default is 'selfie' and file extension is png.
  • downloadLinkText - (String) Set download link's text. Default is 'DOWNLOAD'.
  • camera - (Object) It is 'Video Element' for displaying camera.
    • id - (String) If you want to add ID to this node element, Specify it.
    • className - (String) If you want to add class to this node element, Specify it.
    • activeClass - (String) If you want to add class to node element when it is activated, Specify it.
    • unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.
  • store - (Object) It is 'Canvas Element' for save selfie temporarily.
    • id - (String) If you want to add ID to this node element, Specify it.
    • className - (String) If you want to add class to this node element, Specify it.
    • activeClass - (String) If you want to add class to node element when it is activated, Specify it.
    • unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.
  • photo - (Object) It is 'Image Element' for displaying selfie taken.
    • id - (String) If you want to add ID to this node element, Specify it.
    • className - (String) If you want to add class to this node element, Specify it.
    • activeClass - (String) If you want to add class to node element when it is activated, Specify it.
    • unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.
  • download - (Object) It is 'Anchor Element' for download selfie. It has 'download' attributes.
    • id - (String) If you want to add ID to this node element, Specify it.
    • className - (String) If you want to add class to this node element, Specify it.
    • activeClass - (String) If you want to add class to node element when it is activated, Specify it.
    • unactiveClass - (String) If you want to add class to node element when it is unactivated, Specify it.

Example

// Set options. It is not necessary.
const options = {
  target: document.getElementById('selfie-wrapper'),
  fileName: 'selfie',
  downloadLinkText: 'Click',
  camera: {
    id: 'selfie-camera',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-camera'
  },
  store: {
    id: 'selfie-store',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-store'
  },
  photo: {
    id: 'selfie-image',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-image'
  },
  download: {
    id: 'selfie-download',
    activeClass: 'active',
    unactiveClass: 'none',
    className: 'selfie-download'
  }
};

// Initialize
const s = selfie.init(options);

// take photo
document.querySelector('SELFIE_SHUTTER_BUTTON').onclick = s.takePhoto();

// remove photo
document.querySelector('REMOVE_SELFIE').onclick = s.removePhoto();

Licence

MIT