Created
August 9, 2018 06:02
-
-
Save peckjon/a34d6fd227bbb30ed9df6931c082fdc1 to your computer and use it in GitHub Desktop.
Smart Autogeneration of Thumbnails Banners, and Socials with Content Aware Resize
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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