html5版canvas自由拼图实例

本文实例讲述了html5版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下：
. X5 k9 v( e7 q6 w代码运行效果如下图所示：
" d  x( Q2 t% V- d  ~

  v2 ~2 k) J3 o6 n0 }. [( i                               
登录/注册后可看大图

4 c" E2 t% S1 S: [' [canvaselement.js代码如下：
  P& Z( \8 K) r$ m- _9 }( g复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
2 \1 W, X7 ]6 A2 W& X: [# {(function () {
, t9 y  x9 O  j4 z+ H- jcanvas.element = function() {};
canvas.element.prototype.fillbackground = true;
canvas.element.prototype.showcorners = false;
canvas.element.prototype.photoborder = true;
" H) A3 u' E$ f" j, h2 N: tcanvas.element.prototype.polaroid = false;
canvas.element.prototype._backgroundimg = null;
canvas.element.prototype._groupselector = null;
2 ~( @1 B; b( p+ |: V" R: K! Hcanvas.element.prototype._aimages = null;
canvas.element.prototype._ocontext = null;
' d3 D( z( T2 i3 V# o! {canvas.element.prototype._oelement = null;
7 {: J2 L9 E" Y1 D- }canvas.element.prototype._oconfig = null;
5 W# ^/ n& P" x; t% y" Ucanvas.element.prototype._currenttransform = null;
% k3 E6 A" F+ tcanvas.element.prototype._prevtransform = null;
canvas.element.prototype.curangle = null;
1 D5 O0 x' o1 U7 Z3 B% H. |canvas.element.prototype.init = function(el, oconfig) {
if (el == '') {
& P, T. p1 \7 O' Nreturn;
5 S1 U  r0 H  G% j}
this._initelement(el);
4 V1 {- L: C* Jthis._initconfig(oconfig);
this._createcanvasbackground();
this._createcontainer();
2 c, u- P  W$ o% v0 Kthis._initevents();
/ Q$ ?. \/ u# f6 i$ {1 Lthis._initcustomevents();
3 S' C9 ^! U5 b  u/ D( s  U8 H/ c$ ?};
canvas.element.prototype._initelement = function(el) {
this._oelement = document.getelementbyid(el);
this._ocontexttop = this._oelement.getcontext('2d');
) X; M6 n: l9 c# c5 e9 Q8 j% t% K};
! h) U0 U% ]& t+ o" e1 Y5 ]2 Qcanvas.element.prototype._initcustomevents = function() {
this.onrotatestart = new canvas.customevent('onrotatestart');
+ H6 g5 R& e  f& `4 r, {this.onrotatemove = new canvas.customevent('onrotatemove');
this.onrotatecomplete = new canvas.customevent('onrotatecomplete');
! Q6 J2 Y, S3 H. ]4 K% H3 j4 ithis.ondragstart = new canvas.customevent('ondragstart');
% ]! M" a) p2 T* G+ h, Qthis.ondragmove = new canvas.customevent('ondragmove');
4 x, M% Y/ h# m. nthis.ondragcomplete = new canvas.customevent('ondragcomplete');
};
4 A; ]+ j4 R! s/ gcanvas.element.prototype._initconfig = function(oconfig) {
this._oconfig = oconfig;
6 j( X3 s/ G* `3 I0 L  Pthis._oelement.width = this._oconfig.width;
8 N1 K" y3 t* o/ V, x/ n: }8 y( A, y$ Dthis._oelement.height = this._oconfig.height;
this._oelement.style.width = this._oconfig.width + 'px';
+ d5 k: x3 e4 g% O! Xthis._oelement.style.height = this._oconfig.height + 'px';
};
canvas.element.prototype._initevents = function() {
7 y* i& l# w/ {' L6 {) Wvar _this=this;
/ B; K, X3 B1 G; m, }2 A7 As(this._oelement).on('mousedown',function(e){
' ^3 d2 u2 ^* }, Q' b: z7 y$ L_this.onmousedown(e);
});
, a; n0 H6 ]+ i! Zs(this._oelement).on( 'mouseup', function(e){
_this.onmouseup(e);
; D2 w/ Q" V! I" z4 e0 }});
: P3 X3 n$ R( D- s# @) i# |2 p6 Xs(this._oelement).on('mousemove', function(e){
5 F9 P5 ?% i4 h  }1 s& i_this.onmousemove(e);
1 W, s1 P0 |& O});
};
canvas.element.prototype._createcontainer = function() {
var canvasel = document.createelement('canvas');
; F+ ?& l+ n1 U! o) s' Ecanvasel.id = this._oelement.id + '-canvas-container';
var ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
8 h  _& f3 W6 {7 Z( vocontainer.width = this._oconfig.width;
/ ?2 B, s1 H0 I1 F2 eocontainer.height = this._oconfig.height;
ocontainer.style.width = this._oconfig.width + 'px';
ocontainer.style.height = this._oconfig.height + 'px';
this._ocontextcontainer = ocontainer.getcontext('2d');
};
canvas.element.prototype._createcanvasbackground = function() {
var canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-background';
: t, E' w: a; M2 \, K3 g/ `var obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
: v1 |# C/ r  Y5 H7 G! Uobackground.width = this._oconfig.width;
) {  T. y- H+ Y# I! Qobackground.height = this._oconfig.height;
obackground.style.width = this._oconfig.width + 'px';
, s7 B  q+ \5 hobackground.style.height = this._oconfig.height + 'px';
3 x/ M" ^1 f/ o( F  bthis._ocontextbackground = obackground.getcontext('2d');
" Z  J, r$ i3 z1 E% ^( E( M2 E9 T};
% }% E  T7 U( d3 U% Y) q4 t( L/ e4 zcanvas.element.prototype.setcanvasbackground = function(oimg) {
9 l8 N8 z$ D1 {1 R+ O) w! j6 F8 T9 w7 Ethis._backgroundimg = oimg;
var originalimgsize = oimg.getoriginalsize();
: w. V  Y( U2 I- B8 I+ y; w5 l: Ethis._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
};
! P8 R! [$ i/ }6 Y0 D& b9 Kcanvas.element.prototype.onmouseup = function(e) {
if (this._aimages == null) {
return;
# w1 u4 Q1 _1 y9 Y/ E% r$ u}
1 p4 l! ^, f" M: w  z6 gif (this._currenttransform) {
( t. m7 j. h6 Sthis._currenttransform.target.setimagecoords();
  G/ U7 y1 }8 t0 O! q}
if (this._currenttransform != null && this._currenttransform.action == rotate) {
+ M7 m# t  A* o2 z: b& H5 l. qthis.onrotatecomplete.fire(e);
9 D+ x5 p( U7 h; j6 t! V} else if (this._currenttransform != null && this._currenttransform.action == drag) {
4 |% `6 B$ W( N  |# othis.ondragcomplete.fire(e);
}
this._currenttransform = null;
this._groupselector = null;
3 g# d1 E$ x3 M6 s! |% wthis.rendertop();
};
. M& ?. j' }: v6 c8 acanvas.element.prototype.onmousedown = function(e) {
/ B: j4 ]: M# n7 D8 qvar mp = this.findmouseposition(e);
if (this._currenttransform != null || this._aimages == null) {
. d" g, b6 A; Sreturn;
$ b- k9 h& v3 V' |}
* j3 M- r' J5 o/ f9 M8 x! h$ Pvar oimg = this.findtargetimage(mp, false);
& e. Z* t6 N3 e/ r7 m1 R! M: aif (!oimg) {
this._groupselector = { ex: mp.ex, ey: mp.ey,
top: 0, left: 0 };
5 f2 a& D2 p: {& k5 N}
else {
, q- i3 n2 w4 a3 ]- O' X: Yvar action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
, @/ A, J. ]; y  _0 zif (action == rotate) {
# K5 H$ L4 u7 W( `, kthis.onrotatemove.fire(e);
} else if (action == drag) {
this.ondragmove.fire(e);
}
this._prevtransform=this._currenttransform = {
target: oimg,
% @, _6 E; v2 G  b2 T- E" ]action: action,
: o, C6 ^- `( F* j5 Oscalex: oimg.scalex,
offsetx: mp.ex - oimg.left,
8 P; h8 |7 }  B' ^offsety: mp.ey - oimg.top,
, H& N* I' k1 L& ?$ Aex: mp.ex, ey: mp.ey,
left: oimg.left, top: oimg.top,
theta: oimg.theta
5 S3 q/ M7 e' ?, r: p6 F& i3 Q: Y};
) a, n8 s4 o* Y& z4 F$('canvas_menu').style.transform='rotate('+oimg.theta*180/3.14+'deg)';
* Y& v7 A8 u# l* w' n3 T7 o0 H4 ]$('canvas_menu').style.left=oimg.left+px;
$ G& g  O- p/ r2 S5 ~$('canvas_menu').style.top=oimg.top+px;
& d( i( F5 D8 J$('canvas_menu').style.display=block;
this.renderall(false,false);
- ]1 L* f- L7 B0 {8 G5 U}
  `& B0 f# D# ^9 o2 |};
# }3 |  @$ ?7 A) w1 Q9 j8 G  ~canvas.element.prototype.onmousemove = function(e) {
var mp = this.findmouseposition(e);
if (this._aimages == null) {
! R5 b% K, G( greturn;
}
if (this._groupselector != null) {
4 I; ^/ ^+ \1 z4 R! nthis._groupselector.left = mp.ex - this._groupselector.ex;
this._groupselector.top = mp.ey - this._groupselector.ey;
6 Y- \6 w; _! K+ Xthis.rendertop();
}
  j- r, f9 q& R# h6 ~! Velse if (this._currenttransform == null) {
; |5 I6 i: O8 F  H/ |var targetimg = this.findtargetimage(mp, true);
. U  n6 L! i; C/ G+ Z( o) Dthis.setcursor(mp, targetimg);
6 G: `( }7 F! |: G3 v, F5 `}
- C' |7 b. _8 k9 ielse {
8 q/ f: D* s- u) i9 W! U+ E8 _if (this._currenttransform.action == 'rotate') {
this.rotateimage(mp);
% ]4 e0 Y! U5 b( Bthis.scaleimage(mp);
this.onrotatemove.fire(e);
}
else {
$ x& d. M. K5 h# ^* F, jthis.translateimage(mp);
/ M" ^6 A$ c7 W/ H; Y8 |4 dthis.ondragmove.fire(e);
5 J1 e7 `% F; C2 J5 d}
this.rendertop();
- t0 W9 j7 T# T+ J! Z" U}
7 `* o! `. {2 K8 e! B};
canvas.element.prototype.translateimage = function(mp) {
/ e" |6 Q6 K: F% \: Zthis._currenttransform.target.left = mp.ex - this._currenttransform.offsetx;
this._currenttransform.target.top = mp.ey - this._currenttransform.offsety;
$('canvas_menu').style.left=this._currenttransform.target.left+px;
$('canvas_menu').style.top=this._currenttransform.target.top +px;
};
canvas.element.prototype.scaleimage = function(mp) {
var lastlen =
0 S4 Z9 k4 m) l$ t# g: Imath.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
math.pow(this._currenttransform.ex - this._currenttransform.left, 2));
& l4 ~# X$ U( z! a1 D1 |" [, C8 kvar curlen =
0 N- m& X" q/ hmath.sqrt(math.pow(mp.ey - this._currenttransform.top, 2) +
math.pow(mp.ex - this._currenttransform.left, 2));
var curscalex= this._currenttransform.scalex * (curlen / lastlen);
var curscaley=this._currenttransform.target.scalex;
if(curscalex>0.7&&curscaley>0.7){
this._currenttransform.target.scalex =curscalex;
" [! R! a: W5 T% }/ ^" E# u4 d5 Othis._currenttransform.target.scaley = curscaley;
}
};
canvas.element.prototype.rotateimage = function(mp) {
var lastangle = math.atan2(
6 a& }, A4 I1 T9 O) L( `* Uthis._currenttransform.ey - this._currenttransform.top,
8 K0 u! f! e6 Q  dthis._currenttransform.ex - this._currenttransform.left
);
var curangle = math.atan2(
% K% x8 U1 I; {# n* Tmp.ey - this._currenttransform.top,
" f; k' Q2 Y; g$ `- S' f( n' F- x2 Qmp.ex - this._currenttransform.left
);
this._currenttransform.target.theta = (curangle - lastangle) + this._currenttransform.theta;
this.curangle=this._currenttransform.target.theta*180/3.14;
: O; T: o1 x7 P$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
};
canvas.element.prototype.setcursor = function(mp, targetimg) {
if (!targetimg) {
this._oelement.style.cursor = 'default';
- U3 [' C2 l8 z1 }% U}
6 ^! V; X1 \2 y# k$ W! J& Gelse {
var corner = this.findtargetcorner(mp, targetimg);
/ k7 l8 [; _6 C2 Y+ A! J! u3 D; J; @) sif (!corner)
5 f# a+ I" [3 Q. _' f  ?{
2 h: e0 T# {9 K% y% z8 @  X  g+ s* _: Dthis._oelement.style.cursor = 'default';
}
else
0 ]$ x8 w+ C6 G# o2 t/ t{
if(corner == 'tr') {
$ x) z9 M( N9 g+ Dthis._oelement.style.cursor = 'ne-resize';
}
else if(corner == 'br') {
this._oelement.style.cursor = 'se-resize';
* J# a/ p5 |# m( ?! i/ s" r}
! P( Q+ X$ ?5 ^, T, s& ielse if(corner == 'bl') {
7 i; ]2 H8 q  i4 Q4 E- ^2 ^8 y$ Qthis._oelement.style.cursor = 'sw-resize';
7 W. A+ y: P5 }}
else if(corner == 'tl') {
5 E- G* Z5 t! J( [this._oelement.style.cursor = 'nw-resize';
% r7 d+ b+ v6 y7 j: h}
: b( |/ E8 j; Selse {
this._oelement.style.cursor = 'default';
}
( E6 h0 E" F3 m( O8 [2 h}
}
! F  l& M- b( g( @/ H4 j};
: Q5 S4 n* L- \6 Gcanvas.element.prototype.addimage = function(oimg) {
: W% b2 e8 u# P8 L& i1 Eif(s.isemptyobject(this._aimages)) {
8 |0 s# ?+ y7 l! b- j1 [$ lthis._aimages = [];
}
this._aimages.push(oimg);
3 H* D# p$ j) g8 H  r& tthis.renderall(false,true);</p> <p> };
  d$ G. R$ B: rcanvas.element.prototype.renderall = function(allontop,allowcorners) {
var containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
. p1 I7 L/ |- y0 @# Z6 w# C& _9 fcontainercanvas.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
, U9 @  f1 D  ~+ I, N1 E! `8 Bif (allontop) {
5 V, w2 c+ n/ q3 ?9 Avar originalimgsize = this._backgroundimg.getoriginalsize();
this._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
}
for (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
this.drawimageelement(containercanvas, this._aimages,allowcorners);
}
/ f4 H3 K, v' M0 U  G8 u+ Rthis.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
; ^2 z' j, ?& _5 L" U% X7 ]+ g};
canvas.element.prototype.rendertop = function() {
this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
. R/ P% U( k7 ?" O9 q$ bthis.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],true);
! [2 M- b: y# x2 c3 ]0 A+ w3 k! |if (this._groupselector != null) {
this._ocontexttop.fillstyle = rgba(0, 0, 200, 0.5);
; J9 T* w  |9 G5 L; s& t  }this._ocontexttop.fillrect(
6 L- P3 U; C! B) |* b2 {+ Ethis._groupselector.ex - ((this._groupselector.left > 0) ?
0 : - this._groupselector.left),
+ p" l: G& }! J- A. Dthis._groupselector.ey - ((this._groupselector.top > 0) ?
3 @% w3 U. `& c; ]" w1 g! o0 : - this._groupselector.top),
) B/ x/ o& c4 l3 D; f) vmath.abs(this._groupselector.left),
math.abs(this._groupselector.top)
3 E- `0 G1 k* C0 L9 ]) p" M);
% [; N4 B4 }3 w% L: zthis._ocontexttop.strokerect(
9 p* R' q& z4 M, s7 b# cthis._groupselector.ex - ((this._groupselector.left > 0) ?
0 : math.abs(this._groupselector.left)),
7 c0 x1 U6 |0 q; ]# L1 X8 |this._groupselector.ey - ((this._groupselector.top > 0) ?
0 : math.abs(this._groupselector.top)),
math.abs(this._groupselector.left),
+ L) L$ o0 J! U8 n5 s2 L0 d5 cmath.abs(this._groupselector.top)
);
1 d  n4 J* p/ ~4 `( Z' q  S}
};
canvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
8 Q0 r: A0 ?% {& Q. t* N$ |+ Joimg.cornervisibility=allowcorners;
var offsety = oimg.height / 2;
- `+ Z0 w7 f6 hvar offsetx = oimg.width / 2;
context.save();
1 A) p5 D. @. K/ D% {context.translate(oimg.left, oimg.top);
7 n8 i$ E6 @. ^& {# r0 scontext.rotate(oimg.theta);
context.scale(oimg.scalex, oimg.scaley);
6 z" R8 l1 d' B+ s3 V/ ~- Rthis.drawborder(context, oimg, offsetx, offsety);
var originalimgsize = oimg.getoriginalsize();
var polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
context.drawimage(
5 E4 Z$ Z: \, ^2 Y9 \oimg._oelement,
/ P- {( l  S2 K4 C9 _- originalimgsize.width/2,
, l! A; j+ H; I((- originalimgsize.height)/2 - polaroidheight),
1 @8 W- t- @, _" `- b) koriginalimgsize.width,
originalimgsize.height
/ h, f9 p7 t$ ?. ~$ b);
: D2 i6 k: c! j5 T# P  @if (oimg.cornervisibility) {
) K' w0 o0 T  n# xthis.drawcorners(context, oimg, offsetx, offsety);
}
6 |) J( x% M; Q9 {context.restore();
( y) b4 |8 o. T0 F: T8 j+ m7 [/ L. _};
canvas.element.prototype._getimagelines = function(ocoords) {
return {
topline: {
$ b% `: ^  ^. xo: ocoords.tl,
d: ocoords.tr
) F9 S, k/ _5 X9 c8 S& Y3 I},
0 ~! a3 y" z, E% p- J$ Q2 frightline: {
! n$ H! c4 E3 qo: ocoords.tr,
7 Y) E5 ^0 o5 y+ Xd: ocoords.br
% U2 ?* c, `: o/ q$ K& w},
- o. r3 v+ v+ Q5 h8 I% N3 Fbottomline: {
o: ocoords.br,
$ p9 j* v! q& L9 Cd: ocoords.bl
},
leftline: {
o: ocoords.bl,
d: ocoords.tl
1 m, k6 r! P0 ~% Z4 `}
' k, l$ E# U( v! `. E/ R4 g8 H1 C: M};
# [* h1 d8 W5 t; U: ^) }  `};
canvas.element.prototype.findtargetimage = function(mp, hovering) {
for (var i = this._aimages.length-1; i >= 0; i -= 1) {
var ilines = this._getimagelines(this._aimages.ocoords);
var xpoints = this._findcrosspoints(mp, ilines);
8 @. L3 s1 W) N3 ^% v) Zif (xpoints % 2 == 1 && xpoints != 0) {
$ F6 v' c$ ~5 bvar target = this._aimages;
if (!hovering) {
& A* R5 ?2 H) r% L3 p' i  u! p) Rthis._aimages.splice(i, 1);
2 J) y7 K2 Y7 i2 [this._aimages.push(target);
. j7 ~1 w  l& a5 n0 d}
% J+ l9 t/ r0 f& O( ]return target;
}
4 ?6 ^+ u3 v* C5 |( b! x}
return false;
1 [/ x6 i; {; @- s9 K3 b. e};
canvas.element.prototype._findcrosspoints = function(mp, ocoords) {
( h  \3 S  F, c6 t& p2 Q7 }5 J6 Jvar b1, b2, a1, a2, xi, yi;
! B- z$ D4 d- A/ G, Avar xcount = 0;
var iline = null;
for (linekey in ocoords) {
iline = ocoords[linekey];
- h0 a" F! J( pif ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
; z. x1 S0 a4 a4 r, Zcontinue;
) g$ W9 [! d! e; y$ C; {7 y+ v+ g}
if ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
6 s7 g0 V0 @# ?1 Dcontinue;
}
, A% S, n0 q- N2 d+ Cif ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
2 }- N/ {7 r& J" S3 Fxi = iline.o.x;
) `& f( [* }* N# ~+ \- t% Oyi = mp.ey;
}
# ^8 H7 i- {( U1 Melse {
! W- X3 @* y) Yb1 = 0;
b2 = (iline.d.y-iline.o.y)/(iline.d.x-iline.o.x);
* }" y8 d$ @% K# @# f$ l& y1 Ba1 = mp.ey-b1*mp.ex;
: f& Y" E! B" Z+ U5 F- Q) }a2 = iline.o.y-b2*iline.o.x;
xi = - (a1-a2)/(b1-b2);
' V( H6 u$ j' P6 Y/ u$ l$ t9 [9 Iyi = a1+b1*xi;
}
) `1 u6 q( E2 h' ?% g7 yif (xi >= mp.ex) {
xcount += 1;
}
1 s% H; i' p; G1 Jif (xcount == 2) {
; C5 q3 n' \# S' u9 Y6 B! t; Abreak;
7 b, @1 e. \1 R+ K" l/ P1 s}
}
4 T) [! Z& N0 A: }6 n6 a- }1 x: r5 Creturn xcount;
6 E( z* S+ T) }: x5 U7 N};
canvas.element.prototype.findtargetcorner = function(mp, oimg) {
7 F' \" c! o9 @: K  ]3 V- V4 ^var xpoints = null;
. V  c. ?  C& T8 Dvar corners = ['tl','tr','br','bl'];
8 }2 f, b1 \2 {- n5 o6 Y6 w' ?for (var i in oimg.ocoords) {
( `& L# J* x& a9 ?2 lxpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
0 a7 \2 V) c, N; @6 z# Kif (xpoints % 2 == 1 && xpoints != 0) {
return i;
' d8 ?* F% @' H' m2 P- J}
( i) A2 _0 w# ~5 T- R. p# ~5 L}
return false;
% F% l3 h$ n( g0 V- C};
. x. S) E, c: K3 W6 }# r5 d$ z, _canvas.element.prototype.findmouseposition = function(e) {
8 {* }- ]' l" @var parentnode = (e.srcelement) ? e.srcelement.parentnode : e.target.parentnode;
8 F. p* S  l) f6 J% [3 i6 Pvar issafari2 = !s.support.ie&&!s.support.firefox;
var scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
var safarioffsetleft = (issafari2) ? e.target.ownerdocument.body.offsetleft + scrollleft : 0;
var safarioffsettop = (issafari2) ? e.target.ownerdocument.body.offsettop + scrolltop : 0;
return {
ex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
ey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
screenx: e.screenx,
screeny: e.screeny
; b+ p1 z1 r: C3 F. Q};
};
: i- R( B6 b, Tcanvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
var outlinewidth = 2;
context.fillstyle = 'rgba(0, 0, 0, .3)';
' h' y/ a+ O% @/ n0 B3 bcontext.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
context.fillstyle = '#fff';
! K+ ]' u% ]& z& Q) ocontext.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
/ g* c4 G5 l4 W* Q1 t* J};
) s& n% b( |0 T5 t, ~canvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
context.fillstyle = rgba(0, 200, 50, 0.5);
context.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
) b/ B" t( C4 r, v0 k( X! V5 Lcontext.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
context.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
};
canvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
context.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
: h  n! D9 d7 h% l5 z. Scontext.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.clearrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
9 Z$ [* q6 c, r; q4 Bcontext.clearrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
context.restore();
7 v( X, o5 D' u% [% k/ L; x};
7 Y! p+ T. ]' n$ Ccanvas.element.prototype.canvasto = function(format) {
; c" m: B: H/ l. W( ythis.renderall(true,false);
var containercanvas =this._ocontexttop;
: D8 g, y5 J4 G* e$ Xfor (var i = 0, l = this._aimages.length; i < l; i += 1) {
4 k0 q' ^7 E/ O  {var offsety = this._aimages.height / 2;
var offsetx = this._aimages.width / 2;
this.clearcorners(containercanvas, this._aimages, offsetx, offsety);
}
3 |- n+ |( j6 N5 }! z1 t2 D' I  y1 iif (format == 'jpeg' || format == 'png') {
return this._oelement.todataurl('image/'+format);
}
};
  f' Z) L/ J* w+ Hcanvas.customevent = function(type) {
1 P6 Y( F1 k$ J, f( Gthis.type = type;
this.scope = null;
this.handler = null;
var self = this;
" n! O0 N! m2 u% I9 kthis.fire = function(e) {
if(this.handler != null) {
self.handler.call(self.scope, e);
}
' s( ?! @1 L, S! U* j1 p; a};
+ |4 w: |$ `0 h8 |+ ]; S};
}());
* h1 H) j8 x+ n& ~return canvas;
4 L& O/ g) s4 r0 t, G});
canvasimg.js代码如下：
复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
9 }1 v" D2 C! s4 _& Z) Q; {, \3 l% Pvar canvas = window.canvas || {};
(function () {
canvas.img = function(el, oconfig) {
this._initelement(el);
( `' p# B6 T9 E- m( @this._initconfig(oconfig);
+ V$ }! u0 F! @- i! A1 |( e! jthis.setimagecoords();
};
' O4 X! q- i' A8 Dcanvas.img.css_canvas = canvas-img;
var default_config = {
top: {
5 T; l% d( v) S9 n' D$ @4 ekey: top,
/ {, R1 \' C& i$ ivalue: 10
},
left: {
key: left,
+ I9 s3 i2 i' y  E, Y1 jvalue: 10
* q& w7 p) E  h! s- i& s1 v},
6 [+ X! Y+ E' }- e( Q2 b! B# dangle: {
key: angle,
2 {3 `# I& `( K% L0 _4 ], Z4 evalue: 0
},
theta: {
key: theta,
value: 0
& \! ~  C& B/ r8 p4 V},
scale-x: {
. G% U1 x, o7 A/ Q9 Ykey: scalex,
# b1 C, T. E( N3 fvalue: 1
/ c7 K  G( C1 f, o8 R8 `},
3 z% C& U, b4 A  nscale-y: {
key: scaley,
value: 1
( K  Z8 i1 B- Y  z. V},
cornersize: {
key: cornersize,
value:10
},
borderwidth: {
key: borderwidth,
( w0 }2 f1 ]* uvalue: 10
6 H: J: k9 y+ H9 h( ?& d},
polaroidheight: {
key: polaroidheight,
% V; {& W( Q, Xvalue: 40
},
1 p: p, U9 K7 D( Q, _9 ]: d9 Drandomposition: {
key: randomposition,
value: true
}
2 Y6 j. f4 e! I% Q/ y: }};
canvas.img.prototype._oelement = null;
/ b6 B8 d7 }' g% ?( f2 n' Lcanvas.img.prototype.top = null;
3 N: Z& c* `8 K' j+ z2 ^canvas.img.prototype.left = null;
" u/ w1 V) x, a& D! L; V" i1 ]canvas.img.prototype.maxwidth = null;
canvas.img.prototype.maxheight = null;
, X& M) @7 l" e, m5 Ucanvas.img.prototype.ocoords = null;
  O) t7 p0 p! D  a: B- v% C& O4 ecanvas.img.prototype.angle = null;
canvas.img.prototype.theta = null;
4 h- t2 Y$ P; z+ {2 tcanvas.img.prototype.scalex = null;
0 f6 [6 N2 V- x; V. c3 Z" Qcanvas.img.prototype.scaley = null;
+ g# x5 G* H& o+ q1 Hcanvas.img.prototype.cornersize = null;
canvas.img.prototype.polaroidheight = null;
canvas.img.prototype.randomposition = null;
canvas.img.prototype.selected = false;
canvas.img.prototype.bordervisibility = false;
0 C( [4 Y. G" `3 d& H) ecanvas.img.prototype.cornervisibility = false;
canvas.img.prototype._initelement = function(el) {
6 p( j6 T. d9 O; mthis._oelement = el;
8 V2 J5 W, I0 [1 ~" t8 m};
canvas.img.prototype._initconfig = function(oconfig) {
* j8 D/ T9 O" l8 E4 qvar skey;
for (skey in default_config) {
( L3 D( ]# O: N# q! svar defaultkey = default_config[skey].key;
if (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
this[defaultkey] = default_config[skey].value;
}
else {
this[defaultkey] = oconfig[defaultkey];
}
/ l4 g( E0 b# ~+ L}
, M6 f" j7 K, F, q. C2 `% Gif (this.bordervisibility) {
: s, i) C4 ^7 l+ M6 othis.currentborder = this.borderwidth;
/ I# |) c: N' j}
else {
this.currentborder = 0;
, S3 v+ Q' M- ~}
6 A0 F$ m" _, H7 n; vvar normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
this._oelement.width = normalizedsize.width;
! j* ^2 O& G! V( c& kthis._oelement.height = normalizedsize.height;
this.width = normalizedsize.width + (2 * this.currentborder);
7 b- A) a7 M4 U0 m7 c- C3 U/ C4 Bthis.height = normalizedsize.height + (2 * this.currentborder);
if (this.randomposition) {
7 M3 |# o# [% D, gthis._setrandomproperties(oconfig);
}
this.theta = this.angle * (math.pi/180);
- u! ?1 I$ Q  L) @};
7 b1 j- U% s$ q' L; Scanvas.img.prototype.getnormalizedsize = function(oimg, maxwidth, maxheight) {
if (maxheight && maxwidth && (oimg.width > oimg.height && (oimg.width / oimg.height) < (maxwidth / maxheight))) {
normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
0 |9 }# R! {. c6 p, H& V* l3 Fnormalizedheight = maxheight;
* k+ ]2 f9 |* S$ V}
else if (maxheight && ((oimg.height == oimg.width) || (oimg.height > oimg.width) || (oimg.height > maxheight))) {
' a: _2 U, M1 }normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
normalizedheight = maxheight;
}
else if (maxwidth && (maxwidth < oimg.width)){
normalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
normalizedwidth = maxwidth;
}
8 ]5 g7 {2 e# Belse {
8 r1 \' \5 v- X' R! enormalizedwidth = oimg.width;
: ^* S! i8 m1 ^: n# A' Snormalizedheight = oimg.height;
7 h: H4 x3 X2 n3 j' n; }& ]}
return { width: normalizedwidth, height: normalizedheight }
},
canvas.img.prototype.getoriginalsize = function() {
0 v1 w, `+ k2 v* x+ breturn { width: this._oelement.width, height: this._oelement.height }
};
canvas.img.prototype._setrandomproperties = function(oconfig) {
if (oconfig.angle == null) {
) j  Z9 X: m1 }7 [/ cthis.angle = (math.random() * 90);
}
6 a# s4 J- y1 S/ @- @' s& jif (oconfig.top == null) {
" U7 D' q$ m" H, o! othis.top = this.height / 2 + math.random() * 450;
}
" w' J- ~  C( I6 s. }) y" z5 pif (oconfig.left == null) {
this.left = this.width / 2 + math.random() * 600;
}
1 t$ T0 _7 r. \};
# e2 M* U) ~7 i# Q! w! Jcanvas.img.prototype.setcornersvisibility = function(visible) {
this.cornervisibility = visible;
};
9 v& }! S+ j0 h) S7 N9 t: D. Rcanvas.img.prototype.setimagecoords = function() {
this.left = parseint(this.left);
this.top = parseint(this.top);
this.currentwidth = parseint(this.width) * this.scalex;
this.currentheight = parseint(this.height) * this.scalex;
this._hypotenuse = math.sqrt(math.pow(this.currentwidth / 2, 2) + math.pow(this.currentheight / 2, 2));
this._angle = math.atan(this.currentheight / this.currentwidth);
$ b( h/ A' S- I2 cvar offsetx = math.cos(this._angle + this.theta) * this._hypotenuse;
8 N" h/ a/ i; lvar offsety = math.sin(this._angle + this.theta) * this._hypotenuse;
var theta = this.theta;
' G) N' m6 S, e5 q4 l1 gvar sinth = math.sin(theta);
var costh = math.cos(theta);
, A7 x& m+ T& S3 ~) bvar tl = {
  c% v. f3 x4 {- y" o: lx: this.left - offsetx,
y: this.top - offsety
" I# @& p5 d6 k8 ?* I5 O5 U+ Q};
var tr = {
x: tl.x + (this.currentwidth * costh),
! ~7 W; U5 Z  Q; ry: tl.y + (this.currentwidth * sinth)
};
var br = {
x: tr.x - (this.currentheight * sinth),
) D, h3 F* w3 ty: tr.y + (this.currentheight * costh)
};
- M+ T$ t# `: K4 b5 ]! Yvar bl = {
( ?0 s6 N  |% I, ~2 \3 cx: tl.x - (this.currentheight * sinth),
y: tl.y + (this.currentheight * costh)
};
this.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
this.setcornercoords();
, {* s9 r2 ?/ b5 t7 C# F};
canvas.img.prototype.setcornercoords = function() {
, W! p+ b+ s* H7 mvar coords = this.ocoords;
var theta = this.theta;
var cosoffset = this.cornersize * this.scalex * math.cos(theta);
( t" Y) a2 k2 dvar sinoffset = this.cornersize * this.scalex * math.sin(theta);
coords.tl.corner = {
tl: {
) D3 o0 _/ s! Y2 o; Q, ~! ~x: coords.tl.x,
y: coords.tl.y
; M$ i8 X+ Z7 T},
tr: {
) d1 |! N+ C; a. ?x: coords.tl.x + cosoffset,
y: coords.tl.y + sinoffset
},
2 ?( u7 Y! s7 r" q$ cbl: {
  `) u2 D; D- f8 }9 jx: coords.tl.x - sinoffset,
y: coords.tl.y + cosoffset
}
0 A6 B* z) r6 B, k# V6 I, w) B2 p};
- o0 Z/ A1 r3 m- y8 ecoords.tl.corner.br = {
x: coords.tl.corner.tr.x - sinoffset,
y: coords.tl.corner.tr.y + cosoffset
};
coords.tr.corner = {
, ^' U2 t- A$ W; ktl: {
) U3 I. t5 E1 f9 |x: coords.tr.x - cosoffset,
y: coords.tr.y - sinoffset
},
: Z; ?4 l/ z  b: t7 b5 X# btr: {
x: coords.tr.x,
" P) q! E0 X9 h5 R% G& ?y: coords.tr.y
. U; B' z' n# V/ _2 i7 h},
% p7 Y% T( y- M) A6 O9 b% Q- f$ y/ \3 ibr: {
x: coords.tr.x - sinoffset,
3 @+ S1 s" T/ d$ dy: coords.tr.y + cosoffset
}
};
coords.tr.corner.bl = {
x: coords.tr.corner.tl.x - sinoffset,
$ h) l4 x! U  s2 v2 r: my: coords.tr.corner.tl.y + cosoffset
1 `0 B& A4 r9 c! C8 ~9 S& C% W+ }};
0 w( e0 N" m9 h) }. Icoords.bl.corner = {
tl: {
x: coords.bl.x + sinoffset,
y: coords.bl.y - cosoffset
},
' `5 t0 H% L& Sbl: {
$ `" w" j  r% R" J* S# m: Gx: coords.bl.x,
+ Q) m$ t2 M7 v7 P- V" ry: coords.bl.y
},
; e8 z- x* \2 O$ ]br: {
5 g' i/ h$ }. {8 C% ?% Lx: coords.bl.x + cosoffset,
y: coords.bl.y + sinoffset
/ G& K; l" c% ^}
3 f0 T8 D# c7 r0 N# w% i9 n};
coords.bl.corner.tr = {
6 B6 n( E# N2 z9 R7 n- Fx: coords.bl.corner.br.x + sinoffset,
y: coords.bl.corner.br.y - cosoffset
" t0 S# z/ n  g& O% G8 X};
coords.br.corner = {
tr: {
x: coords.br.x + sinoffset,
$ z3 H! ~! U3 Cy: coords.br.y - cosoffset
; @0 U: }! p3 m1 u3 P},
bl: {
x: coords.br.x - cosoffset,
y: coords.br.y - sinoffset
},
br: {
6 H+ k% W& g9 _x: coords.br.x,
y: coords.br.y
# X) f9 ]! j, Q' f}
};
coords.br.corner.tl = {
7 B* |, u: [9 ix: coords.br.corner.bl.x + sinoffset,
y: coords.br.corner.bl.y - cosoffset
4 m4 v) A9 v4 Y& C* ?, C};
};
}());
return canvas;
});
) a+ _% L$ s/ k8 R1 ]( s1 n5 apuzzle.html代码如下：
- h" x( n$ f$ v  d复制代码代码如下:<!doctype html>
<html>
<head>
1 y# U! Z8 `' G) m) w) ~, D<meta http-equiv=content-type content=text/html; charset=utf-8>
1 E+ e* d% d" m' V% k# f<title>insert title here</title>
<link type=text/css href=html5_puzzle.css rel=stylesheet />
<script type=text/javascript src=../multi_upload/seed.js></script>
# R) q& H7 b+ N% q' O+ W9 g/ ~$ b3 C<script type=text/javascript src='html5_puzzle.js'></script>
+ e7 ~0 I: _4 r) ^2 o& _2 q</head>
) O/ l* f0 Y; p/ q/ m9 n5 p7 H<body>
<div id='html5_puzzle'>
( t( N7 A2 D, b  J4 g" X* |<div id='puzzle_left'>
6 e: ?- G8 g0 A/ K<div class='puzzle_column'>
<ul>
<li><img src='small_img/1.jpg' data-index='1' /></li>
<li><img src='small_img/2.jpg' data-index='2' /></li>
<li><img src='small_img/3.jpg' data-index='3' /></li>
4 I! W8 A  t6 S<li><img src='small_img/4.jpg' data-index='4' /></li>
<li><img src='small_img/5.jpg' data-index='5' /></li>
. ]+ J; u, I0 t% _8 [0 K& V6 R</ul>
</div>
' ]1 |! U% k0 T7 C<div class='puzzle_column'>
, Q  P2 v% S) N& n8 T. w<ul>
<li><img src='small_img/6.jpg' data-index='6' /></li>
/ p! t0 K! I- \' o<li><img src='small_img/7.jpg' data-index='7' /></li>
<li><img src='small_img/8.jpg' data-index='8' /></li>
) X' m& Z9 H; F3 ~<li><img src='small_img/9.jpg' data-index='9' /></li>
<li><img src='small_img/10.jpg' data-index='10' /></li>
" X7 a/ A& k& B9 L$ W) j</ul>
- \$ W3 ^* U, B( ?' ~- m</div>
</div>
" \2 B3 P9 t* e! I9 p. W( z* t<div id='puzzle_right'>
( c- i& u( r( p4 R( {% z<div id='puzzle_canvas'>
<canvas id=canvid1></canvas>
<div id='canvas_menu'>
<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
4 ?+ j% y% P" Ihref='javascript:void(0)' id='photo_update'>更改图片</a>
</div>
. e0 s8 G- Y6 I8 M- p% Y% k</div>
8 ?, r: ~- J/ F<img id=bg src=big_img/1.jpg width='600' height='450' />
</div>
7 s: r# w  ~4 O! c* x<div id='puzzle_bottom'>
7 T4 \; o1 p7 L* J& [$ o+ S<a href='javascript:void(0)' id='add_img'><span>添加图片</span><input
type=file multiple= id='fileimage'> </a> <a
# U* \/ {: S/ _( Shref='javascript:void(0)' id='upload_btn'>上传</a> <a>点击图片可以旋转，拖拽,
缩放哦!</a>
" W3 {8 }- Z! ]3 @3 {</div>
4 Q) o+ A8 ~! D9 H</div>
<input type=file id='test'>
5 `8 I- _$ L  Q( A% M" H3 s<canvas id='test_canvas'></canvas>
$ q# C6 E$ D; e6 Q& v</body>
</html>
+ X$ |# _. {7 L/ f+ n9 Bhtml5_puzzle.css代码如下：
复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
0 I0 ~% @$ ?, M$ d: Dfont-size: 0;
}</p> <p>canvas {
% B( f% ]3 i- ]background-color: transparent;
  [9 y' I% A6 O* A7 f& }! y4 vleft: 0;
position: absolute;
& A! i( V2 k3 btop: 0;
1 d1 ~& X3 P6 E5 s& }. q}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
display: inline-block;
}</p> <p>.puzzle_column li {
display: block;
margin: 5px;
border: 1px solid #ffffff;
}</p> <p>.puzzle_column li:hover {
border: 1px solid #3b5998;
cursor: pointer;
- T4 x  P" [- h# C3 B  I2 O# ?' N}</p> <p>.puzzle_column {
font-size: 0;
}</p> <p>#puzzle_left,#puzzle_right {
border: 1px solid #3b5998;
; l/ E! _+ w9 n& X. S  `}</p> <p>#puzzle_right,#puzzle_bottom a {
+ n. g3 m) w/ A) J' Xfont-size: 14px;
8 y  u2 t5 \9 S- ^margin: 10px 0 0 10px;
' X) Q6 T5 D8 w( E}</p> <p>#puzzle_bottom {
+ f+ [- z9 N/ C% v) @margin: 5px 0;
}</p> <p>#puzzle_canvas img {
* R: I4 y' m/ }( H6 d}</p> <p>#puzzle_canvas {
overflow: hidden;
9 ?$ Y+ b# k! Fwidth: 600px;
; ~  U+ |8 v5 a: ]* Pheight: 450px;
position: relative;
}</p> <p>#add_img input {
1 f& W% C/ R9 R' C: ]% Cposition: absolute;
1 a; e- |3 n7 \8 F% c% Jfont-size: 100px;
; t% i6 F6 E" V/ Zright: 0;
top: 0;
opacity: 0;
6 \6 s6 k. a; x2 D- x( a/ k# z}</p> <p>#add_img {
position: relative;
& K  j2 v4 V) {( v3 z: q  K  Z5 Qdisplay: inline-block;
background: #3b5998;
6 ]% D! P. e; y$ R' C* [( xborder-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #ffffff;
6 G+ H# N: X( @" w, V}</p> <p>#bg,#show_list {
display: none;
}</p> <p>#canvas_menu {
. {: |2 b& K# E: _8 Z2 I* z; Iborder: 1px solid red;
position: absolute;
+ j2 }3 P% G1 ?# j% b( ]8 B% a6 {# {4 Zz-index: 5;
top: 0;
* n; K4 T+ u" m" h* Wleft: 0;
display: none;
}</p> <p>#canvas_menu a {
display: inline-block;
}</p> <p>#test_canvas {
top: 700px;
}
html5_puzzle.js代码如下：
复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
& W; x. o. y& O5 Ss, canvasimg, canvaselement) {
3 y4 E1 V' D& a# b  y9 w, zvar img=[];
var canvas = new canvaselement.element();
canvas.init('canvid1', {
7 ^) B" ], Y5 P8 b+ e! }width : 600,
9 g; L! Z/ c( a3 qheight : 450
});
* ^' X; r! ]- [0 c( Qs('.puzzle_column img').on('click',function(e){
var index=this.getattribute('data-index');
* R' k$ v: p* T0 l# G$('bg').onload = function() {
/ @6 o2 t: x5 V3 o, Wvar ctx=$('canvid1-canvas-background').getcontext('2d');
5 {, o/ j; W5 S5 U: _) gctx.clearrect(0, 0,600,450);
img[0]=new canvasimg.img($('bg'), {});
; r: L7 v+ v5 B6 K. c+ Q  K& acanvas.setcanvasbackground(img[0]);
};
$('bg').setattribute('src','medium_img/'+index+'.jpg');
  B) v0 T+ e+ R: f! Y  We.stoppropagation();
- F; X* ?2 O* |- s& ]+ G});
var canvasdemo = function() {
9 A1 r/ P! p5 W1 m5 }: jreturn {
init : function() {
0 k5 p5 W2 w6 Gvar img_list=dom.query('#puzzle_canvas img');
$ w: l4 ]$ z7 Z4 `( l, ~- V5 E' Timg[0]=new canvasimg.img($('bg'), {});
, m  ~/ Q8 a4 A" j5 \s.each(img_list,function(i,el){
el.setattribute('data-index',i);
# J+ Z9 s; {3 u, U5 W6 L" \8 Kimg.push(new canvasimg.img(el, {}));
canvas.addimage(img[i+1]);
0 G3 a' j! X; @) z3 r2 e6 v});
+ v/ l* j$ ?1 ycanvas.setcanvasbackground(img[0]);
this.cornersvisible = (this.cornersvisible) ? false : true;
7 G' k, R7 @# _, c% h9 u% f  Z2 Dthis.modifyimages(function(image) {
image.setcornersvisibility(this.cornersvisible);
6 R" N$ x/ E, O" O* |});
) \" |8 u3 E/ v' i7 R* S},
modifyimages : function(fn) {
0 G3 d1 t  U  D( qfor ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
fn.call(this, canvas._aimages);
}
canvas.renderall(false,false);
1 |+ D. W1 Z1 Fs('#puzzle_canvas img').remove();
. k' G; j; H  _! t* G- I/ }img = [];
}
  @  S, ~/ {& v, s( E7 Z* v};
}();
function getcurimg(){
var oimg=canvas._prevtransform.target;
for(var i=0;i<canvas._aimages.length;i++){
if(canvas._aimages._oelement.src==oimg._oelement.src){
return i;
6 }! a1 c8 C' l" z/ A}
' b  c; s1 Y0 ?7 ]$ X}
}
+ W& j% z9 ~" C) Ps('#photo_delete').on('click',function(e){
var i=getcurimg();
! L% s+ l; D4 l1 U& b2 ?: j% ~canvas._aimages.splice(i,1);
$ Y; P( ?: D, C* \1 s$ r7 [canvas.renderall(true,true);
$('canvas_menu').style.display=none;
, g: W. O3 |# ^2 K- ]});
0 T$ }7 x( T7 F/ Y# i8 ^s('#photo_update').on('click',function(e){
$('test').click();
3 q0 ~; A3 ~; A/ m0 {; Z( k});
s('#test').on('change',function(e){
* @* I9 Z2 a0 E+ z0 w7 `: svar files = e.target.files || e.datatransfer.files;
( C4 D! D  o3 O# z' Z& }" p8 x; qvar reader = new filereader();
$ z: F/ Q7 O- Q1 G! Xreader.onload = (function() {
return function(e) {
2 `1 _" E! N) J. H6 ~' @var dataurl = e.target.result, canvas1 = document.queryselector('#test_canvas'), ctx = canvas1.getcontext('2d'), img = new image();
img.onload = function(e) {
if(img.width>200||img.height>200){
var prop=math.min(200/img.width,200/img.height);
img.width=img.width*prop;
* y; o9 S( }% y+ A" p3 limg.height=img.height*prop;
& S8 |6 L: R9 W}
% D' u0 D( v/ K" h( j; B. h( t# Jcanvas1.width=img.width;
canvas1.height=img.height;
ctx.drawimage(img, 0, 0, img.width, img.height);
s('#canvid1').html(s('#canvid1').html()+<img src='+canvas1.todataurl(image/jpeg)+'/>);
var t = window.settimeout(function() {
var i=getcurimg(),target=canvas._prevtransform.target;
. n  j, C, K8 L$ Dconsole.log(target);
canvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
) s2 g1 l* Q  Q) N& ~& c# Itop:target.top,
! n2 A; Q% o: P& xleft:target.left,
7 x, ~$ t5 @3 x9 uscalex:target.scalex,
scaley:target.scaley,
( d" y7 T: _( i/ j" z" y5 xangle:canvas.curangle
( n. w% D, X6 {5 I6 k});
canvas.rendertop();
$ c0 A* \+ m* E; C# mcleartimeout(t);
$ n1 l( E/ s0 ~+ Zs('#canvid1 img').remove();
) ]1 x+ f- @4 c, d/ S},1000);
};
img.src = dataurl;
};
})();
6 L4 P! s1 w5 mreader.readasdataurl(files[0]);
});
; S2 [5 T& P* h5 n/ s8 q) ]s('#upload_btn').on('click',function(){
7 c  r* T6 i/ `& q1 O. H  avar imgdata = canvas.canvasto('jpeg');
0 R& t: d% ]9 z% X' ^& hvar imgvalue = imgdata.substr(22);
  Y& L4 y5 a& @' f. Ms.ajax({
) N0 U# S3 `6 a  curl : 'http://localhost/html5/upload1.php',
3 e) l6 a# r8 _- ]% Xtype : 'post',
( |: E1 _' _. t) T6 v1 Jdata : {
0 G' }7 b8 N2 A6 himgdata : imgvalue,
! i( i# j$ @, `2 mfile_name :'mix_img.jpeg'
  T. M4 U; q9 d; g},
datatype : 'text',
, F& ^8 l$ y" Q: E" U' _0 ysuccess : function(data) {
! P+ V  a+ n8 m( e. p2 w0 D* walert(s);
}
});
});
! Q. ]4 _: E4 c% Z6 a});
至于用html5 input读取图片，这很简单就不贴出来了。
: U* g1 P+ \, ]) q8 B+ i. K% K
更多网页制作信息请查看： 网页制作

想骂你.却不知道从何骂起.

怎么就没人拜我为偶像那??

兄弟....表给偶丢丢哦....

看,刚说你眼神不好,你还就来劲了不是.

疯了.........

这篇帖子构思新颖，题材独具匠心，段落清晰，情节诡异，跌宕起伏，主线分明，引人入胜，平淡中显示出不凡的文学功底，可谓是字字珠玑，句句经典，是我辈应当学习之典范（不好意思回错帖了

一骂人就激动....

对于这种刚发的帖子，我总是毫不犹豫的顶了。如果火了就是个前排，可以混个脸熟，说不定谁好心就给粉了…稳赚不赔；如果沉了就感觉是我弄沉的，很有成就感，还能捞经验。