« Back to demos index

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. » See full documentation


<html>
<body>
<form action="/uploads" enctype="multipart/form-data" method="POST">
  <input type="file" name="my_file" multiple="multiple" />
</form>
</body>
<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-AUTH-KEY" }, 
      steps: {
        cropped_thumb: {
          robot: "/image/resize",
          width: 100,
          height: 100,
          resize_strategy: "crop"
        }
      }
    }
  });
});
</script>
</html>

In order to receive uploads, imports and encoding results you need to add some server side code. It's pretty straightforward though and we offer plugins for many of languages. See our docs for more information.

If you wonder about security - we support signature authentication. Learn more about that here.

Here is a simple code example in PHP:

<?php
$result = $_POST['transloadit'];
if (ini_get('magic_quotes_gpc') === '1') {
  $result = stripslashes($result);
}
print_r(json_decode($result, true));

In order to receive uploads, imports and encoding results you need to add some server side code. It's pretty straightforward though and we offer plugins for many of languages. See our docs for more information.

If you wonder about security - we support signature authentication. Learn more about that here.

Here is a simple code example in Ruby on Rails using our official transloadit-rails gem:

# Do 'gem install transloadit-rails',
# add this to config/routes.rb:
MyApp::Application.routes.draw do
  resources :uploads
end

# And this to app/controllers/uploads_controller.rb:
class UploadsController
  # The param[:transloadit] is automatically decoded for you
  include Transloadit::Rails::ParamsDecoder

  def new
  end

  def create
    Rails.logger.info("PARAMS: #{params[:transloadit].inspect}")
  end
end

Try it out

Maximum size of 30MB.



Transloadit spent 5 years on nailing the upload & encoding problem and built a platform that accepts millions of files each month.
We transform and encode these files and give them back to our customers. This saves them the time of
maintaining a scalable encoding stack supporting all formats so they can focus on their web/app.