Crop an image to 100x100 pixels

Cropping is implemented as a separated resize strategy in our image resize robot. Just supply "resize_strategy": "crop" to your Template JSON and the image will be cropped to the specified width and height. It will center the image within the specified crop frame and discard any overlapping parts. If the source image is smaller than the crop frame, it gets zoomed.

Please upload an image below to run this demo.



If you want Transloadit to handle uploads for you, here's some example HTML and JavaScript that you could directly integrate into your website.

We have a great new JavaScript uploader in the works called Uppy and you're welcome to give that a shot, but for now, the following example uses our jQuery SDK and this is still the recommended way to integrate Transloadit into webbrowsers.

<html>
<head><title>Some demo title</title></head>
<body>
<form action="/uploads" enctype="multipart/form-data" method="POST">
  <input type="file" name="my_file" multiple="multiple" />
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//assets.transloadit.com/js/jquery.transloadit2-v2-latest.js"></script>
<script type="text/javascript">
$(function() {
  $('form').transloadit({
    wait: true,
    triggerUploadOnFileSelection: true,
    params: {
      auth: {
        key: "YOUR_TRANSLOADIT_AUTH_KEY",
      },
      steps: {
        "cropped_thumb": {
          "use": ":original",
          "robot": "/image/resize",
          "result": true,
          "width": 100,
          "height": 100,
          "resize_strategy": "crop"
        }
      }
    },
  });
});
</script>
</body>
</html>

Notifying your server

Transloadit will then accept the upload on behalf of your site, process all the files according to your instructions, export to your storage platform of choice, and then let your visitor upload links to the results (example) to your website's /uploads URL.

This takes the pressure of your platform, and ensures the user will have a smooth experience.

Typically you'll want to save a record of the result in your database, so you'll need to inspect the transloadit POST payload that was sent to your /uploads, or Notification URL. In PHP that would look like this:

print_r(json_decode($_POST['transloadit'], true));

Maybe you want to handle your own file uploads, or have a big library of files ready to be encoded. You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases we have a REST API available. You can write code in your favorite language to talk to it. We have SDKs available for all major languages and platforms to save you some time setting that up.

This demo uses :original, which indicates a user upload that was received by Transloadit. So for this SDK, you'll likely want to add one of our import Robots and use their downloads instead.

Here's an example of our PHP SDK.

// Install "transloadit/php-sdk" via Composer (https://getcomposer.org)
use transloadit\Transloadit;
$transloadit = new Transloadit(array(
  "key"    => "YOUR_TRANSLOADIT_AUTH_KEY",
  "secret" => "YOUR_TRANSLOADIT_AUTH_SECRET",
));

$response = $transloadit->createAssembly(array(
  "files" => array(
    "./lolcat.jpg",
  ),
  "params" => array(
    "steps" => json_decode({
      "cropped_thumb": {
        "use": ":original",
        "robot": "/image/resize",
        "result": true,
        "width": 100,
        "height": 100,
        "resize_strategy": "crop"
      }
    }, true),
  ),
));

Maybe you want to handle your own file uploads, or have a big library of files ready to be encoded. You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases we have a REST API available. You can write code in your favorite language to talk to it. We have SDKs available for all major languages and platforms to save you some time setting that up.

This demo uses :original, which indicates a user upload that was received by Transloadit. So for this SDK, you'll likely want to add one of our import Robots and use their downloads instead.

Here's an example of our Ruby SDK.

# gem install transloadit
transloadit = Transloadit.new(
  :key    => 'YOUR_TRANSLOADIT_AUTH_KEY',
  :secret => 'YOUR_TRANSLOADIT_AUTH_SECRET'
)

cropped_thumb = transloadit.step 'cropped_thumb', '/image/resize',
  :use => ":original",
  :result => true,
  :width => 100,
  :height => 100,
  :resize_strategy => "crop"
})

assembly = transloadit.assembly(
  :steps => [ cropped_thumb ]
)

response = assembly.submit! open('./lolcat.jpg')
until response.finished?
  sleep 1; response.reload!
end

if !response.error?
 # handle success
end

Maybe you want to handle your own file uploads, or have a big library of files ready to be encoded. You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases we have a REST API available. You can write code in your favorite language to talk to it. We have SDKs available for all major languages and platforms to save you some time setting that up.

This demo uses :original, which indicates a user upload that was received by Transloadit. So for this SDK, you'll likely want to add one of our import Robots and use their downloads instead.

Here's an example of our Node.js SDK.

// npm install --save --save-exact transloadit
var TransloaditClient = require('transloadit');
var transloadit       = new TransloaditClient({
  authKey    : "YOUR_TRANSLOADIT_AUTH_KEY",
  authSecret : "YOUR_TRANSLOADIT_AUTH_SECRET"
});

transloadit.addFile("myimage", "./lolcat.jpg");

var options = {
  params: {
    steps: {
      "cropped_thumb": {
        "use": ":original",
        "robot": "/image/resize",
        "result": true,
        "width": 100,
        "height": 100,
        "resize_strategy": "crop"
      }
    }
  }
};
transloadit.createAssembly(options, function(err, result) {
  if (err) {
    throw new Error(err);
  }

  console.log(result);
});

Maybe you want to handle your own file uploads, or have a big library of files ready to be encoded. You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases we have a REST API available. You can write code in your favorite language to talk to it. We have SDKs available for all major languages and platforms to save you some time setting that up.

This demo uses :original, which indicates a user upload that was received by Transloadit. So for this SDK, you'll likely want to add one of our import Robots and use their downloads instead.

Here's an example of our Go SDK.

// go get github.com/transloadit/go-sdk
options := transloadit.DefaultConfig
options.AuthKey = "YOUR_TRANSLOADIT_AUTH_KEY"
options.AuthSecret = "YOUR_TRANSLOADIT_AUTH_SECRET"
client, err := transloadit.NewClient(options)
if err != nil {
    panic(err)
}

assembly := client.CreateAssembly()
assembly.AddFile("myimage", "./lolcat.jpg")

assembly.AddStep("cropped_thumb", map[string]interface{}{
  "use": ":original",
  "robot": "/image/resize",
  "result": true,
  "width": 100,
  "height": 100,
  "resize_strategy": "crop"
})

info, err := assembly.Upload()
if err != nil {
    panic(err)
}

Instead of passing encoding instructions directly to Transloadit, you can also save them in a secured way as a "Template". You can then refer to the template_id in your requests, while secrets and instructions no longer have to be transmitted, which might be insecure in many cases.

Here is the 'raw' Template in case you want to save these instructions safely in your account that way.

{
  "steps": {
    "cropped_thumb": {
      "use": ":original",
      "robot": "/image/resize",
      "result": true,
      "width": 100,
      "height": 100,
      "resize_strategy": "crop"
    }
  }
}

Try it out

Maximum size for all demos is 100MB.

0% Complete

If you wonder about security - we can save secrets server-side and encrypt them for you inside a Template, and we also support Signature Authentication to protect instructions from tempering.

Transloadit is a service for companies with developers, aimed at handling large amounts of media. While we'd love to help you integrate Transloadit in automated systems, we can not provide support for visitors wanting to do one-off media conversions.