Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
312 lines (266 sloc) 7.86 KB
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="imagescaler.js"></script>
<script type="text/javascript" src="json2.js"></script>
<style type="text/css">
h2
{
margin: 0 0 10px 0;
}
p
{
margin: 0 0 5px 0;
}
p#code
{
display: block;
margin: 0;
border: 1px solid #888;
background-color: #fff;
padding: 10px 15px;
font: 10pt Arial;
}
#preview, #preview2, #input
{
position: relative;
margin: 0 0 20px 0;
border: 1px solid #f0f;
padding: 0;
}
#input .region
{
position: absolute;
border: 1px solid #0f0;
}
#panel
{
position: fixed;
right: 20px;
top: 20px;
padding: 20px;
background-color: #fff;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
border: 1px solid #888;
}
.outerwrapper
{
position: relative;
overflow: hidden;
background-color: #edc;
}
.outerwrapper .innerwrapper
{
position: absolute;
}
.outerwrapper .indicator
{
position: absolute;
margin: 0;
padding: 0;
}
.outerwrapper .indicator2
{
position: absolute;
background-color: rgba(255,255,0,0.5);
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form>
<p>
Final output:</p>
<div id="preview">
</div>
<p>
Crop region:</p>
<div id="preview2">
</div>
<p>
Original image + region of interest:</p>
<div id="input">
</div>
<div id="panel">
<h2>
Interactive demo</h2>
<p>
<a href="#" id="demo1">demo1</a> <a href="#" id="demo2">demo2</a> <a href="#" id="demo3">demo3</a> <a href="#" id="demo4">demo4</a>
</p>
<p>
<input type="checkbox" id="re" />
Region of interest:
<input type="text" id="rx1" style="width: 30px;" />
<input type="text" id="ry1" style="width: 30px;" />
to
<input type="text" id="rx2" style="width: 30px;" />
<input type="text" id="ry2" style="width: 30px;" />
</p>
<p>
<input type="checkbox" id="fe" />
Fill
</p>
<p>
Target size:
<input type="text" id="ow" style="width: 30px;" />
x
<input type="text" id="oh" style="width: 30px;" />
aspect
<input type="text" id="oa" style="width: 40px;" />
</p>
<p>
Input image url:
<input type="text" id="iu" />
Size:
<input type="text" id="iw" style="width: 30px;" />
x
<input type="text" id="ih" style="width: 30px;" />
</p>
<h2>
Code</h2>
<textarea id="code" style="width: 100%; height: 100px;">
dummy
</textarea>
</div>
</form>
<script type="text/javascript">
(function () {
updateoutput = function () {
var iu = $('#iu').val();
var iw = parseInt($('#iw').val());
var ih = parseInt($('#ih').val());
var fe = $('#fe')[0].checked;
var re = $('#re')[0].checked;
var rx1 = parseInt($('#rx1').val());
var ry1 = parseInt($('#ry1').val());
var rx2 = parseInt($('#rx2').val());
var ry2 = parseInt($('#ry2').val());
var ow = parseInt($('#ow').val());
var oh = parseInt($('#oh').val());
// var oa = parseInt($('#oa').val());
var r = null;
if (re)
r = ImageScaler2.calcRegion3(iw, ih, ow, oh, rx1, ry1, rx2, ry2, fe);
else
r = ImageScaler2.calcRegion1(iw, ih, ow, oh, fe);
var niw = Math.round(iw * r.mag);
var nih = Math.round(ih * r.mag);
var px = Math.round(r.l);
var py = Math.round(r.t);
var pw = Math.round(r.r - r.l);
var ph = Math.round(r.b - r.t);
var ht = '';
ht += '<div class=\"outerwrapper\" style=\"width:' + ow + 'px;height:' + oh + 'px;\">';
ht += '<div class=\"innerwrapper\" style=\"left:' + px + 'px;top:' + py + 'px;\">';
ht += '<img src=\"' + iu + '\" style=\"width:' + niw + 'px;height:' + nih + 'px;\">';
ht += '</div>';
ht += '</div>';
$('#preview').html(ht);
ht = '';
ht += '<div class=\"outerwrapper\" style=\"height:' + (oh + 200) + 'px;\"><div style=\"margin:100px;width:' + niw + 'px;height:' + nih + 'px;\"></div>';
ht += '<div class=\"indicator\" style=\"left:' + (100 + px) + 'px;top:' + (100 + py) + 'px;width:' + pw + 'px;height:' + ph + 'px;\"><img src=\"' + iu + '\" style=\"width:' + niw + 'px;height:' + nih + 'px;\"/></div>';
ht += '<div class=\"indicator2\" style=\"left:' + 100 + 'px;top:' + 100 + 'px;width:' + ow + 'px;height:' + oh + 'px;\"></div>';
ht += '</div>';
$('#preview2').html(ht);
var code = 'var r = ImageScaler2.calcRegion3(' + iw + ', ' + ih + ', ' + ow + ', ' + oh + ', ' + rx1 + ', ' + ry1 + ', ' + rx2 + ', ' + ry2 + ', ' + fe + ');\n';
code += 'r = ' + JSON.stringify(r);
$('#code').html(code);
};
inputchanged = function () {
var iu = $('#iu').val();
var iw = parseInt($('#iw').val());
var ih = parseInt($('#ih').val());
var rx1 = parseInt($('#rx1').val());
var ry1 = parseInt($('#ry1').val());
var rx2 = parseInt($('#rx2').val());
var ry2 = parseInt($('#ry2').val());
var rw = rx2 - rx1;
var rh = ry2 - ry1;
var ht = '';
ht += '<img src=\"' + iu + '\" />';
ht += '<div class=\"region\" style=\"left:' + rx1 + 'px;top:' + ry1 + 'px;width:' + rw + 'px;height:' + rh + 'px;\"></div>';
$('#input').html(ht);
this.updateoutput();
};
demodata1 = function () {
$('#iu').val('http://farm6.static.flickr.com/5009/5217881218_d5244ab43b.jpg');
$('#iw').val('500');
$('#ih').val('333');
$('#ow').val('100');
$('#oh').val('50');
$('#oa').val('0.75');
$('#fe')[0].checked = true;
$('#re')[0].checked = true;
$('#rx1').val('180');
$('#ry1').val('50');
$('#rx2').val('330');
$('#ry2').val('200');
};
demodata2 = function () {
$('#iu').val('http://www.photoshopstar.com/wp-content/uploads/2009/05/photo_manipulation_eye.jpg');
$('#iw').val('500');
$('#ih').val('300');
$('#ow').val('100');
$('#oh').val('100');
$('#oa').val('1.0');
$('#fe')[0].checked = true;
$('#re')[0].checked = true;
$('#rx1').val('180');
$('#ry1').val('100');
$('#rx2').val('300');
$('#ry2').val('220');
};
demodata3 = function () {
$('#iu').val('http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg');
$('#iw').val('600');
$('#ih').val('450');
$('#ow').val('100');
$('#oh').val('100');
$('#oa').val('1.0');
$('#fe')[0].checked = true;
$('#re')[0].checked = false;
$('#rx1').val('250');
$('#ry1').val('100');
$('#rx2').val('600');
$('#ry2').val('350');
};
demodata4 = function () {
$('#iu').val('http://farm5.static.flickr.com/4022/5151073555_8acb6bb047_z.jpg');
$('#iw').val('425');
$('#ih').val('640');
$('#ow').val('64');
$('#oh').val('64');
$('#oa').val('1.0');
$('#fe')[0].checked = true;
$('#re')[0].checked = true;
$('#rx1').val('250');
$('#ry1').val('500');
$('#rx2').val('400');
$('#ry2').val('640');
};
this.demodata1();
(function (self) {
$('#iu').change(function () { self.inputchanged(); });
$('#iw').change(function () { self.inputchanged(); });
$('#ih').change(function () { self.inputchanged(); });
$('#ow').change(function () { self.inputchanged(); });
$('#oh').change(function () { self.inputchanged(); });
$('#fe').change(function () { self.inputchanged(); });
$('#re').change(function () { self.inputchanged(); });
$('#rx1').change(function () { self.inputchanged(); });
$('#ry1').change(function () { self.inputchanged(); });
$('#rx2').change(function () { self.inputchanged(); });
$('#ry2').change(function () { self.inputchanged(); });
$('#demo1').click(function () { self.demodata1(); self.inputchanged(); });
$('#demo2').click(function () { self.demodata2(); self.inputchanged(); });
$('#demo3').click(function () { self.demodata3(); self.inputchanged(); });
$('#demo4').click(function () { self.demodata4(); self.inputchanged(); });
})(this);
this.inputchanged();
this.updateoutput();
})();
</script>
</body>
</html>