Building a simple Instagram clone – An introduction to Image Transformations

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

When I talk to the customers that are relying heavily on Filestack to build, manage and grow their apps (along with their business), the overwhelming use case is allowing Filestack to handle their image assets upon upload and delivery. This post shows how easy it is to manage your photos by showing you how to construct URLs that perform one or more transformations and then how to build a app that applies filters to any uploaded photo.

I would imagine that if you polled 100 developers about the most difficult aspect of building beautiful looking apps, most (if not all) would respond with the unruly task of managing an increasing number of photos and other image assets, especially if they rely on user-submitted or user-generated content. Lucky for you at the heart of the Filestack platform is a powerful transformation engine that saves you a ton of work by managing your images, videos and other files in a meaningful, programmatic way.

The Basics

Image transformation might be a new concept for some developers and product managers. Let’s spend some time learning how to experiment with them right from your browser. Once we understand the basics, we’ll put it into action by building a simple Instagram-like app that applies multiple filters to an uploaded photo.

Our docs offer in-depth descriptions for all of the transformations Filestack makes available to you. For images, these range from basic things like cropping and rotating images via our Crop UI when users upload photos to far more advanced tools like facial detection and adding watermarks to your photos.

If your app handles or processes video content, we offer a list of video transformations that can be applied programmatically as well.

As simple as typing a URL

Really to dig into the full potential of our how transformation engine can optimize your app’s photographic workflows you need to see them in action. Fortunately, one of the new features of our file management platform is the ability to work with any file that is publicly accessible on the Internet using it’s URL. This means if you can type a URL into your browser, you have full access to Filestack’s transformation engine!

Filestack needs three pieces of information in order to transform images:

  1. Your API Key
  2. Conversion tasks and parameters
  3. The URL of the file

Filestack allows these values to be conveniently packaged into a single URL, making it extremely simple to test transformations in your browser (something we’ll do in moment) or to transform original images in a non-destructive way as they’re believing delivered to your end user.

Let’s deconstruct the following example URL:

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:750/https://d1wtqaffaaj63z.cloudfront.net/images/R0000403.jpg

All transformations are performed by passing the three required pieces of information to this sub-domain: https://process.filestackapi.com/

First is your application’s API key: AhTgLagciQByzXpFGRI0Az
We’re using a demo API key in this example. You would include your API key for your app.

resize=width:750 tells Filestack to resize the width of the image to 750 pixels.

And finally, we have the CloudFront URL of the original image, https://d1wtqaffaaj63z.cloudfront.net/images/R0000403.jpg, which if click you can see the original size of the image has a width of 1280 pixels and a height of 847 pixels. Compare this to the 496 x 750 of the transformed image.

You can experiment with all of Filestack’s image transformations right from your browser following this URL design!

See it in action!!

Filestack-agram

Want to see image transformation’s in action? Click on the link above to see a simple Instagram-like app that applies several of Filestack’s image filters to an uploaded photo and delivers them at a consistent size. This demo was built in less than an hour by using Filestack’s Image Filters and filepicker.pick method to dynamically create the URLs like the one above.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Read More →