« Back to demos index

Crop an image based on cropping coordinates

You can also crop your images based on a set of coordinates. This is nice if you want to have your user upload an image, then show that image on a crop page and have her specify the cropping area. » 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",
          crop: {
            x1: 30,
            y1: 30,
            x2: 120,
            y2: 90
          },
          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.