Provide your users with beautiful, easy to use and intuitive ...

Initialization

Add the following code to your application to initialize Pixo:

<img id="myimage" src="myimage.png" />
<script src="https://pixoeditor.com:8443/editor/scripts/bridge.m.js"></script>
<script>
   var image = document.getElementById('myimage');
   image.onload = function(){
      var editor = new Pixo.Bridge({apikey: 'abc123xyz000'});
      editor.edit(image);
   }
</script>

Constructor options

The constructor accepts options parameter. Here’s a list with all options, possible values and defaults:

• apikey (String) Required. This is your personal API key with which you can use Pixo editor
• type (String) Editor window type. Accepted values:
  • “window” Pixo opens in new browser window (default)
  • “modal” Pixo opens in a modal window overlaying the page
  • “child” Pixo opens nested in provided DOM element, as a child; requires parent parameter
• parent (DOM element) Parent DOM element in which to inject Pixo; applicable only when mode=”child”
• width (String) Editor’s width Default “100%”
• height (String) Editor’s height Default “100%”
• overlay (Object) Whether to show overlay below the editor or not, useful when dimensions are not full-size. Can contain the color property. Default null
  • color (String) The CSS color of the property. All CSS color values are valid. Default “rgba( 0, 0, 0, .3 )”
• styles (Object) Let’s you define your own look & feel of the editor. Default null
  • logosrc (String) URL to your custom logo, or “none”
  • canvasbgcolor (String) CSS color for the canvas background
  • editmenubgcolor (String) CSS color for the edit menu background
  • actionsmenubgcolor (String) CSS color for the actions menu background
  • propertiespanelbgcolor (String) CSS color for the properties panel background
  • textcolor (String) CSS color for all text
• onSave (Function) Callback, executed when the user finishes editing and clicks Save
• onCancel (Function) Callback, executed when the user cancels editing
• onClose (Function) Callback, executed when the editor window is closed

Instance methods

• edit Opens the editor with the passed image to edit as argument. The image can be of the following types:
  • Image
  • String (URL or Base64)
  • File
• cancelEditing Closes the editor

onSave callback

onSave callback accepts the edited image as argument. This argument is object with the following methods:

• toImage returns (Object) new Image element
• toDataURL returns (String) base64 encoded string of the image data
• toBlob returns (Blob) image data suitable for upload via FormData element

Example: edit image from the page

<img id="myimage" src="myimage.png" />
<script src="https://pixoeditor.com:8443/editor/scripts/bridge.m.js"></script>
<script>
   var image = document.getElementById('myimage');
   image.onload = function(){
      //create new Pixo instance
      var editor = new Pixo.Bridge({
         apikey: 'abc123xyz000',
         type: 'modal',
         onSave: function(arg){
            //replace image src with the new image data
            image.src = arg.toDataURL();
            //...or replace the entire image
            image.parentNode.insertBefore(arg.toImage(), image);
            image.parentNode.removeChild(image);
         }
      });
      editor.edit(image);
   }
</script>

Example: upload edited image

<script src="https://pixoeditor.com:8443/editor/scripts/bridge.m.js"></script>
<script>
   //create new Pixo instance
   new Pixo.Bridge({
      apikey: 'abc123xyz000',
      onSave: function(arg){
         //create FormData object and append the image to it
         var data = new FormData();
         //assuming that your backend accepts "image" POST parameter
         data.append('image', arg.toBlob());
         //create new XMLHttpRequest
         var request = new XMLHttpRequest();
         request.open('POST', 'http://yourdomain.com/path/to/upload.php');
         request.send(data);
      }
   }).edit('http://yourdomain.com/path/to/imagetoedit.jpg');
</script>