Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Smart Autogeneration of Thumbnails Banners, and Socials with Content Aware Resize
<script src="" type="text/javascript"></script>
<script src="content-aware-resize.js" type="text/javascript"></script>
<input type="text" size="80" id="img_url" value="" />
<h3>Automatically resize:</h3>
<input type="submit" value="Thumbnail 150x150" onclick="resize(150,150,'thumb')" /> <a download="thumb.png" id="thumb"></a><br/>
<input type="submit" value="Banner 1200x300" onclick="resize(1200,300,'banner')" /> <a download="banner.png" id="banner"></a><br/>
<input type="submit" value="Twitter 1024x512" onclick="resize(1024,512,'tw')" /> <a download="tw.png" id="tw"></a><br/>
<input type="submit" value="Facebook 1200x628" onclick="resize(1200,628,'fb')" /> <a download="fb.png" id="fb"></a>
<h3>Manually resize image:</h3>
Width: <input type="number" style="width:4em" id="width" value="150" /><br />
Height: <input type="number" style="width:4em" id="height" value="300" /><br /><br />
<button onclick="resizeManual()">manual resize</button> <a download="manual.png" id="manual"></a>
var algo = Algorithmia.client("your_api_key").algo("algo://media/ContentAwareResize/0.1.3"); //
var geid = function(id) {return document.getElementById(id);}
var resize = function(width, height, anchorId) {
var anchor = geid(anchorId);
anchor.innerText = "Loading...";
var input = {
"image": geid("img_url").value,
"height": height,
"width": width,
"binarize": true
algo.pipe(input).then(function(response) {
anchor.innerText = response.error?response.error.message:"Download";
anchor.href = response.result;
var resizeManual = function() {
resize(parseInt(geid('height').value), parseInt(geid('height').value), 'manual');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment