Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
233 lines (209 sloc) 10.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery canvasResize Plugin</title>
<meta name="description" content="jQuery Canvas Resize Plugin. It's compatible with iOS6 and Android 2.3+" />
<meta name="keywords" content="javascript, jquery, canvas, image, resize" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link type="text/plain" rel="author" href="http://gokercebeci.com/humans.txt" />
<link rel="shortcut icon" href="http://gokercebeci.com/favicon.ico" type="image/x-icon" />
<style>
body { margin: 0; padding: 0; color:#333; font: normal 13px/1.264 sans-serif; }
img { border:0 }
.clearfix { clear:both; }
#devcontainer { margin: 20px auto; padding: 0 10px; width: 940px; }
pre, code {
display: block;
padding: 10px;
color: #eee;
border: 1px solid #222;
background: #333;
font-family: monospace, monospace;
_font-family: 'courier new', monospace;
font-size: 1em;
}
#area { float:left; width: 480px; }
.desc { float:right; width: 440px; }
.signature a { color:#555; text-decoration:none; }
.signature img { margin-right:5px; vertical-align: middle; }
</style>
<!-- jquery -->
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="devcontainer">
<!-- development area -->
<!-- SAMPLE -->
<section>
<h2>SAMPLE</h2>
<!-- description -->
<div class="desc">
<h1>jQuery canvasResize v1.2.0</h1>
<hr>
<p><b>canvasResize</b> is a plugin for client side image resizing.</p>
<p>It's compatible with iOS6</p>
<p>I fixed iOS6 Safari's image file rendering issue for large size image (over mega-pixel)
using few functions from
<a href="https://github.com/stomita/ios-imagefile-megapixel">ios-imagefile-megapixel</a><br/>
And fixed orientation issue by using edited
<a href="http://blog.nihilogic.dk/2008/05/jquery-exif-data-plugin.html">jQuery EXIF data plugin</a>
<p><b>* Sorry, server side uploading option does not work on gokercebeci.com. You can test it on your own server.</b></p>
<p>I've only tested it on</p>
<ul>
<li><b>Chromium (24.0.1312.56)</b>, </li>
<li><b>Google Chrome (25.0.1364.68 beta)</b>, </li>
<li><b>Opera (12.14)</b>, </li>
<li><b>IOS 6.1.2</b></li>
</ul>
<p>and it works enough for me for now!</p>
<p>It is under MIT License and It requires "binaryajax.js" and "exif.js" to work which is also under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]</p>
<p class="signature"><a href="http://gokercebeci.com/dev/" title="developer">
<img src="http://geticon.org/of/gokercebeci.com" alt="developer" />
goker.cebeci, the developer</a></p>
<p class="signature"><a href="https://github.com/gokercebeci/canvasResize">
<img src="http://geticon.org/of/github.com" alt="github" />
fork it on github</a></p>
</div>
<!-- /description -->
<style>
#area div p { display: block; width: 300px; }
#area div p span { display: block; padding: 2px 0; width: 0; background: #193; text-align: center; }
#area b, #area img { display: block; }
#area img { margin: 10px 0; width: 300px; }
#area input { visibility: hidden; height: 0; }
#area u { display: block; padding: 15px; text-align: center; background: #ddd; border-radius: 6px; }
</style>
<div id="area">
<h3>canvasResize</h3>
<div>
<input name="photo" type="file"/>
<u>Choose file</u>
<p><span></span></p>
<i></i>
</div>
<script>
$().ready(function() {
$('#area u').click(function() {
$('input[name=photo]').trigger('click');
});
$('input[name=photo]').change(function(e) {
var file = e.target.files[0];
// RESET
$('#area p span').css('width', 0 + "%").html('');
$('#area img, #area canvas').remove();
$('#area i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));
// CANVAS RESIZING
$.canvasResize(file, {
width: 300,
height: 0,
crop: false,
quality: 80,
//rotate: 90,
callback: function(data, width, height) {
// SHOW AS AN IMAGE
// =================================================
$('<img>').load(function() {
$(this).css({
'margin': '10px auto',
'width': width,
'height': height
}).appendTo('#area div');
}).attr('src', data);
// /SHOW AS AN IMAGE
// =================================================
// IMAGE UPLOADING
// =================================================
// Create a new formdata
var fd = new FormData();
// Add file data
var f = $.canvasResize('dataURLtoBlob', data);
f.name = file.name;
fd.append($('#area input').attr('name'), f);
$.ajax({
url: 'uploader.php',
type: 'POST',
data: fd,
dataType: 'json',
contentType: false,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("pragma", "no-cache");
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var loaded = Math.ceil((e.loaded / e.total) * 100);
$('p span').css({
'width': loaded + "%"
}).html(loaded + "%");
}
}, false);
return xhr;
}
}).done(function(response) {
//console.log(response);
if (response.filename) {
// Complete
$('#area p span').html('done');
$('#area b').html(response.filename);
$('<img>').attr({
'src': response.filename
})
.appendTo($('#area div'));
}
});
// /IMAGE UPLOADING
// =================================================
}
});
});
});
</script>
<script src="jquery.exif.js"></script>
<script src="jquery.canvasResize.js"></script>
<script src="canvasResize.js"></script>
</div>
<div class="clearfix"></div>
</section>
<!-- SAMPLE -->
<!-- USAGE -->
<section>
<h2>USAGE</h2>
<pre><code>
$('input[name=photo]').change(function(e) {
var file = e.target.files[0];
$.canvasResize(file, {
width: 300,
height: 0,
crop: false,
quality: 80,
//rotate: 90,
callback: function(data, width, height) {
$(img).attr('src', data);
}
});
});
</code></pre>
</section>
<!-- /USAGE -->
<!-- OPTIONS -->
<section>
<h2>OPTIONS</h2>
<pre><code>
width : 300, // Image width.
height : 0, // Image height, default 0 (flexible).
crop : false, // default false.
quality : 80, // Image quality default 80.
rotate : 90, // Image rotation default 0
callback : function(){},
</code></pre>
</section>
<!-- /OPTIONS -->
<!-- /development area -->
</div>
</body>
</html>