loading

Pixo Image Editor

Performance optimizations

Hi folks! We are happy to announce that this week we deployed a couple of performance optimizations, resulting in greater response on low-end hardware, such as old smartphones. Results of our tests showed that Pixo is now 4 times faster in terms of applying image effects, adjustments, and blur. These are great results!

Another great improvement is image saving. Pixo now detects if the saved image has transparency, and by default saves it as jpeg if no transparency detected, or as png otherwise. This results in very acceptable file sizes for photos. And to make you happier – you have full control over the output! With the new output setting you can define the output format, as well as quality:

  • output (Object) Settings for output image’s quality and format:
    • format (String) Image format (type), can be one of the following:
      • “auto” Default Detects if the image has alpha-transparent pixels, and sets format to jpeg (no transparency) or png
      • “input” Preserves the input format, but only in case it is jpeg or png. For any other format, the above behavior is applied
      • “jpeg” Forces jpeg format. Note: transparent pixels will appear black
      • “png” Forces png format. Note: output image may become very large (megabytes)
    • quality (Number) Value between 0 and 1, closer value to 1 results in higher quality, and vice-versa. Applies only if the output format will be jpeg image. Default 0.65

Example:

<script>
   new Pixo.Bridge({
      apikey: 'abc123xyz000',
      output: {
         format: 'jpeg', // Can be "auto" (default), "input", "jpeg", "png"
         quality: .85, // Value from 0 to 1, default 0.65
      },
   }).edit('http://yourdomain.com/path/to/imagetoedit.jpg');
</script>

Happy coding!

New cool blur effects

Hey there! We are actively working on a new end-user feature – adding blur effects to images! We will release them this Wed, April 3.

Here’s how it looks:

And here’s how these effects can be applied with ease:

Zoom blur

Here is a comparison of the zoom-blur effect (original image/with zoom-blur):

Tilt Shift blur

Release date

The new feature will be released this Wed, Apr 3.

Don’t want Blur in your product?

Then just exclude it from the feature set:

      new Pixo.Bridge({
         features: {
            excluded: [ 'blur' ], 
         },
      });

Happy coding!

New image filters are now available!

Hi folks,

We just added new cool image filters to our collection. Some of them are similar to Instagram’s most popular filters. We hope to make your users happier!

Filtering

As filters are getting more and more, users are now able to filter the collection by name, so they quickly find the filter they’re looking for:

Preview of the new Filters

Original image first, filtered image after:

Natural

Amarok

Klarendon

Mayfare

Larc

Autumn

Nightfall

Light

Dark

Hope you and your users enjoy them!

Network Maintenance 2019-03-19 10:00pm EDT/EST

Hello,

There will be upgrades of networking equipment in the datacenter where Pixo is hosted during this window:

Start: 2019-03-19 10:00pm EDT/EST (2019-03-20 02:00 UTC)
End: 2019-03-20 0:00am EDT/EST (2019-03-20 04:00 UTC)

Expected Impact: There may be a few minutes of increased latency as well as some packet loss. The network team will endeavor to keep this to a minimum for the duration of the change.

Update on recent changes

Hi folks,

Long time no hear… But we keep ourselves busy 🙂 Here’s a list with some recent improvements.

Improved loading

If you send to the editor url to image to be edited, the url’s domain should be either the same as your site, or should have CORS enabled. Pixo requires servers to serve images with CORS in order to be able to manipulate them. If you don’t have CORS, or don’t know what that is – don’t worry – we will proxy your image through our CORS proxies for you. Currently we have two proxies, and the fastest one (probably the closest to your customer) wins and loads the image. This leads to significant improvement in editor’s load time.

More proxies will be added soon, for even faster loading time!

Custom crop size

You asked for it, you got it – users can now specify crop size in px:

More customization styles

Together with the existing editor customization styles, you are now able to also configure:

  • editmenutextcolor (String) CSS color for edit menu icons and text
  • actionsmenutextcolor (String) CSS color for actions menu icons and text
  • propertiespaneltextcolor (String) CSS color for property panel text
  • buttonstextcolor (String) CSS color for property panel buttons text
  • buttonsbgcolor (String) CSS color for property panel buttons background

Example:

