jQuery integration

Overview

Amend is a Platform–as-a-Service (PaaS) solution hosted on cloud. Amend helps you manage your application’s image resources in the cloud without having to worry about scale and performance. The resources are delivered by high-performance servers through Content Delivery Network (CDN).

Resources are uploaded, managed, and transformed using amend’s easy to use APIs and SDKs. Infrastructure used for these operations is infinitely scalable for handling high load and bursts of traffic.

Quick example

Take a look at the following Amend URL that generates the image below:

sample image
150x150 JPG

By calling the above URL Amend is being instructed to transform the uploaded image and create a 150x150px thumbnail using face detection based cropping, round the image's corners, rotate the image by 20 degrees and then deliver resulting image through CDN.

jQuery Plugin Features

Amend provides a jQuery plugin (open source) for further simplifying the integration:

  • Build URLs for image transformation & manipulation.

  • Javascript helper methods for embedding and transforming images.

  • Direct image uploading from the browser.

jQuery - Getting started guide

1. Installation

Amend's Javascript integration library is available as an open-source jQuery plugin.

You can download jquery.cloudamend.js from the lib-amend folder of the GitHub project. In your HTML pages, include jquery.amend.js after including the jQuery library.

<script src ='jquery.min.js' type='text/javascript'></script>
<script src ='jquery.amend.js' type='text/javascript'></script>
https://github.com/amendcloud/amend_javascript

2. Configuration

Your amend_name account parameter is required to build image URLs. The access_key, access_secret is needed to perform direct uploading to Amend (e.g., image uploads).

Setting the configuration parameters can be done either programmatically in each call to a Amend method.

Here's an example of setting configuration parameters globally in your Javascript code:

Amend.setAmendName("my_amend_name");
Amend.setCredentials("my_access_key", "my_access_secret");

3. Upload images

You can upload images directly from the browser to Amend. Uploading is done over HTTP or HTTPS using a secure protocol based on the access_key and access_secret parameters of your account.

You can use Amend's helper methods for generating the signature in various server frameworks: .NET, PHP, jQuery, iOS and Android.

The following file code will use to upload image to cloud, all you need to mention input type file id e.g. 'fileUpload':

Amend.upload('fileUpload', function (resp) {
string url = resp.CDNUrl;
string imageName = resp.ImageName;
});

Users can upload one image at a time. Each image uploaded to Amend is assigned a unique Image Name and is available for immediate delivery and transformation. The upload method returns a hash with content similar to that shown in the following example:

{
    ImageName : "sample.jpg"
    Width : 450
    Height : 203
    Size : 2100    
    MimeType : "image/jpg"
    Resolution : 300
    CreatedDate : "2016-09-10T13:25:11Z"
    CDNUrl : "http://amend.cloud/test/image/sample.jpg"
    SecureCDNUrl : "https://amend.cloud/test/image/sample.jpg"
}

4. Display and manipulate images

Adding images to your html view is quite straightforward. Just use the Amend.load('baby', amendOptions).into("#img") helper method. This method generates the full image resource URL based on the given parameters and creates an IMG tag you can add to to your HTML code:

For example, displaying the uploaded image with the sample Image Name, while providing an alternate text:

var amendOptions = {"width":250, "height":168, "fit":Amend.FIT_FILL);
Amend.load('baby', amendOptions).into("#img")
Image fit fill with width 250 and height 168
250x168 JPG (Scaled down)

Consider a case where you wish to display a small thumbnail of the uploaded image. Simply add the transformation instructions to your call. For example, displaying the 'sample' image transformed to fill a 100x150 rectangle:

Amend.load('baby'sample.jpg', { width: 100, height: 150, fit: Amend.FIT_FILL });
Image fit fill with width 100 and height 150
100x150 JPG

This is equivalent to:

<img width="100" height="150" src="http:​/​/​amend.cloud/​test/​image/fit_fill,h_150,w_100/baby" ​/>

Using various parameters, you can perform tons of image transformations. The PHP library builds Amend URLs that you can embed in your web and mobile views for dynamically transforming your uploaded images in the cloud and delivering the results through a fast CDN.

You can easily resize images, perform face detection based cropping, apply effects, overlay text or watermarks.

For a full list of supported transformations and their usage, refer to Image transformations.

5. Sample projects

To find additional useful code samples and learn how to integrate Amend with your web applications, take a look at our sample projects for JavaScript.

You should also take a look at the following fully working example that performs direct uploading from the browser with uploading progress and preview with advanced transformations and embeds in a dynamic HTML page using Amend's jQuery plugin.

6. What's next

Sign up for a free account and follow the steps mentioned above to try Amend. Finished all steps? That's just an example of what Amend can offer:

See our Image transformations docs.

Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.