html5版canvas自由拼图实例

本文实例讲述了html5版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下：
代码运行效果如下图所示：
( t8 |9 G. q0 R

; ~' Y! j4 Q8 a" ]                               
登录/注册后可看大图

' o' D4 l+ U, q7 Bcanvaselement.js代码如下：
复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
: C3 H4 l2 p  _" Rvar canvas = window.canvas || {};
0 b5 u4 i* h' y5 u9 {0 s( O& e8 [(function () {
canvas.element = function() {};
canvas.element.prototype.fillbackground = true;
, u, V0 n- O. n! p3 t4 @2 _9 ]0 xcanvas.element.prototype.showcorners = false;
canvas.element.prototype.photoborder = true;
canvas.element.prototype.polaroid = false;
2 f, J: C. ~# r" f3 r: K- ocanvas.element.prototype._backgroundimg = null;
' i: x, `+ n& m* ycanvas.element.prototype._groupselector = null;
canvas.element.prototype._aimages = null;
/ `9 [1 ~) ~: E- s' P" V( e$ dcanvas.element.prototype._ocontext = null;
canvas.element.prototype._oelement = null;
' Q0 l8 @5 W) N6 Y" xcanvas.element.prototype._oconfig = null;
6 T0 E" `$ Y' F4 \  O5 Pcanvas.element.prototype._currenttransform = null;
canvas.element.prototype._prevtransform = null;
) Q- L8 h' D% gcanvas.element.prototype.curangle = null;
3 m7 Y9 Q. T( f- `. I  d8 @canvas.element.prototype.init = function(el, oconfig) {
7 o1 D& p, _& z$ V" f9 vif (el == '') {
* l: `; t+ y6 @8 p7 X/ t9 {return;
: N8 M. r  U/ b}
this._initelement(el);
this._initconfig(oconfig);
this._createcanvasbackground();
this._createcontainer();
# g5 u0 ]: f5 }4 e1 B, h" B* t) Qthis._initevents();
: r, d; l6 J* a& U9 z2 W& {! ethis._initcustomevents();
# s/ Q, {* H. c' ?( K, K( C3 r3 e};
' `9 m' Z& p8 |$ X' l5 @, l0 Icanvas.element.prototype._initelement = function(el) {
6 Q- s& ?- J. s3 P. rthis._oelement = document.getelementbyid(el);
this._ocontexttop = this._oelement.getcontext('2d');
};
canvas.element.prototype._initcustomevents = function() {
this.onrotatestart = new canvas.customevent('onrotatestart');
' y5 R2 U* r  h7 }3 othis.onrotatemove = new canvas.customevent('onrotatemove');
this.onrotatecomplete = new canvas.customevent('onrotatecomplete');
this.ondragstart = new canvas.customevent('ondragstart');
- C+ B/ w, C% f& C# |, jthis.ondragmove = new canvas.customevent('ondragmove');
. J* j" U/ a" t; g$ H8 Vthis.ondragcomplete = new canvas.customevent('ondragcomplete');
7 q4 X0 ]/ M* b% R};
/ k: P0 A0 s5 n/ Fcanvas.element.prototype._initconfig = function(oconfig) {
this._oconfig = oconfig;
this._oelement.width = this._oconfig.width;
1 X6 c/ \) o9 D! ythis._oelement.height = this._oconfig.height;
0 E6 Q$ U* n0 y$ Xthis._oelement.style.width = this._oconfig.width + 'px';
this._oelement.style.height = this._oconfig.height + 'px';
; m7 S: v9 a! i; c/ K6 U0 x5 z};
canvas.element.prototype._initevents = function() {
var _this=this;
s(this._oelement).on('mousedown',function(e){
' V' L) [! u) B$ L) }1 L7 ]_this.onmousedown(e);
});
! u/ j1 |4 u' F/ p: D* \- c0 vs(this._oelement).on( 'mouseup', function(e){
_this.onmouseup(e);
});
s(this._oelement).on('mousemove', function(e){
1 s# |6 J3 F: e4 F: \) y$ G4 v_this.onmousemove(e);
});
};
4 M- x. S5 ~+ F0 Z% |  T: M; hcanvas.element.prototype._createcontainer = function() {
+ r* X7 k" P6 B8 F& W/ Rvar canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-container';
var ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
ocontainer.width = this._oconfig.width;
ocontainer.height = this._oconfig.height;
$ c( y$ ^. n8 c0 U8 S9 yocontainer.style.width = this._oconfig.width + 'px';
  M7 b4 |3 S) s7 J# i. r% Locontainer.style.height = this._oconfig.height + 'px';
this._ocontextcontainer = ocontainer.getcontext('2d');
};
  Y& m1 H- `3 K. dcanvas.element.prototype._createcanvasbackground = function() {
var canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-background';
var obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
obackground.width = this._oconfig.width;
, s) ?4 ?7 S7 sobackground.height = this._oconfig.height;
obackground.style.width = this._oconfig.width + 'px';
obackground.style.height = this._oconfig.height + 'px';
this._ocontextbackground = obackground.getcontext('2d');
};
canvas.element.prototype.setcanvasbackground = function(oimg) {
this._backgroundimg = oimg;
var originalimgsize = oimg.getoriginalsize();
) u. X  k" r9 ~# p2 W8 \this._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
};
& L4 d1 C0 P' e, R$ g$ acanvas.element.prototype.onmouseup = function(e) {
- @% p9 v: v1 N# Fif (this._aimages == null) {
# f* ~' I8 j& y. W; f8 N$ Hreturn;
6 J+ R" ?. N7 S6 l. \8 Z}
if (this._currenttransform) {
% t" \% }: p. p1 |- N1 Dthis._currenttransform.target.setimagecoords();
}
if (this._currenttransform != null && this._currenttransform.action == rotate) {
5 T& J: _) U% z+ p- B4 Nthis.onrotatecomplete.fire(e);
} else if (this._currenttransform != null && this._currenttransform.action == drag) {
this.ondragcomplete.fire(e);
}
this._currenttransform = null;
this._groupselector = null;
this.rendertop();
' }$ Z& z/ w& N% t3 r$ L};
canvas.element.prototype.onmousedown = function(e) {
  |! }4 r. @4 x* \var mp = this.findmouseposition(e);
if (this._currenttransform != null || this._aimages == null) {
return;
}
. f& Q6 \" `  ~$ ?+ `* jvar oimg = this.findtargetimage(mp, false);
if (!oimg) {
this._groupselector = { ex: mp.ex, ey: mp.ey,
top: 0, left: 0 };
1 P$ S2 k' r& g/ R2 k}
else {
var action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
8 z5 S2 L; a1 Qif (action == rotate) {
6 F( b3 [  e3 a4 dthis.onrotatemove.fire(e);
1 F; U0 u9 k" ]} else if (action == drag) {
8 M! r8 s9 G1 W7 d3 Gthis.ondragmove.fire(e);
}
this._prevtransform=this._currenttransform = {
1 D6 R1 r! o- j' N# d* ztarget: oimg,
action: action,
scalex: oimg.scalex,
4 s- `3 h$ q' X& V, N6 K  U7 N. ]offsetx: mp.ex - oimg.left,
& J9 ]! m. `. v2 y$ q( ?offsety: mp.ey - oimg.top,
3 X" Q/ B$ I, c# ?# e$ r, jex: mp.ex, ey: mp.ey,
left: oimg.left, top: oimg.top,
) a7 n8 `# _8 W- h5 I4 P4 [theta: oimg.theta
( m0 }0 j/ R7 S" u$ B' r. m0 v* ^};
* Y( y8 y2 }) W) v+ X6 ~. p$('canvas_menu').style.transform='rotate('+oimg.theta*180/3.14+'deg)';
$('canvas_menu').style.left=oimg.left+px;
( O+ g# q/ |  `# v8 A, h- J) N. T$('canvas_menu').style.top=oimg.top+px;
0 H/ [; X; m! {4 n4 \$('canvas_menu').style.display=block;
this.renderall(false,false);
8 x  u6 _+ j8 K+ o9 G}
};
0 c* f# G: k. s0 B9 p2 lcanvas.element.prototype.onmousemove = function(e) {
var mp = this.findmouseposition(e);
/ M* G2 J' k) m; [" i7 ?, Bif (this._aimages == null) {
return;
}
7 q0 E: Z, l0 s0 U) R( b1 fif (this._groupselector != null) {
6 a8 {  \4 R% Y# Ethis._groupselector.left = mp.ex - this._groupselector.ex;
$ ~% T& W9 L& c1 U; ethis._groupselector.top = mp.ey - this._groupselector.ey;
1 q1 Z3 M1 z$ ~4 M" e% Ethis.rendertop();
}
else if (this._currenttransform == null) {
8 R! i! k0 k1 h. x" U& k& kvar targetimg = this.findtargetimage(mp, true);
% C0 Y- m0 O0 B- ^: I8 T) Bthis.setcursor(mp, targetimg);
}
& c. m+ B( P( v% {else {
if (this._currenttransform.action == 'rotate') {
this.rotateimage(mp);
( ~# X9 @! q7 n# ?this.scaleimage(mp);
' e9 c0 ]4 |3 U% B! S- lthis.onrotatemove.fire(e);
2 y  d) Z4 G; x2 P, x4 U% U; r2 J}
else {
2 G. @& W0 F* f( F& b. ^this.translateimage(mp);
! K( G7 R; L; w4 Q8 l1 `  z1 Ethis.ondragmove.fire(e);
}
this.rendertop();
}
};
# q5 W: Y  ^: b+ mcanvas.element.prototype.translateimage = function(mp) {
this._currenttransform.target.left = mp.ex - this._currenttransform.offsetx;
( @" O  B; c' ^7 }0 i2 M2 ]. ithis._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;
};
( a9 P& m. }5 H4 ]7 pcanvas.element.prototype.scaleimage = function(mp) {
var lastlen =
math.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
math.pow(this._currenttransform.ex - this._currenttransform.left, 2));
% t6 l: P. H5 P# Rvar curlen =
) S1 [! K1 M" Y7 A( Emath.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;
# u( C' [3 [7 y( j6 Hthis._currenttransform.target.scaley = curscaley;
, B- S0 r4 [! ^4 C( K6 s}
};
3 i) q- F- o1 a1 V' acanvas.element.prototype.rotateimage = function(mp) {
9 h* ^+ _9 |% G& t5 Avar lastangle = math.atan2(
1 R) ]% m. _/ X7 f3 J  h6 D3 Vthis._currenttransform.ey - this._currenttransform.top,
this._currenttransform.ex - this._currenttransform.left
- i: i) w/ |: U$ u+ E);
var curangle = math.atan2(
mp.ey - this._currenttransform.top,
mp.ex - this._currenttransform.left
9 \; z% M6 o: {- D2 {, V);
' E& h% X9 _+ m2 B7 [this._currenttransform.target.theta = (curangle - lastangle) + this._currenttransform.theta;
! `& Y  g1 O' L1 G2 B: q& rthis.curangle=this._currenttransform.target.theta*180/3.14;
+ ^: P. u- `. W! p0 I3 Q7 E$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
};
) E: C5 Z$ S) t) g6 Xcanvas.element.prototype.setcursor = function(mp, targetimg) {
( a8 _6 ?0 j% N# [  fif (!targetimg) {
: c+ E; Z6 [* j& @" S0 jthis._oelement.style.cursor = 'default';
6 T) V, w& e. c+ Q, P' \# E}
else {
, V) R- _( o# g! Rvar corner = this.findtargetcorner(mp, targetimg);
if (!corner)
{
% }5 Y2 L  P$ `$ @  Othis._oelement.style.cursor = 'default';
2 D/ K' m) Z) U4 X3 v" Y. v, I}
% d0 r9 O. W# b7 U9 ?' R: kelse
) ?4 ]/ v  @) D% u4 y9 V{
if(corner == 'tr') {
this._oelement.style.cursor = 'ne-resize';
+ s4 Z( R* v' U9 v% R' q}
else if(corner == 'br') {
this._oelement.style.cursor = 'se-resize';
. S; @+ D3 Z! r# T: D}
else if(corner == 'bl') {
* X2 L6 {1 h; p% \9 M. Nthis._oelement.style.cursor = 'sw-resize';
6 s3 ^) Z( M; ?) }3 l}
else if(corner == 'tl') {
& U) r2 n; u) d7 Kthis._oelement.style.cursor = 'nw-resize';
}
else {
7 x: N/ u7 e8 Q% Bthis._oelement.style.cursor = 'default';
}
) |/ S4 _6 i8 l/ W}
- _  U( H3 g  k" n$ @}
};
canvas.element.prototype.addimage = function(oimg) {
0 E; j$ z* p  S3 q2 Qif(s.isemptyobject(this._aimages)) {
this._aimages = [];
}
6 i3 f$ B- _7 Zthis._aimages.push(oimg);
this.renderall(false,true);</p> <p> };
$ B5 O1 t& G3 }! ?; m2 \canvas.element.prototype.renderall = function(allontop,allowcorners) {
7 ~9 T0 [& A8 b* pvar containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
9 a4 G7 E1 L- ]/ `* K& ncontainercanvas.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
0 N) u+ S, w2 W% ^if (allontop) {
var originalimgsize = this._backgroundimg.getoriginalsize();
8 j6 B3 t; k) e, kthis._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
5 T$ H1 h0 r1 ?' F. I9 _( P}
  V& R3 a- a5 b' F& gfor (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
this.drawimageelement(containercanvas, this._aimages,allowcorners);
* G' a6 M# D. ~5 V! O! v}
this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
};
" I. i- T0 I% Q% u( C# P& K0 tcanvas.element.prototype.rendertop = function() {
this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],true);
% T. n8 R! c8 aif (this._groupselector != null) {
this._ocontexttop.fillstyle = rgba(0, 0, 200, 0.5);
# _; ^* V) L8 }: h, h' C2 xthis._ocontexttop.fillrect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
1 _2 Y* J+ r* L0 : - this._groupselector.left),
$ r) q4 R- a% r: D8 N" t, fthis._groupselector.ey - ((this._groupselector.top > 0) ?
0 : - this._groupselector.top),
math.abs(this._groupselector.left),
math.abs(this._groupselector.top)
);
this._ocontexttop.strokerect(
* n0 \: T4 J* z7 ~8 }1 t& ]4 ^this._groupselector.ex - ((this._groupselector.left > 0) ?
7 W' [- K( X8 c. Q0 : math.abs(this._groupselector.left)),
this._groupselector.ey - ((this._groupselector.top > 0) ?
0 : math.abs(this._groupselector.top)),
/ X) Z8 H' V/ E' h/ Z% I9 J5 a2 A1 wmath.abs(this._groupselector.left),
# x5 C! }7 Y7 k( x% k* e8 cmath.abs(this._groupselector.top)
);
6 m2 u4 }: [/ [  R; W}
4 O- ^+ D, _/ q! t( Y$ K* e};
canvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
oimg.cornervisibility=allowcorners;
var offsety = oimg.height / 2;
  T6 L0 i7 P5 \6 l7 Mvar offsetx = oimg.width / 2;
7 B( O: u& h6 \7 p1 N1 L/ ?context.save();
context.translate(oimg.left, oimg.top);
! K2 R1 r! X+ B. zcontext.rotate(oimg.theta);
+ r; o/ Q3 Q) W, ucontext.scale(oimg.scalex, oimg.scaley);
this.drawborder(context, oimg, offsetx, offsety);
3 |0 _. b- V) C+ h0 dvar originalimgsize = oimg.getoriginalsize();
var polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
: y7 R+ ?: ]  X+ `: c6 Wcontext.drawimage(
oimg._oelement,
- originalimgsize.width/2,
((- originalimgsize.height)/2 - polaroidheight),
0 t: C1 b4 ^; b" coriginalimgsize.width,
originalimgsize.height
) d" S2 F1 k* q& p. Y);
0 w8 n+ b% D; Eif (oimg.cornervisibility) {
this.drawcorners(context, oimg, offsetx, offsety);
' N( X) f1 J4 ]3 M; N0 @+ E) q0 H}
. I& C/ N$ y2 p- R1 i- Mcontext.restore();
};
canvas.element.prototype._getimagelines = function(ocoords) {
return {
2 I0 D( D) e+ dtopline: {
o: ocoords.tl,
d: ocoords.tr
},
2 A" n2 c4 ~; L# zrightline: {
6 }. J: [$ X5 u, A/ mo: ocoords.tr,
d: ocoords.br
# K4 p6 d0 ^% f},
/ E+ _% ~4 q! xbottomline: {
- x9 P, h8 W6 k3 R# Co: ocoords.br,
' x2 v2 g% I: _/ c' Zd: ocoords.bl
},
: V2 c: t1 ~( b6 B  Y0 h! lleftline: {
o: ocoords.bl,
8 H6 H- {! Z8 s6 y0 Kd: ocoords.tl
}
};
};
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);
) S  k  f) p) o6 U, P) a9 [4 E" yvar xpoints = this._findcrosspoints(mp, ilines);
# O* {+ n& E1 l0 ^if (xpoints % 2 == 1 && xpoints != 0) {
3 h7 q2 L$ l0 y% yvar target = this._aimages;
  D) |$ K* Q$ H! V& `if (!hovering) {
this._aimages.splice(i, 1);
this._aimages.push(target);
" D% h6 n$ L, k% C  }+ t( }+ J}
return target;
6 }1 ^3 q9 y4 q/ Q}
. ^# `. F' N* H* T! A2 x! r# v, F" C}
% R; p7 O. W# P9 Greturn false;
};
0 N0 u, _+ t2 X! k" tcanvas.element.prototype._findcrosspoints = function(mp, ocoords) {
3 O- n$ d" `' A2 Z0 Jvar b1, b2, a1, a2, xi, yi;
var xcount = 0;
" F/ k6 k" @# e5 |- C: u; b9 U  E/ Pvar iline = null;
; F) z. c! m6 D  ^# xfor (linekey in ocoords) {
iline = ocoords[linekey];
3 r$ G( |8 ~: R& I6 E, {9 x5 R: vif ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
) a0 T$ l5 w  Q) i( |continue;
7 U0 m# R- p% {2 }, {* o8 \}
+ `* z! {/ G! T" R- G/ {! L4 ?if ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
4 o. [7 v% \( R+ E! X  {continue;
1 q% c$ y8 q7 t7 @' V1 B0 f! j/ f}
if ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
xi = iline.o.x;
/ D' I, m. }% \, |3 ]0 G4 kyi = mp.ey;
8 n& r$ B" @. K, p8 q}
9 \! \  B; R; }else {
! q5 A4 h! ^  i" O* a$ w# ib1 = 0;
b2 = (iline.d.y-iline.o.y)/(iline.d.x-iline.o.x);
a1 = mp.ey-b1*mp.ex;
a2 = iline.o.y-b2*iline.o.x;
xi = - (a1-a2)/(b1-b2);
- W; c- Y5 B9 Q7 |yi = a1+b1*xi;
}
' I# D3 C4 l# s7 o+ Lif (xi >= mp.ex) {
xcount += 1;
  x4 b: m2 q& n  j' G6 X4 ~}
8 d' I% h. L% G# h5 }if (xcount == 2) {
break;
- b; V! f. H2 d) f}
' }3 g, ^( y* t8 h  O5 ?. X9 Y4 ]8 q}
return xcount;
2 l  P& |9 }; m$ }7 D' q3 c! h. ^};
; a8 {2 P5 W0 m  c6 I: Vcanvas.element.prototype.findtargetcorner = function(mp, oimg) {
. L- i2 n& U$ w" v/ |var xpoints = null;
var corners = ['tl','tr','br','bl'];
for (var i in oimg.ocoords) {
9 N! F0 W( |1 Q0 j5 b% Kxpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
if (xpoints % 2 == 1 && xpoints != 0) {
return i;
}
}
return false;
7 v$ @0 J8 s6 M4 J+ g: `};
canvas.element.prototype.findmouseposition = function(e) {
var parentnode = (e.srcelement) ? e.srcelement.parentnode : e.target.parentnode;
var 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;
6 b6 \+ B8 s: M3 a" n; [return {
  j; r- b6 p7 G) iex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
