Smart Autogeneration of Thumbnails Banners, and Socials with Content Aware Resize
<html> | |
<head> | |
<script src="https://algorithmia.com/v1/clients/js/algorithmia-0.2.0.js" type="text/javascript"></script> | |
<script src="content-aware-resize.js" type="text/javascript"></script> | |
</head> | |
<body> | |
<h3>Image:</h3> | |
<input type="text" size="80" id="img_url" value="https://upload.wikimedia.org/wikipedia/commons/f/f7/Hickory_Golfer.jpg" /> | |
<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> | |
</body> | |
</html> |
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