This is another mashup showing how to edit 15 pictures from Flickr “on-the-fly” and make them display one after the other on an Image Fader. You can check the full mashup application here.

Popfly is the fun and easy way to build and share mashups, gadgets, and Web pages. It’s made up of online visual tools for building Web pages and mashups and a social network where you can host, share, rate, comment and even remix creations from other Popfly users.

This is such a great platform and we thought it would be a great idea to create a “block” on Popfly, to give other users the ability to edit pictures “on-the-fly” via our API (Application Programmable Interface). This kind of functionality really shows the power of our service as well as how we are different from all the other online photo editors out there. Its simply amazing the kinds of mashups that can be created!

Below is a screenshot of the settings for our Block which is found under the heading “Images and Video”:

As you can see, our edit operation takes two inputs, namely url (which is the internet URL of the image that you would like to edit) and filters (which are the transformations you would like to make to the picture. By default we make the picture black & white and add a little contrast).

Below is an explanation of some of the other filters that you can use to transform your pictures on Popfly.

Black & White
This is the filter used in the example I provided and it would make the picture as you can imagine black & white.

grayscale:;

Sepia Tone
Applies a sepia tone to the picture, this filter takes no parameters.

sepia:;

Invert Colors
Inverts the colors in the picture, this filter takes no parameters.

invert:;

Adjust Contrast
Adjusts the contrast level of the picture, the max level is 100, the min level is -100

contrast:level(15);

Adjust Brightness
Adjusts the brightness level of the picture, the max level is 255, the min level is -255

brightness:level(50);

Emboss
Embosses the picture, grayscale parameter is boolean

emboss:grayscale(true);

Adjust Hue
Adjusts the hue degree of the picture, the min degree is 0, the max is 180

hue:degree(20);

Color Picture
Adjusts the colors in the picture, max values for each parameter is 255, min values are -255

color:red(90) blue(20) green(10);

Rotate Picture
Rotates the picture between 0-360 degrees, keepsize parameter is boolean and determines whether to keep the original picture size during the rotate or not. The backbrush parameter allows you to set the background color (currently white)

rotate:angle(45) keepsize(false) backbrush(solid(#ffffff));

Resize Picture
Resize the picture to a specific width and height

resize:width(300px) height(400px);

Resize the longest side of the picture to a particular length

resize:longestside(400px);

Resize the shortest side of the picture to a particular length

resize:shortestside(400px);

Resizes the width (only) of the picture to a particular length

resize:width(200px);

Resizes the height (only) of the picture to a particular length

resize:height(200px);

Drop Shadow
Add a SOFT drop shadow to the bottom RIGHT of the picture

shadow:color(#000000[75%]) backbrush(solid(#ffffff)) softness(4) distance(0px) imagex(0%) imagey(0%) ;

Add a SOFT drop shadow to the bottom LEFT of the picture

shadow:color(#000000[75%]) backbrush(solid(#ffffff)) softness(4) distance(0px) imagex(100%) imagey(0%) ;

Add a HARD drop shadow to the bottom RIGHT of the picture

shadow:color(#000000[75%]) backbrush(solid(#ffffff)) softness(0) distance(4px) imagex(0%) imagey(0%) ;

Add a HARD drop shadow to the bottom LEFT of the picture

shadow:color(#000000[75%]) backbrush(solid(#ffffff)) softness(0) distance(4px) imagex(100%) imagey(0%) ;

Opacity
Makes the picture opaque or semi-transparent based upon the level (max 100%) and the background (currently white)

opacity:level(75%) backbrush(solid(#ffffff));

Sobel (Sketch)
Applies a sobel sketch of the picture, grayscale parameter is boolean

sobel:grayscale(true);

Kuwahara (Painting)
Makes the picture look like a kuwahara painting, min block value is 1, max block value is 10

kuwahara:block(3);

How to use the filters on the Block?

You can combine any of the filters listed above to perform a transformation to the picture that you specified in the “url” field of the block. For example, if you wanted to apply a sepia tone and then a 60 degree rotation to the picture, the “filters” value on the block would be:

sepia:; rotate:angle(60) keepsize(false) backbrush(solid(#ff0000));

That’s about all the basic information you need to get started using our block, if you have any questions or comments please feel free to let us know via our contact page here.

In the last update, we’ve made some major changes to our previous selection tool. The next time you either go to perform a crop, add text or a caption, blur or pixelate the picture, you will notice the new selection tool (UI). We used the Javascript Image Cropper UI, using Prototype & script.aculo.us over at www.defusion.org.uk. Many thanks to the folks over there for providing such a fantastic tool! It just works perfect and exactly how we wanted it to.

Below is a screen shot of our implementation during an image crop:

To try it for yourself, next time you go to edit a picture, try using the Crop, Caption, Gaussian Blur or Pixelate tools.

Enjoy!