new Pixo.Bridge({
   styles: {
      editmenutextcolor: '#fc0',
      actionsmenutextcolor: '#cccccc',
      propertiespaneltextcolor: 'grey',
      // ...
   },
});

What’s next?

We are very close to the release of additional image filters. We are preparing a new collection of Instagram-like filters, to make your users happier. We expect to release them next week.

Stay tuned!

Configure your own custom image frames

Hi folks!

We’re glad to announce that you can now add custom image frames to your Pixo instances. To do that, provide a filterFrames function to editor’s configuration:

var my_frames = [
  {
     // This is the PNG image that will be used as frame. The larger size the better.
     // Required. The URL must be publicly accessible or CORS-friendly.
     src: 'https://yourdomain.com/path/to/image-frame.png',
     
     // This is the thumbnail image that will be shown in the property panel.
     // Optional. If missing "src" will be used.
     thumb: 'https://yourdomain.com/path/to/thumbnail-100x100.png',
     
     // Outer and inner dimensions.
     // Required.
     dimensions: {
        outer: [1920, 1080],
        inner: [1660, 880],
     },

     treshold: .3,
  },
  {
     src: 'https://yourdomain.com/path/to/large-image.png',
     thumb: 'https://yourdomain.com/path/to/thumbnail-100x100.png',
     dimensions: {
        outer: [1920, 1080],
        inner: [1660, 880],
     },
  },
]; 

var pixo_instance = new Pixo.Bridge({
  apikey: 'abc123xyz000',
  filterFrames: function(stock_frames){
     // replace stock frames with your own
     return my_frames;
     // or, merge them and place your at the top
     return my_frames.concat(stock_frames);
     // or, merge them and place your at the bottom
     return stock_frames.concat(my_frames);
     // or, mix them randomly
     return stock_frames.concat(my_frames).sort(function(){
        return Math.random() - 0.5;
     });
  },
});

Make sure that you follow our frame guidelines when designing and configuring your custom image frames.

Happy coding!

Pixo is now available in French!

Hi folks,

Our first translation in different language is already available! It is French (fr-FR). If you need Pixo translated to French, set the appropriate language:

new Pixo.Bridge({
   language: 'fr-FR',
});

Special thanks to Wallprint for translating.

If you want Pixo translated in your language, you can help!

Help us internationalize Pixo

Hi folks,

Pixo is used worldwide, and it will be great if it can be translated into multiple languages. That’s why we added ability to configure the editor in specific languageHowever, we lack of translations. Therefore, we kindly ask you to help us translate it.

How to help

  1. Download sample JSON translation file
  2. Rename the file according to IETF standard
  3. Add the translations
  4. Send us the translated file to admin (at) pixoeditor.com

New feature: Image Frame

Today we released a new functionality – ability to add image into a frame. There are a couple of stock frames to choose from, and more are about to come soon. You can see this new feature in action in our demo.

Why I don’t see the frames in my Pixo instance?

Frames are not enabled by default yet. To do this, you will have to enable them in the feature set like this:

      new Pixo.Bridge({
         features: [
            //enable the new Image Frame feature
            'frame',
            //you have to enable other available features
            'adjustments',
            'filters',
            'draw',
            'crop',
            'stickers',
            'text',
            'transform', 
         ],
      });

Frames are available but not enabled by default yet. As usual, we are giving you a transition period to update your configuration and to choose whether you want this new feature or not. After two weeks Frame feature will be enabled by default.

Enabling/disabling features

You asked for it – you got it. With this release, you can now include only the features you want and customize your editor. The new features configuration is array of feature IDs. Current list of features includes:

  • adjustments
  • filters
  • draw
  • crop
  • stickers
  • text
  • transform
  • frame

As array, you are also able to set the order of the features in the Edit menu.

If you want to include all available features, but exclude specific, the features configuration should be an object having excluded property (array):

      new Pixo.Bridge({
         //enable all available features except the advanced adjustments:
         features: {
            excluded: [ 'adjustments' ], 
         },
      });

What’s next

Alongside with current roadmap, soon we will provide API for configuring your own image frames. We are also working on translating Pixo Editor into multiple languages. Stay up to date by following our blog and/or keep subscribed for our newsletter.