{"id":21122,"date":"2012-04-22T12:38:13","date_gmt":"2012-04-22T12:38:13","guid":{"rendered":"http:\/\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries"},"modified":"2022-04-25T08:10:56","modified_gmt":"2022-04-25T15:10:56","slug":"cloudinary_as_the_server_side_for_javascript_image_cropping_libraries","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries","title":{"rendered":"Cloudinary as the server-side for Javascript image cropping libraries"},"content":{"rendered":"

Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a thumbnail, and so forth. When cropping you’ll need to specify an anchor, or gravity. The image crop can be anchored to the image’s center, top, left, etc. The cropping can even be relative to faces detected in the image<\/a>.<\/p>\n

Occasionally, you will know the exact fixed coordinates required for the perfect crop. The most common example is when you offer your users to upload their profile pictures and allow them to manually and interactively crop the uploaded picture. This is usually done using a client-side Javascript cropping library that lets the user visually mark the rectangle to crop from the original picture.<\/p>\n

There are many nice Javascript libraries<\/a> for visual cropping to choose from. These libraries will not perform the actual cropping, but rather identify and send the user’s selected absolute crop coordinates to your server for processing.<\/p>\n

So while you already have a nice pick of client-side libraries to retrieve the crop coordinates, you still need to implement the cropping process itself, store the result and deliver it to your users.<\/p>\n

Instead, you can now use Cloudinary as your Cloud-based interactive image cropping and delivery service. Simply pass the user\u2019s selected coordinates to Cloudinary and it will take care of the rest.<\/p>\n

Here’s an example of cropping an uploaded image to a 300×200 rectangle starting at the 355×410 pixels corner:<\/p>\n

…\/image\/upload\/x_355,y_410<\/span>,w_300,h_200,c_crop\/brown_sheep.jpg<\/a><\/strong><\/em><\/p>\n

\"Sheep\"\"Brown<\/p>\n

Same example using Cloudinary\u2019s Ruby on Rails integration GEM:<\/p>\n

<%= cl_image_tag(“brown_sheep.jpg”, <\/strong><\/em>
\n                                      :width => 300, :height => 200,<\/strong><\/em>
\n                                      \ud83d\ude21 => 355, :y => 410<\/span>, :crop => :crop) %><\/strong><\/em><\/p>\n

You can also use the original crop coordinates to create thumbnails in different dimensions by chaining multiple transformations. The following example generates a 150×100 image with the cropped brown sheep:<\/p>\n

…\/x_355,y_410<\/span>,w_300,h_200,c_crop\/w_150,h_100<\/span>,c_fill\/brown_sheep.jpg<\/strong><\/em><\/a><\/p>\n

\"\"<\/span><\/strong><\/p>\n

Same example in Ruby on Rails:<\/span><\/strong><\/p>\n

     <%= cl_image_tag(\u201cbrown_sheep.jpg\u201d,<\/strong><\/em>
\n                                     :width => 150, :height => 100, :crop => :fill,<\/span><\/strong><\/em>
\n                                     :transformation => {<\/strong><\/em>
\n                                          :width => 300, :height => 200,
\n<\/strong><\/em>                                          \ud83d\ude21 => 355, :y => 410<\/span>, :crop => :crop <\/strong><\/em>}) %><\/strong><\/em><\/p>\n

Last but not least – if your website allows users to login using Facebook Connect<\/strong>, you probably also import the user’s Facebook profile picture to be shown on your service. Many social websites also allow the users to manually crop their Facebook profile picture for just the perfect shot. Using Cloudinary and the above technique, you can retrieve and crop a Facebook profile picture in a single step, without a sweat.<\/p>\n

The following example crops a Facebook profile picture to a 130×140 image starting at 25×10:<\/p>\n

…\/image\/facebook\/w_130,h_140,c_crop,x_25,y_10<\/span>\/zuck.jpg<\/strong><\/em><\/p>\n

For more details on custom coordinates cropping and image transformations in general, see our documentation<\/a>.<\/p>\n

Don\u2019t have a Cloudinary account? Sign up to our free plan<\/a> and start cropping your images in the Cloud.<\/p>\n","protected":false},"excerpt":{"rendered":"

Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a thumbnail, and so forth. When cropping you’ll need to specify an anchor, or gravity. The image crop can be anchored to the image’s center, top, left, etc. The cropping can even be […]<\/p>\n","protected":false},"author":41,"featured_media":24081,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165],"class_list":["post-21122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation"],"acf":[],"yoast_head":"\nCloudinary as the server-side for Javascript image cropping libraries<\/title>\n<meta name=\"description\" content=\"Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cloudinary as the server-side for Javascript image cropping libraries\" \/>\n<meta property=\"og:description\" content=\"Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-22T12:38:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-25T15:10:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Cloudinary as the server-side for Javascript image cropping libraries\",\"datePublished\":\"2012-04-22T12:38:13+00:00\",\"dateModified\":\"2022-04-25T15:10:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries\"},\"wordCount\":635,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA\",\"keywords\":[\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2012\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries\",\"url\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries\",\"name\":\"Cloudinary as the server-side for Javascript image cropping libraries\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA\",\"datePublished\":\"2012-04-22T12:38:13+00:00\",\"dateModified\":\"2022-04-25T15:10:56+00:00\",\"description\":\"Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cloudinary as the server-side for Javascript image cropping libraries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cloudinary as the server-side for Javascript image cropping libraries","description":"Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries","og_locale":"en_US","og_type":"article","og_title":"Cloudinary as the server-side for Javascript image cropping libraries","og_description":"Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a","og_url":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries","og_site_name":"Cloudinary Blog","article_published_time":"2012-04-22T12:38:13+00:00","article_modified_time":"2022-04-25T15:10:56+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries"},"author":{"name":"","@id":""},"headline":"Cloudinary as the server-side for Javascript image cropping libraries","datePublished":"2012-04-22T12:38:13+00:00","dateModified":"2022-04-25T15:10:56+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries"},"wordCount":635,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA","keywords":["Image Transformation"],"inLanguage":"en-US","copyrightYear":"2012","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries","url":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries","name":"Cloudinary as the server-side for Javascript image cropping libraries","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA","datePublished":"2012-04-22T12:38:13+00:00","dateModified":"2022-04-25T15:10:56+00:00","description":"Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cloudinary as the server-side for Javascript image cropping libraries"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1650586082\/85_server-side-imge-cropping\/85_server-side-imge-cropping.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21122"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21122\/revisions"}],"predecessor-version":[{"id":24082,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21122\/revisions\/24082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/24081"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}