loading
Pixo editor mobile screenshot, you have everything just like in Aviary editor

About Pixo

Pixo is a full-featured image editor available for integration into any web app. It is a great alternative of the popular Aviary editor. It supports basic editing such as applying filters, adding text, crop, rotate, etc., as well as more advanced editing such as adjusting RGB, brightness, contrast, hue, saturation, and more. Pixo supports all modern browsers and is available both for desktop and mobile.

Aviary alternative

Pixo offers similar API to Aviary, hence becoming great replacement of it.

Features

We constantly extend Pixo with the coolest features and functionality. Our base features include:

Add text to images, choose between various handsome fonts

Adjust multiple channels such as RGB, brightness, contrast, hue, saturation, and many more until you get the desired look

Apply pre-defined Instagram-like image filters

Features

Insert stickers to your images from a variety of collections

Free draw on top of your images

Remove red-eyes effect from your photos (coming soon)

Try Pixo

Test Pixo with your favourite images and see it in action!

Documentation

Pixo offers nice & easy to use API

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>

Latest blog posts

Follow our blog and get informed about our coolest latest features!