Giter Club home page Giter Club logo

image-editor-plugin's Introduction

image-editor-plugin

This plugin defines a window.imageeditorplugin object, which supplies an interface to take pictures with the camera, get a picture from the gallery or use a base64 string, allowing the user to crop that picture, add text, emojis, stickets and share that picture. The edited image is then exported as base64, ready to be saved to a database.

Available features

  • Crop an image
  • Add emojis
  • Draw lines with a wide range of colors
  • Add stickers (android only)
  • Add text with a wide range of colors
  • Share that image with anyone

Installation

cordova plugin add https://github.com/agoncalvesos/image-editor-plugin.git

editImageFromBase64

Opens the image editor main screen, allowing the user to use all the features, on the base64 passed as input parameter

window.imageeditorplugin.editImageFromBase64(base64, onSuccess, onError);

editImageFromCamera

Opens the phone camera allowing the user to take a photo and edit it right away

window.imageeditorplugin.editImageFromCamera(onSuccess, onError);

editImageFromGallery

Opens the phone gallery allowing the user to choose a photo and edit it right away

window.imageeditorplugin.editImageFromGallery(onSuccess, onError);

Description

This cordova plugin was created to be used inside an OutSystems plugin, and allows the user to edit an image. Functions editImageFromBase64, editImageFromCamera and editImageFromGallery return a base64 string that can be saved in a database or shown to the user

Supported Platforms

  • Android 4.0 +
  • iOS 9.0 +

Example

Create a button on your page

<button id="testeditorbase64">edit base64 image</button>
<button id="testeditorcamera">edit from camera</button>
<button id="testeditorgallery">edit from gallery</button>
<img id="base64image" height="400" width="600" src="data:image/jpeg,/base64string..."/>

Then add click event

document.getElementById(“testeditorbase64”).addEventListener(“click”, function(){
   imageeditorplugin.editImageFromBase64(document.getElementById(“base64image”).src, function(base64){
       document.getElementById(“base64image”).src = “data:image;base64, + base64;
   },onFail);
});
document.getElementById(“testeditorcamera”).addEventListener(“click”, function(){
   imageeditorplugin.editImageFromCamera(function(base64){
       document.getElementById(“base64image”).src = “data:image;base64, + base64;
   },onFail)
});
document.getElementById(“testeditorgallery”).addEventListener(“click”, function(){
   imageeditorplugin.editImageFromGallery(function(base64){
       document.getElementById(“base64image”).src = “data:image;base64, + base64;
   },onFail)
});

function onFail(message) {
      console.log('plugin message: ' + message);
}

Credits

Thanks to eventtus for the native source code for ios and android, available here: https://github.com/eventtus/photo-editor https://github.com/eventtus/photo-editor-android

image-editor-plugin's People

Contributors

agoncalvesos avatar luisbouca avatar andregrillo avatar houmanavo 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.