31:T42f,md`In the movie, you can see Cloudinary rolling a frame across the image and scoring possible crops. You can also see it doing something that we haven’t done at all yet in this notebook – varying the frame *size*, trying to find the tightest crop that contains most of the interesting bits in the image. Every demo I’ve shown you thusfar has cropped inwards from the image’s existing borders by a fixed percentage, with a fixed frame. Cloudinary can *also* try to crop in as tightly as possible on the *subject* of an image, and let you set your crop dimensions in relation to *that*. If the subject size of your input images varies (e.g., if the input images are just as likely to contain a small bird in a big blue sky, as they are a giant, frame-filling close-up of someone’s face), this is often a more useful way to work. I’ll cover it in a new notebook soon, but for now, I’ll just point you to the feature that toggles this behavior, in Cloudinary’s documentation: [\`c_thumb\`](https://cloudinary.com/documentation/image_transformations#thumb).`32:[] 2f:{"title":"Automatic cropping with Cloudinary","cells":[{"id":0,"value":"md`# Automatic cropping with Cloudinary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`First things first, let’s grab an image from the internet (feel free to change this!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof image_url = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`By default, [Cloudinary](https://cloudinary.com) will crop in on the center of an image. Like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`We can ask Cloudinary to crop in on other parts of the image using the “gravity” parameter. Which can be set to a direction…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof gravity = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`…or custom coordinates…` // TODO make a cool custom 2d input?","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof x = {\n\tconst form = html`\n\n\t`,\n\toutput = form.querySelector('output'),\n update = function() {\n form.value = form.x.value;\n output.innerHTML = `${ parseInt( form.x.value * 100 ) }%`;\n };\n\tform.x.oninput = update;\n\tupdate();\n\treturn form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"viewof y = {\n\tconst form = html`\n\n\t`,\n\toutput = form.querySelector('output'),\n\tupdate = function() {\n form.value = form.y.value;\n output.innerHTML = `${ parseInt( form.y.value * 100 ) }%`;\n };\n\tform.y.oninput = update;\n\tupdate();\n\treturn form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`…or (my favorite), \\`auto\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof ar = {\n\tconst form = html`\n\n\t`,\n\toutput = form.querySelector( 'output' ),\n\tupdate = function() {\n form.value = form.ar.value;\n output.innerHTML = form.ar.value;\n };\n \tform.ar.oninput = update;\n\tupdate();\n\treturn form;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof w = {\n\tconst form = html`\n\n\t`,\n\toutput = form.querySelector('output'),\n\tupdate = function() {\n form.value = form.w.value;\n output.innerHTML = `${ parseInt( form.w.value * 100 ) }%`;\n };\n\tform.w.oninput = update;\n\tupdate();\n\treturn form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`How does Cloudinary automatically pick a good-looking crop for arbitrary crop-frame sizes? I’m glad you asked!\n\nCloudinary runs the image through a number of different algorithms which return heatmaps of “interesting-ness”. These algorithms detect things like edges, faces, and visual uniqueness. They’re each weighted and rolled into a master heatmap, which you can see here, all the way on the right:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`Using this master heatmap, Cloudinary finds the crop with the most “heat”. I’d *love* to make a live, dynamic visualization of this best-crop-finding-process, but this pre-rendered movie of the process (applied to [this image](http://res.cloudinary.com/demo/image/upload/mountain_scene_panoramic.jpg)) will have to do.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"// `w_` does different things depending on whether or not it's given a float and an integer.\n// `w_1` returns a 1-pixel-wide image! What we want is a 100%-of-its-original-width image.\n// So: we make sure that we're requesting `w_1.0`, which gives us what we want.\nfloatString = function(num) {\n const str = num.toString();\n return ( str.match(/\\./) ? str : str + '.0' );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}