ey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
screenx: e.screenx,
screeny: e.screeny
};
};
canvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
var outlinewidth = 2;
' i! `0 I9 d, ^9 zcontext.fillstyle = 'rgba(0, 0, 0, .3)';
context.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
context.fillstyle = '#fff';
4 c% h7 v$ g1 y3 {% @5 c9 Y( }context.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
};
8 u; R# k0 A2 ^3 A! kcanvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
context.fillstyle = rgba(0, 200, 50, 0.5);
# P* a( b" T+ r$ k. gcontext.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
- ]" E8 G3 a  ocontext.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
4 w% C1 r8 x% j  ~context.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
};
' K0 o$ g) p+ E/ y. e5 A+ @. ecanvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
6 ~5 h& F2 B3 |* e3 ncontext.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
* u/ D5 G! o% ^context.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
! D: H; W+ Z, [* Dcontext.clearrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
context.clearrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
context.restore();
};
canvas.element.prototype.canvasto = function(format) {
this.renderall(true,false);
var containercanvas =this._ocontexttop;
for (var i = 0, l = this._aimages.length; i < l; i += 1) {
var offsety = this._aimages.height / 2;
var offsetx = this._aimages.width / 2;
this.clearcorners(containercanvas, this._aimages, offsetx, offsety);
5 q, i3 O0 k0 [% [& o}
if (format == 'jpeg' || format == 'png') {
return this._oelement.todataurl('image/'+format);
}
+ o3 D% U# X" {! R8 b7 b- B};
canvas.customevent = function(type) {
this.type = type;
this.scope = null;
this.handler = null;
6 O4 i  w3 M' G# Xvar self = this;
this.fire = function(e) {
, ]  J- G/ g! {* E0 C# _if(this.handler != null) {
% e. S! u& n% t2 |  G; Cself.handler.call(self.scope, e);
! t% M: R5 x3 i( d6 X2 q$ w}
+ }1 z, h7 U+ t0 u# J};
  Z8 |  I. S7 |6 A! ^7 `};
6 |  S* v! Z4 ], i  z3 e8 c}());
- @1 P/ F9 @! sreturn canvas;
});
canvasimg.js代码如下：
复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
- p/ T, B$ |2 B" X! `4 |" Rvar canvas = window.canvas || {};
(function () {
canvas.img = function(el, oconfig) {
* a0 {1 T  t6 e- T; c& x* u5 X/ uthis._initelement(el);
9 C) @" _: d. Qthis._initconfig(oconfig);
this.setimagecoords();
& h" |- ?8 ]" ]/ p9 H9 H3 b};
' M* y* L( a6 |& [/ Jcanvas.img.css_canvas = canvas-img;
' c4 ?$ c3 f0 Evar default_config = {
top: {
  g6 O6 |# U9 ^* L& ?$ ^5 ]4 hkey: top,
( @) Q9 n+ v- q* p3 {+ X0 Evalue: 10
9 G8 ~" ?  H7 S% e  B& A},
- F2 {+ E) R! N9 @  e+ gleft: {
key: left,
$ V/ o' Z8 c" V1 z" s0 jvalue: 10
1 a1 ?2 \7 V& n7 I9 \( s5 m},
angle: {
0 k2 M$ U0 O& X9 E9 q6 J# O0 Skey: angle,
6 H4 r+ i8 Z0 A7 z! Vvalue: 0
: T% J) ~. I4 V7 v, }},
theta: {
key: theta,
value: 0
( P# j; u! U6 Z( `6 C},
8 G* L6 _2 k3 e7 Y. o) N+ \% kscale-x: {
key: scalex,
value: 1
},
scale-y: {
0 A2 d8 i9 ?0 tkey: scaley,
value: 1
  z8 A2 d( r& d# |% X" |3 k' U+ C},
cornersize: {
key: cornersize,
! {  c, f3 n- y! q# W; `+ e+ M" Jvalue:10
" R+ a. g+ Q9 o. o7 e5 T},
borderwidth: {
key: borderwidth,
value: 10
6 e6 J# M6 y7 ~2 o' ]},
$ z% c9 k/ S: r# k. D5 E2 B' Z6 Vpolaroidheight: {
key: polaroidheight,
( p! j( y, [9 q) k) @# Vvalue: 40
) C/ ~( W# L6 \. _1 S2 K3 k) c},
randomposition: {
3 o/ [% ]3 z% t% dkey: randomposition,
' H' B  f" L  m- y0 |: I# hvalue: true
}
# |% k( C: J3 z};
canvas.img.prototype._oelement = null;
canvas.img.prototype.top = null;
canvas.img.prototype.left = null;
canvas.img.prototype.maxwidth = null;
8 U# A7 N8 H2 B) ^1 \6 Scanvas.img.prototype.maxheight = null;
4 K* R/ a. r  u( wcanvas.img.prototype.ocoords = null;
  L% w( j, z- Q  r+ H0 Lcanvas.img.prototype.angle = null;
canvas.img.prototype.theta = null;
canvas.img.prototype.scalex = null;
canvas.img.prototype.scaley = null;
canvas.img.prototype.cornersize = null;
: \& [% e- V  [canvas.img.prototype.polaroidheight = null;
4 q2 M! T' o9 g) S. Y+ v" ycanvas.img.prototype.randomposition = null;
9 a9 c* @  ^3 ]0 u" Ucanvas.img.prototype.selected = false;
2 P! e& L4 N  r2 q* t3 \canvas.img.prototype.bordervisibility = false;
' V7 z* w, o% ncanvas.img.prototype.cornervisibility = false;
. Z. c1 ^( V/ {; n7 b, s5 Z, {canvas.img.prototype._initelement = function(el) {
" a5 W! a  i8 J9 m0 e1 H( j" ^this._oelement = el;
; A* [6 n+ C' k};
: @8 s& S7 M: X# W; R8 E4 J  Kcanvas.img.prototype._initconfig = function(oconfig) {
7 M* l+ v& w5 I% V" Avar skey;
1 C# ~. F/ X! ?# _- a/ `- tfor (skey in default_config) {
var defaultkey = default_config[skey].key;
  c9 v. Z$ N. e" eif (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
6 i7 E: k# J2 d. B  T% Sthis[defaultkey] = default_config[skey].value;
}
) }. d- r5 ]9 belse {
this[defaultkey] = oconfig[defaultkey];
* B' G: H6 g* W0 p" Y8 U  E}
}
0 X, e) P" j" Z3 ^7 S/ Dif (this.bordervisibility) {
& Z9 V+ i1 R4 r8 b5 T4 Mthis.currentborder = this.borderwidth;
% Q2 y& q0 r# ]$ d9 `2 g}
* C4 e  L7 W/ Eelse {
+ X5 y% B: {# [! hthis.currentborder = 0;
! h7 G3 y$ U8 u( W' X. e" K}
) ^& D; x: B( H( X5 Pvar normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
this._oelement.width = normalizedsize.width;
* x. N) \1 k' D/ Fthis._oelement.height = normalizedsize.height;
$ G# e( q' v: p$ m3 A* hthis.width = normalizedsize.width + (2 * this.currentborder);
1 F, L0 @+ V  d' u2 z, athis.height = normalizedsize.height + (2 * this.currentborder);
if (this.randomposition) {
this._setrandomproperties(oconfig);
1 ~# K9 n; [, H}
. n, `$ y: e, N2 I. Kthis.theta = this.angle * (math.pi/180);
! H6 [7 ?1 V# ?3 F& @: r1 N2 i};
canvas.img.prototype.getnormalizedsize = function(oimg, maxwidth, maxheight) {
, [- n, Q' v6 B- Pif (maxheight && maxwidth && (oimg.width > oimg.height && (oimg.width / oimg.height) < (maxwidth / maxheight))) {
, L1 u2 W5 P; |. _normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
4 k& o# Y: `( G( }$ ~. z# G, Nnormalizedheight = maxheight;
}
% o1 @. Y9 Z* H7 b/ Xelse if (maxheight && ((oimg.height == oimg.width) || (oimg.height > oimg.width) || (oimg.height > maxheight))) {
normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
normalizedheight = maxheight;
( t- H+ N0 l" z0 b( n9 W5 b# _}
  k& @/ \$ m0 zelse if (maxwidth && (maxwidth < oimg.width)){
: ~+ @) U! F" Z( n. R4 p+ Hnormalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
normalizedwidth = maxwidth;
3 `3 ^) N; `, Y0 z1 i}
else {
normalizedwidth = oimg.width;
normalizedheight = oimg.height;
}
) O& \0 t/ Y2 j" |. b5 Z3 Breturn { width: normalizedwidth, height: normalizedheight }
( ^0 d3 J1 ~( |( V* g},
canvas.img.prototype.getoriginalsize = function() {
) n4 Z4 g! f. J& |9 f: T; Ereturn { width: this._oelement.width, height: this._oelement.height }
};
/ v% K; J" B/ d# K9 }canvas.img.prototype._setrandomproperties = function(oconfig) {
% n+ R: w2 `2 rif (oconfig.angle == null) {
this.angle = (math.random() * 90);
# o% H$ x! E, f4 A% a! o}
9 K1 u" Z0 a7 N3 i5 m; f1 s9 Aif (oconfig.top == null) {
$ z3 z/ J0 @2 P) y! @$ Tthis.top = this.height / 2 + math.random() * 450;
}
- z* N$ b& q# ~2 S! f  D$ B. u( _$ _if (oconfig.left == null) {
  e* Y) ?) \% n: k9 `this.left = this.width / 2 + math.random() * 600;
1 t; e) p& |! x8 |; {5 J, v}
};
canvas.img.prototype.setcornersvisibility = function(visible) {
this.cornervisibility = visible;
};
canvas.img.prototype.setimagecoords = function() {
, p! u$ V' d: ^: Z) e  Dthis.left = parseint(this.left);
this.top = parseint(this.top);
/ D0 X" D, v6 |1 I/ J/ `& |' ethis.currentwidth = parseint(this.width) * this.scalex;
- F$ h; r! r7 c# R. K7 R8 x4 Ethis.currentheight = parseint(this.height) * this.scalex;
$ h$ ^: x) D4 @this._hypotenuse = math.sqrt(math.pow(this.currentwidth / 2, 2) + math.pow(this.currentheight / 2, 2));
+ ~7 J. Q# g" A6 gthis._angle = math.atan(this.currentheight / this.currentwidth);
$ \2 ]$ r. t/ Vvar offsetx = math.cos(this._angle + this.theta) * this._hypotenuse;
var offsety = math.sin(this._angle + this.theta) * this._hypotenuse;
var theta = this.theta;
+ I" g% z# S" j9 q0 G- B0 dvar sinth = math.sin(theta);
var costh = math.cos(theta);
/ E" F" C) J1 F! C+ |( K! ^var tl = {
9 y) x+ B1 S& Ox: this.left - offsetx,
y: this.top - offsety
};
var tr = {
& I% k) j0 S9 @1 ^0 @6 Wx: tl.x + (this.currentwidth * costh),
$ N$ j& s+ V+ s8 o& N1 Yy: tl.y + (this.currentwidth * sinth)
};
4 Z2 T: }% ^" l1 y; F7 F# g1 t$ ^var br = {
x: tr.x - (this.currentheight * sinth),
: N' B: n) P, M7 A3 S. Zy: tr.y + (this.currentheight * costh)
) X7 E. m/ b- d  j2 f: H  D  e8 P! m& O2 j};
. m+ Q  l# `9 G/ ~$ Tvar bl = {
x: tl.x - (this.currentheight * sinth),
y: tl.y + (this.currentheight * costh)
$ N6 @. i$ ?7 [};
: |: W0 Z$ U$ _0 K! X6 gthis.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
6 ^+ j8 `" ?) Bthis.setcornercoords();
};
; `# h/ Z1 w3 F- Acanvas.img.prototype.setcornercoords = function() {
var coords = this.ocoords;
7 s8 E% ?2 @* @, W+ k" }5 X* K  lvar theta = this.theta;
var cosoffset = this.cornersize * this.scalex * math.cos(theta);
# o1 W. F6 q) M( f" r, A3 H2 u% ]var sinoffset = this.cornersize * this.scalex * math.sin(theta);
coords.tl.corner = {
tl: {
x: coords.tl.x,
* ]$ f) _# K2 ?. z+ Y: c+ J! T7 Xy: coords.tl.y
3 y, [+ Z& ]! }0 |: Y},
  Y2 e# m; Z7 Ftr: {
9 Y$ H, v) S, q' m: Hx: coords.tl.x + cosoffset,
; R& ^0 Q* n, O2 q" Fy: coords.tl.y + sinoffset
6 P0 A) Y  ]# E# t},
' P1 P2 i  x6 t) }bl: {
x: coords.tl.x - sinoffset,
6 H2 ~6 Z2 [/ N3 {$ yy: coords.tl.y + cosoffset
}
; T) E* P; S- |: e: }2 Q2 W9 ]* [};
coords.tl.corner.br = {
x: coords.tl.corner.tr.x - sinoffset,
y: coords.tl.corner.tr.y + cosoffset
};
coords.tr.corner = {
  I& {$ |& v" ?4 t: |: Mtl: {
x: coords.tr.x - cosoffset,
y: coords.tr.y - sinoffset
},
+ [; U! L' B$ ^& r' @. h* Otr: {
( _$ k4 z4 s+ V* |x: coords.tr.x,
! W( Q: S' ?: m  M! i9 G0 B/ m+ J1 Gy: coords.tr.y
% ]' D" X0 S4 z},
br: {
x: coords.tr.x - sinoffset,
. Z8 C) x/ [9 hy: coords.tr.y + cosoffset
}
};
. v0 s5 g: F/ Q) Z" R# scoords.tr.corner.bl = {
x: coords.tr.corner.tl.x - sinoffset,
7 c- |* I) Y; F% @/ [+ {# [) w2 jy: coords.tr.corner.tl.y + cosoffset
};
$ p- h3 u% M3 y* ~2 W- A$ icoords.bl.corner = {
* a5 N( V1 Q6 x' a& G% }* \tl: {
- f& M% B- t3 H6 _( _x: coords.bl.x + sinoffset,
' q, j* E8 j1 `9 s$ b+ j6 X+ ~! Ey: coords.bl.y - cosoffset
},
  ~6 }9 _- o# ]0 cbl: {
x: coords.bl.x,
/ C2 G0 F  o; Q* ky: coords.bl.y
},
br: {
. g, v6 I% L9 M6 m  n: W* Px: coords.bl.x + cosoffset,
+ {. G5 ?. {  ^5 Vy: coords.bl.y + sinoffset
4 M" ^; w- I3 B* o$ t7 `9 b6 i}
};
coords.bl.corner.tr = {
+ d) M5 a- C* T$ i: ]) o4 [x: coords.bl.corner.br.x + sinoffset,
! b2 E2 ?( F0 _' ?& Wy: coords.bl.corner.br.y - cosoffset
& H2 y/ ]" B$ q' [6 c1 B* G};
coords.br.corner = {
/ ?! _' s1 |  _; Ztr: {
x: coords.br.x + sinoffset,
y: coords.br.y - cosoffset
1 Q: i, P0 T# {9 [: C/ O) f" r},
: y+ o; Q( b9 y) ]) wbl: {
x: coords.br.x - cosoffset,
y: coords.br.y - sinoffset
1 C$ i" T) T  Q+ L},
  S' i; k3 h0 H' h0 Tbr: {
x: coords.br.x,
y: coords.br.y
}
};
$ f7 O5 v6 T8 {& t: B* M0 B7 pcoords.br.corner.tl = {
/ ^) U% [, p) w1 q2 k2 n( B8 [' {x: coords.br.corner.bl.x + sinoffset,
% o4 o* _9 R7 L, py: coords.br.corner.bl.y - cosoffset
% Q6 b" o' w: b  N' M5 [};
};
}());
* F( T* @* A4 `& T4 m4 r8 r+ \return canvas;
});
puzzle.html代码如下：
复制代码代码如下:<!doctype html>
1 D1 K8 O0 {/ X: K1 L2 k<html>
4 _) \( o  `: K& ?  m2 c9 X( {, J<head>
* l2 l4 g, O, a: {( t<meta http-equiv=content-type content=text/html; charset=utf-8>
$ V0 X7 ^; }+ w; 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>
9 Z0 u% Z" I' K" k<script type=text/javascript src='html5_puzzle.js'></script>
. g+ C) E6 o1 Q( l) l</head>
6 [4 J0 C  x9 o" _<body>
<div id='html5_puzzle'>
<div id='puzzle_left'>
, p! F5 I+ T+ _3 |% w3 }) _  u<div class='puzzle_column'>
<ul>
. U4 y# S) j5 ~0 L<li><img src='small_img/1.jpg' data-index='1' /></li>
<li><img src='small_img/2.jpg' data-index='2' /></li>
. K4 H. Q( m; f9 f# c4 O<li><img src='small_img/3.jpg' data-index='3' /></li>
$ J/ k2 v- U0 w  g<li><img src='small_img/4.jpg' data-index='4' /></li>
  }! I9 H8 g. J  ~, q<li><img src='small_img/5.jpg' data-index='5' /></li>
) A( _; i% P# z</ul>
. C2 y2 [: v3 @3 j</div>
<div class='puzzle_column'>
<ul>
<li><img src='small_img/6.jpg' data-index='6' /></li>
; O$ {9 M, F3 \7 ~& E<li><img src='small_img/7.jpg' data-index='7' /></li>
8 z% r3 x# X* x) O; Q' X<li><img src='small_img/8.jpg' data-index='8' /></li>
9 H) E  P2 H; D9 i" T7 @<li><img src='small_img/9.jpg' data-index='9' /></li>
<li><img src='small_img/10.jpg' data-index='10' /></li>
; ~2 d, v  ^1 s2 ]+ ~# F* t: W</ul>
% {/ u( |0 m* O, ]9 k+ \' j3 e9 W</div>
5 R" a' h) E- X</div>
<div id='puzzle_right'>
<div id='puzzle_canvas'>
. W) s! u: P5 n6 |<canvas id=canvid1></canvas>
: s+ s. b6 G( v# U& J7 h<div id='canvas_menu'>
<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
href='javascript:void(0)' id='photo_update'>更改图片</a>
/ }( w. e' D# N$ f</div>
</div>
) s  Q$ h5 t1 v8 _8 F3 Y$ x8 a<img id=bg src=big_img/1.jpg width='600' height='450' />
' P* [3 v% ^7 W2 g+ [</div>
5 B" K8 @7 J$ J9 G: O' h  U<div id='puzzle_bottom'>
<a href='javascript:void(0)' id='add_img'><span>添加图片</span><input
type=file multiple= id='fileimage'> </a> <a
1 C: `' `6 W2 C; r: ehref='javascript:void(0)' id='upload_btn'>上传</a> <a>点击图片可以旋转，拖拽,
$ m6 {* \" H" D! a$ G+ R8 T8 c) m缩放哦!</a>
</div>
</div>
<input type=file id='test'>
<canvas id='test_canvas'></canvas>
- a7 y  `% p! X6 u</body>
2 ~/ `% ~% H# s& E0 i8 I</html>
html5_puzzle.css代码如下：
, v8 [$ n6 a4 v$ i  U# l% ^; ]& _+ {复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
font-size: 0;
}</p> <p>canvas {
background-color: transparent;
3 ~: V# q) g% [0 D7 ^7 oleft: 0;
position: absolute;
. z  q" t+ u  R5 S  k: F; ]top: 0;
) m4 a3 V8 X, Z% q8 e1 m2 u; x}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
display: inline-block;
' q, h& q7 k8 x( K6 l' `. j5 N}</p> <p>.puzzle_column li {
display: block;
8 I9 X) U! Y# T2 f8 p! K  @  K6 hmargin: 5px;
/ O& t% }0 e' B2 e/ {border: 1px solid #ffffff;
}</p> <p>.puzzle_column li:hover {
border: 1px solid #3b5998;
cursor: pointer;
}</p> <p>.puzzle_column {
" B9 d5 s/ L$ g! mfont-size: 0;
% H; e5 |$ |1 w% M" `2 p}</p> <p>#puzzle_left,#puzzle_right {
& x0 w7 g% V, w: eborder: 1px solid #3b5998;
}</p> <p>#puzzle_right,#puzzle_bottom a {
font-size: 14px;
$ K2 K- n5 W# ^! ~margin: 10px 0 0 10px;
" B4 W, a$ \' O# H3 X/ [% k}</p> <p>#puzzle_bottom {
( _& g: ~/ D: g/ E, Tmargin: 5px 0;
" a1 R* H, b+ K; n/ n3 L}</p> <p>#puzzle_canvas img {
}</p> <p>#puzzle_canvas {
overflow: hidden;
: g9 f  P% q* }! b0 z$ Xwidth: 600px;
height: 450px;
position: relative;
}</p> <p>#add_img input {
position: absolute;
font-size: 100px;
right: 0;
. k  s7 ^7 N) {( q2 a- I. L  Btop: 0;
- e* T# c: J$ B! }+ V4 ^opacity: 0;
}</p> <p>#add_img {
7 S# P" {! k/ q/ o0 Sposition: relative;
display: inline-block;
background: #3b5998;
2 q& z1 B0 j7 W( Y4 `& n6 B; Y9 fborder-radius: 4px;
padding: 4px 12px;
7 N* W8 |2 ^( U, |7 `" F2 {7 {" g* b  Noverflow: hidden;
color: #ffffff;
. h9 j/ m2 E  a$ u}</p> <p>#bg,#show_list {
7 u: n7 d- L& i+ z7 f. ldisplay: none;
/ u! A( p, o$ [9 Y2 \}</p> <p>#canvas_menu {
: S- I1 x% w  wborder: 1px solid red;
, z+ b7 M: ]! ^position: absolute;
z-index: 5;
top: 0;
left: 0;
display: none;
* D, L: J! I5 c( P}</p> <p>#canvas_menu a {
display: inline-block;
& [# q+ I' T1 E% B' I3 o# [1 c1 R}</p> <p>#test_canvas {
top: 700px;
6 x0 v7 a0 I- X+ o}
html5_puzzle.js代码如下：
复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
3 N& P1 p9 ^4 O6 L, d0 Is, canvasimg, canvaselement) {
8 H0 \% }3 {1 h& g" h4 yvar img=[];
var canvas = new canvaselement.element();
% r/ w$ u5 b* i' y1 `# u* a: b; N% Ucanvas.init('canvid1', {
width : 600,
height : 450
! t) p. z  ^6 E4 C, }});
s('.puzzle_column img').on('click',function(e){
2 z1 _! @4 ]: H& l* d% s& jvar index=this.getattribute('data-index');
$('bg').onload = function() {
0 ?: X+ h" a3 `3 W! a; ^var ctx=$('canvid1-canvas-background').getcontext('2d');
' t& S0 F2 H5 v+ n4 Octx.clearrect(0, 0,600,450);
6 u$ R1 v! g% Pimg[0]=new canvasimg.img($('bg'), {});
/ s, U% d8 [) W: w3 q4 s! Icanvas.setcanvasbackground(img[0]);
" R' E- b* x: Y8 a% A};
- |1 i( x1 V/ T) w4 O! B1 ~5 U6 [$('bg').setattribute('src','medium_img/'+index+'.jpg');
8 G3 O9 I9 M4 p) Ie.stoppropagation();
$ ]2 Z6 u' {4 f- y: J. G! K, h});
var canvasdemo = function() {
return {
! J  F3 u: V# U- w+ ]5 ]init : function() {
% z) D0 S+ d3 C5 {var img_list=dom.query('#puzzle_canvas img');
, m0 C- e1 \7 G1 p) pimg[0]=new canvasimg.img($('bg'), {});
s.each(img_list,function(i,el){
( o5 z0 Z3 G  l2 J* I5 Fel.setattribute('data-index',i);
, U, \+ L# P- B! I5 U+ ximg.push(new canvasimg.img(el, {}));
- W' c% y# ?4 Y' a7 V: k* Z8 {canvas.addimage(img[i+1]);
});
* ?" q- w+ J* p0 [; ]* b9 h# U* \canvas.setcanvasbackground(img[0]);
this.cornersvisible = (this.cornersvisible) ? false : true;
5 m+ r" h0 d9 [# |3 p- p2 Nthis.modifyimages(function(image) {
image.setcornersvisibility(this.cornersvisible);
});
},
modifyimages : function(fn) {
for ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
/ u& z7 B/ e; j7 Ifn.call(this, canvas._aimages);
2 L) k& h+ e" r- W}
2 y, |. O; q' a# Z$ ]- Ycanvas.renderall(false,false);
s('#puzzle_canvas img').remove();
0 o4 _9 f/ w4 U7 r8 \  X" W3 i) Eimg = [];
}
) S9 u4 t/ k. C5 {- H/ i};
}();
; g6 R/ \2 w6 |8 n& dfunction 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;
! M8 T+ n3 h% c+ v. x}
6 z1 N+ [6 f. H! j, s2 T  S$ m}
" i* d0 S5 F" ~% ^) v6 |- M}
: k: y8 A- t7 Z+ \' T# w' @5 }s('#photo_delete').on('click',function(e){
) Z% O: d& V; \) i6 _# m; M+ Bvar i=getcurimg();
( q8 r* Z3 k0 ~* Bcanvas._aimages.splice(i,1);
canvas.renderall(true,true);
$('canvas_menu').style.display=none;
6 N- C5 l8 p5 j. \$ t' }: m});
9 @, w2 e  t( z- N" Es('#photo_update').on('click',function(e){
$('test').click();
});
s('#test').on('change',function(e){
var files = e.target.files || e.datatransfer.files;
var reader = new filereader();
" q# ^  q1 G. E! z. ?reader.onload = (function() {
* b9 w! ?& `0 E4 [) Freturn function(e) {
% \+ a: T- e; T, g- ]var dataurl = e.target.result, canvas1 = document.queryselector('#test_canvas'), ctx = canvas1.getcontext('2d'), img = new image();
img.onload = function(e) {
0 m- P( g. m* x3 O9 Nif(img.width>200||img.height>200){
var prop=math.min(200/img.width,200/img.height);
img.width=img.width*prop;
img.height=img.height*prop;
  S* R9 f$ X3 ?, u}
canvas1.width=img.width;
% v  S4 [2 C, m% t- Ecanvas1.height=img.height;
8 R2 L" p+ z! X+ rctx.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;
$ Q# F9 G3 G7 U9 jconsole.log(target);
% Q( @* I, g& z5 [6 hcanvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
5 F) w8 @! {. _9 Z9 ftop:target.top,
left:target.left,
8 u+ W% ^' c8 t; v) v+ ]% mscalex:target.scalex,
scaley:target.scaley,
6 r1 R. R4 n9 p  o0 f1 Z+ k7 {! |1 p1 [angle:canvas.curangle
});
canvas.rendertop();
1 a! M+ W- K% a5 t8 ~cleartimeout(t);
s('#canvid1 img').remove();
( V& A4 |* ?  C  x! v$ m* c! i, t},1000);
" D6 G+ t6 _* o  |$ i1 A/ Z4 C' B};
img.src = dataurl;
, m/ ]1 T3 I6 E- \};
" x, w6 u% W/ t2 F9 z* R! M})();
reader.readasdataurl(files[0]);
});
s('#upload_btn').on('click',function(){
var imgdata = canvas.canvasto('jpeg');
var imgvalue = imgdata.substr(22);
s.ajax({
+ K& v9 @3 V" U8 h1 Q4 p! x& {url : 'http://localhost/html5/upload1.php',
. @1 U9 L, ]' V3 l3 b; mtype : 'post',
data : {
" }9 ]1 P: @& M2 C7 l5 himgdata : imgvalue,
file_name :'mix_img.jpeg'
},
( @, z, y, O% ]. q8 Edatatype : 'text',
& v& H1 J$ s$ `  wsuccess : function(data) {
alert(s);
}
});
});
6 i: `6 C* k+ g4 H+ \});
至于用html5 input读取图片，这很简单就不贴出来了。

更多网页制作信息请查看： 网页制作

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

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

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

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

疯了.........

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

一骂人就激动....

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