Skip to content

Commit c2ba192

Browse files
RubaXaRubaXa
committed
version 0.2
0 parents  commit c2ba192

5 files changed

Lines changed: 778 additions & 0 deletions

File tree

‎FileAPI.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6+
<title>FileAPI :: tests</title>
7+
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
9+
<script src="./FileAPI.js" type="text/javascript"></script>
10+
<script src="./FileAPI.image.js" type="text/javascript"></script>
11+
12+
</head>
13+
<body>
14+
15+
<form id="MyForm">
16+
<div>one: <input value="" type="file" name="one" /></div>
17+
<div>multiple: <input value="" type="file" name="mutiple" multiple="multiple" /></div>
18+
</form>
19+
20+
<div id="Preview" style="margin: 10px; padding: 10px; border: 1px solid red;"></div>
21+
22+
<script type="text/javascript">
23+
$('#MyForm input').change(function (){
24+
var input = this, files = this.files;
25+
26+
$.each(files, function (i, file){
27+
FileAPI.readAsDataURL(file, function (evt){
28+
if( evt.type == 'load' ){
29+
var size = FileAPI.toBinaryString(evt.result).length;
30+
console[(file.size == size ? 'info' : 'error')]('FileAPI.readAsDataURL ... OK')
31+
}
32+
});
33+
34+
FileAPI.readAsBinaryString(file, function (evt){
35+
if( evt.type == 'load' ){
36+
console[(file.size == evt.result.length ? 'info' : 'error')]('FileAPI.readAsBinaryString ... OK')
37+
}
38+
});
39+
40+
FileAPI.readAsImage(file, function (evt){
41+
if( evt.type == 'load' ){
42+
var canvas = evt.result;
43+
44+
canvas = FileAPI.crop(canvas, 0, 0, 500, 500);
45+
canvas = FileAPI.resizeByMax(canvas, 300);
46+
canvas = FileAPI.rotate(canvas, 90);
47+
48+
$(canvas).prependTo('#Preview');
49+
}
50+
});
51+
});
52+
53+
FileAPI.upload({
54+
url: 'http://rubaxa.org/labs/fileapi.php',
55+
data: {
56+
'num': 10,
57+
'str': "foo",
58+
'input': input,
59+
'files[]': files
60+
},
61+
success: function (res){
62+
}
63+
});
64+
65+
FileAPI.reset(input);
66+
});
67+
68+
</script>
69+
70+
</body>
71+
</html>

‎FileAPI.image.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
(function (api, document){
2+
var
3+
min = Math.min,
4+
5+
support = !!(function(){
6+
var canvas = document.createElement('Canvas'), support = canvas.getContext && ~canvas.toDataURL("image/png").indexOf("data:image/png");
7+
canvas = null;
8+
return support;
9+
})(),
10+
11+
notSupport = support ? false : function (img){ return img; }
12+
;
13+
14+
api.extend({
15+
16+
canvas: support,
17+
18+
rotate: notSupport || function (img, deg){
19+
var width = img.width, height = img.height;
20+
21+
return Canvas(!(deg % 180) ? width : height, (deg % 180) ? width : height)
22+
.rotate(deg)
23+
.draw(img, (deg == 180 || deg == 270 ? -width : 0), (deg == 90 || deg == 180 ? -height : 0), width, height)
24+
.ok()
25+
;
26+
},
27+
28+
crop: notSupport || function (img, x, y, w, h){
29+
return Canvas(w, h).draw(img, x, y, w, h, 0, 0, w, h).ok();
30+
},
31+
32+
resize: notSupport || function (img, width, height){
33+
return Canvas(width, height).draw(img, 0, 0, width, height).ok();
34+
},
35+
36+
resizeByMax: notSupport || function (img, width, height){
37+
if( !height ) height = width;
38+
39+
var
40+
srcW = img.width
41+
, srcH = img.height
42+
, srcF = srcW / srcH
43+
, dstF = width / height
44+
;
45+
46+
if( srcF >= dstF ){
47+
width = min(srcW, width);
48+
height = width / srcF;
49+
} else {
50+
height = min(srcH, height);
51+
width = height * srcF;
52+
}
53+
54+
return Canvas(width, height).draw(img).ok();
55+
}
56+
57+
});
58+
59+
60+
// @private
61+
function Canvas(w, h){
62+
if( !(this instanceof Canvas) ) return new Canvas(w, h);
63+
this.canvas = document.createElement('canvas');
64+
this.ctx = this.canvas.getContext('2d');
65+
this.width = this.canvas.width = w;
66+
this.height = this.canvas.height = h;
67+
}
68+
Canvas.prototype = {
69+
constructor: Canvas,
70+
71+
draw: function (img, sx, sy, sw, sh, dx, dy, dw, dh){
72+
var width = this.width, height = this.height;
73+
if( typeof dx !== 'undefined' )
74+
this.ctx.drawImage(img, sx||0, sy||0, sw||width, sh||height, dx||0, dy||0, dw||width, dh||height);
75+
else
76+
this.ctx.drawImage(img, sx||0, sy||0, sw||width, sh||height);
77+
return this;
78+
},
79+
80+
rotate: function (deg){
81+
this.ctx.rotate(deg * Math.PI / 180);
82+
return this;
83+
},
84+
85+
ok: function (){
86+
this.ctx = null;
87+
return this.canvas;
88+
}
89+
};
90+
})(FileAPI, document);

0 commit comments

Comments
 (0)