peckjon/content-aware-resize.htm

## content-aware-resize.htm
<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>

## content-aware-resize.js
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');
};
	<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');
	};