html5版canvas自由拼图实例

本文实例讲述了html5版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下：
, Z* @; a5 f+ Z$ f1 W+ t代码运行效果如下图所示：
! l" X4 @3 c3 @2 Z

                               
登录/注册后可看大图

canvaselement.js代码如下：
复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
(function () {
canvas.element = function() {};
: \4 l" h: }* F8 q  t/ dcanvas.element.prototype.fillbackground = true;
3 Z& c2 o$ K, F& ?2 ycanvas.element.prototype.showcorners = false;
canvas.element.prototype.photoborder = true;
3 T* z# n# ]+ m2 ]  }) x! kcanvas.element.prototype.polaroid = false;
canvas.element.prototype._backgroundimg = null;
3 i; h5 U2 e2 m3 M! M# gcanvas.element.prototype._groupselector = null;
canvas.element.prototype._aimages = null;
" B. k1 I( {1 \! h+ G4 Tcanvas.element.prototype._ocontext = null;
! N" c( e( X6 f8 e' Q& Jcanvas.element.prototype._oelement = null;
4 [6 B+ G2 D# Y7 e# ^8 o* Ycanvas.element.prototype._oconfig = null;
. m6 R) _1 S; Ecanvas.element.prototype._currenttransform = null;
canvas.element.prototype._prevtransform = null;
canvas.element.prototype.curangle = null;
canvas.element.prototype.init = function(el, oconfig) {
if (el == '') {
return;
, ~  e3 y' n0 m: s}
, ], S, s5 i0 e8 }" D/ j# N: Jthis._initelement(el);
/ u2 n3 K  O. r" E3 Mthis._initconfig(oconfig);
this._createcanvasbackground();
this._createcontainer();
& p5 H  ^) p) Y0 S, k' ?this._initevents();
this._initcustomevents();
};
2 ^) T0 H1 ^' z3 _; a6 ^' U3 [* I8 Jcanvas.element.prototype._initelement = function(el) {
' v  s6 @+ _8 p: Nthis._oelement = document.getelementbyid(el);
( |4 E. L& b/ t% G; g0 Sthis._ocontexttop = this._oelement.getcontext('2d');
, p: t& J7 d: u* {% X4 W' G};
canvas.element.prototype._initcustomevents = function() {
this.onrotatestart = new canvas.customevent('onrotatestart');
this.onrotatemove = new canvas.customevent('onrotatemove');
this.onrotatecomplete = new canvas.customevent('onrotatecomplete');
this.ondragstart = new canvas.customevent('ondragstart');
) X3 h* N) J4 W0 z3 |. F. Zthis.ondragmove = new canvas.customevent('ondragmove');
this.ondragcomplete = new canvas.customevent('ondragcomplete');
3 `, Q/ P7 U) e0 ]# R};
canvas.element.prototype._initconfig = function(oconfig) {
this._oconfig = oconfig;
this._oelement.width = this._oconfig.width;
this._oelement.height = this._oconfig.height;
# q4 [0 L; g. }this._oelement.style.width = this._oconfig.width + 'px';
, `1 ]) P2 y0 Z0 K5 z4 j# w: c' h: xthis._oelement.style.height = this._oconfig.height + 'px';
};
" \' u3 l& u; S, s1 P# b4 }0 I% acanvas.element.prototype._initevents = function() {
" ^( Q0 T# I$ ], ]  Pvar _this=this;
9 Y# E0 \8 _2 t3 ]1 z  w& Os(this._oelement).on('mousedown',function(e){
: ^( X# g" f9 g_this.onmousedown(e);
  E; _7 Q5 u9 ?' ?6 r/ l) k});
. C1 Y  w4 h/ `9 W: i) zs(this._oelement).on( 'mouseup', function(e){
_this.onmouseup(e);
});
. a/ e0 e9 s; n8 Z8 V- h- c/ Ns(this._oelement).on('mousemove', function(e){
8 }4 ?% X+ ]: P3 Y1 D' d0 u_this.onmousemove(e);
0 M# v' u! n3 R, z. `});
};
. K/ q/ j2 w( O. ~' V' A$ lcanvas.element.prototype._createcontainer = function() {
var canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-container';
/ K% M. L4 g: m/ n4 A% e! lvar ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
ocontainer.width = this._oconfig.width;
ocontainer.height = this._oconfig.height;
; Z# s7 `/ o, kocontainer.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';
$ P: c6 b3 Y: F. ?var obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
obackground.width = this._oconfig.width;
1 m5 u& p- a& `- S! eobackground.height = this._oconfig.height;
obackground.style.width = this._oconfig.width + 'px';
+ n% `* w% A  r% w& \obackground.style.height = this._oconfig.height + 'px';
. _! @6 T5 [" |this._ocontextbackground = obackground.getcontext('2d');
};
3 U' S) j+ l' S. @  q& i( N9 Scanvas.element.prototype.setcanvasbackground = function(oimg) {
! o' p1 J# ?1 r' j& zthis._backgroundimg = oimg;
6 c! ~) e1 Q% svar originalimgsize = oimg.getoriginalsize();
4 j# G2 _8 A. y8 T% Y" }this._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
8 s8 l' m7 t. c+ w& P};
# D" x" Q2 P4 i. @. xcanvas.element.prototype.onmouseup = function(e) {
if (this._aimages == null) {
return;
# f: ?# U9 B" A; i- h}
! }+ A  I2 C+ c5 O! M& ]if (this._currenttransform) {
this._currenttransform.target.setimagecoords();
& ^8 U& J% w9 P( N6 U}
5 J0 Y3 c. P  q# z/ }5 r, _if (this._currenttransform != null && this._currenttransform.action == rotate) {
this.onrotatecomplete.fire(e);
} else if (this._currenttransform != null && this._currenttransform.action == drag) {
this.ondragcomplete.fire(e);
4 d( B6 M/ U5 Q6 U* _}
) T9 ~. v; b) v8 h8 R: \" ]) }8 [this._currenttransform = null;
this._groupselector = null;
this.rendertop();
};
( ]" S8 [$ ]' B; E# fcanvas.element.prototype.onmousedown = function(e) {
var mp = this.findmouseposition(e);
, v% K0 N" J2 w6 `/ p5 Gif (this._currenttransform != null || this._aimages == null) {
return;
* F  X4 d: n/ l+ N}
' K, ~. O# i; Z2 ?$ s, P/ mvar oimg = this.findtargetimage(mp, false);
. X9 Y" ~6 Q% d, L4 l( r$ Lif (!oimg) {
this._groupselector = { ex: mp.ex, ey: mp.ey,
top: 0, left: 0 };
5 {1 q0 o9 P4 |) `}
, _% D8 X2 V7 h& [) pelse {
var action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
/ w. Q- V! S3 O' u. l* nif (action == rotate) {
4 W! h$ p2 F7 V, V6 D3 n0 Mthis.onrotatemove.fire(e);
} else if (action == drag) {
0 H, I  x& I0 H5 r# c6 Kthis.ondragmove.fire(e);
}
this._prevtransform=this._currenttransform = {
target: oimg,
3 s; F5 p2 y. {+ n6 B2 \action: action,
# S1 x' H3 ~$ L' V  Y; Q  v$ lscalex: oimg.scalex,
: _  E; f0 B9 Z! C' Y  M( Zoffsetx: mp.ex - oimg.left,
; a, X; {" X( r% X0 t+ N& ioffsety: mp.ey - oimg.top,
5 ^5 A2 I5 J4 t* }ex: mp.ex, ey: mp.ey,
left: oimg.left, top: oimg.top,
( o6 z8 F& m  b" k$ F' x, gtheta: oimg.theta
" {  q% K: w8 U# t+ n$ V3 [7 S};
5 |  n/ E8 K; `7 ]: n; X$('canvas_menu').style.transform='rotate('+oimg.theta*180/3.14+'deg)';
$ V  R/ {4 f5 V  n+ `# F$('canvas_menu').style.left=oimg.left+px;
$('canvas_menu').style.top=oimg.top+px;
$('canvas_menu').style.display=block;
( S& M; T5 f: ]3 u# \this.renderall(false,false);
}
! V5 |1 {$ Z) L# `( S+ N# x};
canvas.element.prototype.onmousemove = function(e) {
" t) @% b1 R2 Z/ Y9 g6 evar mp = this.findmouseposition(e);
" K7 E" b) F9 U; N( {( E1 kif (this._aimages == null) {
return;
9 F  O7 p; E! w# F! y}
6 R! J% y- A! K: Lif (this._groupselector != null) {
1 V9 [% G* j" G& C$ j* `2 Vthis._groupselector.left = mp.ex - this._groupselector.ex;
this._groupselector.top = mp.ey - this._groupselector.ey;
this.rendertop();
- @& e% h+ q$ U/ x}
else if (this._currenttransform == null) {
var targetimg = this.findtargetimage(mp, true);
this.setcursor(mp, targetimg);
) Z+ U" H1 I* W0 ~4 j}
) \* e3 _/ @* O2 p! Aelse {
if (this._currenttransform.action == 'rotate') {
this.rotateimage(mp);
this.scaleimage(mp);
this.onrotatemove.fire(e);
}
& P3 x- @2 }: C; e/ pelse {
8 b, F# M5 }# s3 athis.translateimage(mp);
this.ondragmove.fire(e);
}
this.rendertop();
6 y& h# \+ i% V9 W9 C}
};
canvas.element.prototype.translateimage = function(mp) {
! E" h  N6 m! othis._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;
. J, V& b3 h. @5 b4 E$ u7 K$('canvas_menu').style.top=this._currenttransform.target.top +px;
};
canvas.element.prototype.scaleimage = function(mp) {
var lastlen =
6 a/ g5 L* u2 {9 w5 _# j, gmath.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
math.pow(this._currenttransform.ex - this._currenttransform.left, 2));
, r6 Q/ I! X; d3 v$ `  kvar curlen =
math.sqrt(math.pow(mp.ey - this._currenttransform.top, 2) +
math.pow(mp.ex - this._currenttransform.left, 2));
var curscalex= this._currenttransform.scalex * (curlen / lastlen);
6 F; m& v% @' f1 x$ v' Cvar curscaley=this._currenttransform.target.scalex;
8 {5 R: K3 O" z' u# _8 m( X2 gif(curscalex>0.7&&curscaley>0.7){
# n1 @2 c6 ?7 J; O" E0 Pthis._currenttransform.target.scalex =curscalex;
this._currenttransform.target.scaley = curscaley;
}
2 \5 \  ]4 v$ i& m};
4 _8 j; s% n: g" f+ v5 jcanvas.element.prototype.rotateimage = function(mp) {
: S3 ?, N% G$ N9 Lvar lastangle = math.atan2(
this._currenttransform.ey - this._currenttransform.top,
3 L* P# O; D% z4 u# q& q6 m2 l2 |this._currenttransform.ex - this._currenttransform.left
2 y4 v; ?& X* b7 b);
var curangle = math.atan2(
mp.ey - this._currenttransform.top,
mp.ex - this._currenttransform.left
! G, w: J6 x3 A" \);
9 [/ F, p( c, z9 _+ dthis._currenttransform.target.theta = (curangle - lastangle) + this._currenttransform.theta;
# H7 Z9 X8 u; D% Uthis.curangle=this._currenttransform.target.theta*180/3.14;
$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
3 H; ~$ f! V# R$ ^/ m' J3 `};
canvas.element.prototype.setcursor = function(mp, targetimg) {
if (!targetimg) {
this._oelement.style.cursor = 'default';
$ @! p9 c0 L; E0 I' d}
; k' }# [3 W2 J$ {& g& M/ Oelse {
0 z# l2 c( a4 wvar corner = this.findtargetcorner(mp, targetimg);
! ^  q$ N* G: e2 w& b% u" ~if (!corner)
{
8 h3 W, {+ A& e3 Q7 t5 Uthis._oelement.style.cursor = 'default';
$ B: G1 O# Y, u+ k9 \8 u+ }! D}
else
6 Y5 P1 y& _' z{
if(corner == 'tr') {
. Q5 e* b$ D- l. y3 ~( ythis._oelement.style.cursor = 'ne-resize';
; h& t7 C( p* F# ^3 q9 K* H6 B) b}
else if(corner == 'br') {
' G3 L/ q  ?7 l# B" o) sthis._oelement.style.cursor = 'se-resize';
}
else if(corner == 'bl') {
$ r2 M* ~- H; F) uthis._oelement.style.cursor = 'sw-resize';
}
  E! B# E, G3 s5 f/ celse if(corner == 'tl') {
this._oelement.style.cursor = 'nw-resize';
9 f7 a' b7 t6 N/ ^}
7 Z8 S! C* c: Y9 ^else {
" R( {2 Y: B2 ?% K3 L7 othis._oelement.style.cursor = 'default';
! d8 |% T% G1 t7 m' z2 l}
: l6 b1 f& J  M0 e5 q$ t5 R}
}
1 J% U- o( z8 |};
canvas.element.prototype.addimage = function(oimg) {
if(s.isemptyobject(this._aimages)) {
- s" l3 M1 j: H/ G& qthis._aimages = [];
; M+ v, h5 }5 J6 U) J4 ~}
0 f- y0 i3 ]2 \this._aimages.push(oimg);
4 s  x  p3 \5 ~* qthis.renderall(false,true);</p> <p> };
+ }% a, j( E+ X0 R" Y' ]canvas.element.prototype.renderall = function(allontop,allowcorners) {
var containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
" K0 C! ^1 n. f1 ~" e3 Z6 Z0 \this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
1 I3 O# T5 w. rcontainercanvas.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
0 R$ q" p+ H$ jif (allontop) {
var originalimgsize = this._backgroundimg.getoriginalsize();
7 U- @+ r" T0 v2 Z% P8 o6 D1 Athis._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
' ^1 u9 O5 Y' D! U}
for (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
4 D; Q' u2 g- r' P  e; d3 Lthis.drawimageelement(containercanvas, this._aimages,allowcorners);
}
this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
};
, o( u4 M8 H# q  J8 l* scanvas.element.prototype.rendertop = function() {
( @/ x4 i, o7 B6 l- e( j% othis._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
2 u6 {/ o( F/ B  {) ?this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],true);
if (this._groupselector != null) {
this._ocontexttop.fillstyle = rgba(0, 0, 200, 0.5);
this._ocontexttop.fillrect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
9 L- |' z/ _; r: {2 h2 d- M! o0 : - this._groupselector.left),
this._groupselector.ey - ((this._groupselector.top > 0) ?
) _# V/ N( z8 I0 : - this._groupselector.top),
6 ~* q& [  C' gmath.abs(this._groupselector.left),
+ d( [8 t0 L/ a* _/ c4 \math.abs(this._groupselector.top)
1 R/ j1 y* q4 r/ S);
. ~* c( H# m: qthis._ocontexttop.strokerect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
- `7 X" t/ A" r1 p8 A$ C( v0 : math.abs(this._groupselector.left)),
/ S/ Q. w8 ]* \2 p9 Nthis._groupselector.ey - ((this._groupselector.top > 0) ?
9 u( Y- n: d9 J5 a% p2 f0 : math.abs(this._groupselector.top)),
math.abs(this._groupselector.left),
8 s! A) Y# ^" L- |# Lmath.abs(this._groupselector.top)
- e2 p3 @! @1 p4 k" H6 l);
) E1 \, k  F- A- S/ u% f6 M9 y/ D}
};
3 o7 w2 r1 ?0 Y4 A+ X1 fcanvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
5 t$ v' f% V% I. x  e% Joimg.cornervisibility=allowcorners;
var offsety = oimg.height / 2;
var offsetx = oimg.width / 2;
, {7 S* \- x- C. ocontext.save();
; _# i9 L% {! G  Ccontext.translate(oimg.left, oimg.top);
context.rotate(oimg.theta);
context.scale(oimg.scalex, oimg.scaley);
9 _7 c: e6 H0 |/ s' {this.drawborder(context, oimg, offsetx, offsety);
var originalimgsize = oimg.getoriginalsize();
var polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
context.drawimage(
oimg._oelement,
1 o! y% j* e+ f  L+ _4 w- originalimgsize.width/2,
- b* F, x  w6 i6 |" v" W$ R((- originalimgsize.height)/2 - polaroidheight),
originalimgsize.width,
2 p9 i1 y5 y0 q3 j  E6 e% ioriginalimgsize.height
);
if (oimg.cornervisibility) {
+ z* q/ K# C& f  N2 f, vthis.drawcorners(context, oimg, offsetx, offsety);
}
context.restore();
};
2 ]) j5 o7 r( \- W8 M, Ocanvas.element.prototype._getimagelines = function(ocoords) {
return {
/ l4 ]& P: Z" }& q$ B3 I) M9 ttopline: {
3 R/ `7 }; f% M; O, M- R0 N- Do: ocoords.tl,
d: ocoords.tr
- w$ c8 i8 M' \$ y9 q  s7 R7 F},
  M& V, N; p6 ^. y& Crightline: {
o: ocoords.tr,
d: ocoords.br
},
; o4 m/ o2 \* c8 ^bottomline: {
o: ocoords.br,
d: ocoords.bl
# v+ N8 F  z% c& K},
leftline: {
o: ocoords.bl,
d: ocoords.tl
8 M3 @" o6 e+ s" f5 d}
};
};
! y4 @! u; K) v+ Icanvas.element.prototype.findtargetimage = function(mp, hovering) {
9 C; V0 ?, c, e8 W, dfor (var i = this._aimages.length-1; i >= 0; i -= 1) {
var ilines = this._getimagelines(this._aimages.ocoords);
+ Z" L0 s' C5 x* d3 E1 ?var xpoints = this._findcrosspoints(mp, ilines);
if (xpoints % 2 == 1 && xpoints != 0) {
var target = this._aimages;
1 p+ A% T* p. n* o' x1 Nif (!hovering) {
1 h# o3 [7 v+ g$ Vthis._aimages.splice(i, 1);
6 Q9 b: {7 i) F0 athis._aimages.push(target);
}
return target;
& S4 `4 a& q4 k$ a: e8 Y# x, Q}
}
* R3 ?- C5 X7 E4 H: l! ~return false;
# ?) c/ M7 ^8 U8 D5 [};
5 T5 W9 o, S. H' y- O# jcanvas.element.prototype._findcrosspoints = function(mp, ocoords) {
) Y& G& q5 v2 @9 ~3 D4 l' @4 N0 ?var b1, b2, a1, a2, xi, yi;
9 Y# u0 ~- E" q' f2 [var xcount = 0;
var iline = null;
for (linekey in ocoords) {
3 N- g& y* b" Y4 wiline = ocoords[linekey];
& d' b* j8 b6 fif ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
% o2 `9 v. J- icontinue;
}
4 F0 {+ _0 m4 X8 Zif ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
: T. e" i! B1 y0 @- K2 |3 ocontinue;
}
if ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
7 J2 L6 R0 B( q7 Uxi = iline.o.x;
; J0 e4 a' X" t5 A& Uyi = mp.ey;
5 {% N; p& U8 N4 l}
1 k/ F9 k$ N6 `4 [- O3 ~$ y3 ielse {
b1 = 0;
9 l0 ^6 A2 u4 W, U  n$ H! P, Db2 = (iline.d.y-iline.o.y)/(iline.d.x-iline.o.x);
2 P# m% ~2 a. F9 i: [a1 = mp.ey-b1*mp.ex;
* G/ b5 X1 w# z+ t  B/ N1 C' ?! Ka2 = iline.o.y-b2*iline.o.x;
xi = - (a1-a2)/(b1-b2);
yi = a1+b1*xi;
}
if (xi >= mp.ex) {
& Q3 j9 ]/ u8 @xcount += 1;
# @' Z6 M8 R5 f: p( t}
if (xcount == 2) {
8 [: i8 R- z1 s4 Y# }$ D) {# ^break;
}
}
return xcount;
5 |; l: T! c' P# {};
canvas.element.prototype.findtargetcorner = function(mp, oimg) {
var xpoints = null;
/ ]( A% Z5 C2 X9 p7 p1 Xvar corners = ['tl','tr','br','bl'];
for (var i in oimg.ocoords) {
9 a4 C* ^+ Q7 \$ Dxpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
8 N3 S& E# Z% @; c# u5 I% Hif (xpoints % 2 == 1 && xpoints != 0) {
  ]. L( _8 X" G  ^6 Vreturn i;
4 `! D' U$ B, ^! i9 S- J% f}
+ a3 }4 b5 `$ d5 o}
" F5 m! ]) _) J6 X% I' _return false;
};
canvas.element.prototype.findmouseposition = function(e) {
- K. ]" j) ]  n' D3 ]; avar parentnode = (e.srcelement) ? e.srcelement.parentnode : e.target.parentnode;
var issafari2 = !s.support.ie&&!s.support.firefox;
2 k/ M' z  j( K$ ]2 I% kvar scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
$ A& y8 t7 m! W3 y, P2 o4 U2 uvar safarioffsetleft = (issafari2) ? e.target.ownerdocument.body.offsetleft + scrollleft : 0;
var safarioffsettop = (issafari2) ? e.target.ownerdocument.body.offsettop + scrolltop : 0;
return {
# W8 ?( P) s7 U. H0 vex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
ey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
. I3 @" I' ?$ h. Xscreenx: e.screenx,
screeny: e.screeny
! s2 q0 \2 j5 C( c& K  T};
1 o% Y7 N& o3 U6 s: b};
canvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
/ q4 T: a6 x. Z& @: W6 cvar outlinewidth = 2;
context.fillstyle = 'rgba(0, 0, 0, .3)';
+ `& S/ j' @! a  T4 r7 L: U  |context.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
! S0 n! Z* D2 H2 Hcontext.fillstyle = '#fff';
context.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
};
canvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
& H5 D1 _+ }0 }8 d7 c6 c8 Scontext.fillstyle = rgba(0, 200, 50, 0.5);
" s' e3 o0 N: F) econtext.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
) J' b3 S/ o6 O) \0 J% \$ x# Ccontext.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
};
) R2 M: b' Q& P8 D; |canvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
3 r( ~3 U1 T4 I$ _, gcontext.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
% j# Q4 O3 f0 f0 g: Kcontext.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
# {5 j" f6 N7 V7 R6 K' Fcontext.clearrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
( y3 h9 G$ h' {0 o. H4 V6 t" h  h1 |context.clearrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
0 v! a6 {# w! c) g2 Z' Scontext.restore();
};
canvas.element.prototype.canvasto = function(format) {
; B3 r( Q+ b8 X) z$ h8 c! uthis.renderall(true,false);
3 z" C9 I4 q; x3 N+ |) Qvar containercanvas =this._ocontexttop;
for (var i = 0, l = this._aimages.length; i < l; i += 1) {
9 K7 U& {! L- n; [1 z$ Ovar offsety = this._aimages.height / 2;
, e0 j4 N& F+ T( G; Q5 X$ Bvar offsetx = this._aimages.width / 2;
this.clearcorners(containercanvas, this._aimages, offsetx, offsety);
) q! l/ M1 z  ?: Z3 r" x}
3 u# j& b. s) E' y9 Z' xif (format == 'jpeg' || format == 'png') {
return this._oelement.todataurl('image/'+format);
}
/ E8 }1 z. x, [" O# b6 [0 ^5 L};
  y( D0 d  E9 `2 s# ]. [* Acanvas.customevent = function(type) {
7 E, \' U8 K5 I8 n1 Mthis.type = type;
this.scope = null;
" d! @" G: P: [6 d9 [this.handler = null;
var self = this;
this.fire = function(e) {
# ~4 j- {& @/ m9 l* l' F/ qif(this.handler != null) {
self.handler.call(self.scope, e);
}
};
};
}());
return canvas;
});
# w" \5 a- {$ D; jcanvasimg.js代码如下：
复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
. ~. M& n* ~5 X/ j+ {9 w. `var canvas = window.canvas || {};
(function () {
canvas.img = function(el, oconfig) {
$ T0 H, L; g, q8 B2 r7 ?this._initelement(el);
/ s6 J. z4 F& B) Z# A4 v( ?this._initconfig(oconfig);
/ T1 _( h% Q7 Z1 O" }this.setimagecoords();
};
canvas.img.css_canvas = canvas-img;
var default_config = {
top: {
key: top,
value: 10
},
+ ]" E% a0 f  s+ ~, fleft: {
key: left,
$ N; _8 E2 g! F  x& ?, I9 U1 ?value: 10
, q( S" E7 I  p. |; ]: ]},
; h+ h+ s8 b( ^" b/ {9 mangle: {
, N3 R0 G& d% {; o: }key: angle,
value: 0
},
1 ?% P: D- u: x( [6 t; Jtheta: {
key: theta,
value: 0
},
scale-x: {
key: scalex,
/ K  m  _$ m+ u5 g* l) pvalue: 1
9 S) F1 I4 v9 T% T' Q2 m$ `},
+ p( k7 c7 K9 T0 R% Q* Hscale-y: {
& G4 L, H( b2 ikey: scaley,
value: 1
3 m" @4 J( A3 g+ s+ l- [},
cornersize: {
key: cornersize,
# N3 h7 m: U8 s+ ~2 O# kvalue:10
7 O; n: e; e/ _$ V/ m( R1 k},
borderwidth: {
key: borderwidth,
6 m" V7 x' w6 D8 M* s8 pvalue: 10
},
' f" ~7 K/ I, b# u  v* J! S7 V6 T. }polaroidheight: {
key: polaroidheight,
value: 40
+ N- n$ }! r+ j; D! M},
randomposition: {
key: randomposition,
5 x  X! `9 d4 R+ Svalue: true
2 d+ @# ~6 c0 }/ E}
9 g$ n" N+ o+ ~: v! G};
canvas.img.prototype._oelement = null;
canvas.img.prototype.top = null;
canvas.img.prototype.left = null;
' O+ p7 [/ M8 v+ m$ e7 Ucanvas.img.prototype.maxwidth = null;
+ g+ V7 z* d( N8 x/ n7 W; K) ocanvas.img.prototype.maxheight = null;
canvas.img.prototype.ocoords = null;
  D: c% h0 z) D& {8 f; wcanvas.img.prototype.angle = null;
+ r2 W2 ~0 G8 E' ucanvas.img.prototype.theta = null;
canvas.img.prototype.scalex = null;
9 p9 L6 v" O) D  `/ ncanvas.img.prototype.scaley = null;
" m* [3 D# E9 J! w4 Dcanvas.img.prototype.cornersize = null;
- P! O  b$ R0 \& x& I. T6 s5 Rcanvas.img.prototype.polaroidheight = null;
4 q9 {; F% ]( y1 q1 Bcanvas.img.prototype.randomposition = null;
canvas.img.prototype.selected = false;
4 c6 w  C+ _5 o/ Vcanvas.img.prototype.bordervisibility = false;
( D; h* ]: x; r* P! V' T* Scanvas.img.prototype.cornervisibility = false;
0 o+ d+ {3 g/ Ecanvas.img.prototype._initelement = function(el) {
4 w! {; k- c+ s$ C) vthis._oelement = el;
# E. P' Y% f0 w};
canvas.img.prototype._initconfig = function(oconfig) {
var skey;
' Z' l8 L( e( y  A% F9 X# |for (skey in default_config) {
2 u6 U8 A4 i1 D- _var defaultkey = default_config[skey].key;
4 l' a( f& G% ^" Y) iif (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
this[defaultkey] = default_config[skey].value;
: t$ a  m7 T- c+ N}
/ h6 H3 {) n  m* C! r  Delse {
this[defaultkey] = oconfig[defaultkey];
}
}
if (this.bordervisibility) {
8 O* w5 O8 _2 L! x# f/ hthis.currentborder = this.borderwidth;
/ A% G  J* |9 z1 B* }) e  A. ^" P}
else {
this.currentborder = 0;
}
, y. g- O1 l# Q8 T3 F! ?2 Q1 mvar normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
this._oelement.width = normalizedsize.width;
this._oelement.height = normalizedsize.height;
5 u9 V8 Z6 ~$ lthis.width = normalizedsize.width + (2 * this.currentborder);
0 r1 M- L& K+ c' ^this.height = normalizedsize.height + (2 * this.currentborder);
if (this.randomposition) {
this._setrandomproperties(oconfig);
}
# p- J% l3 Z+ c. ]this.theta = this.angle * (math.pi/180);
3 q) v7 N/ V' I# e, v6 O};
! a+ z+ G2 f* D/ b/ W% s+ v; Ecanvas.img.prototype.getnormalizedsize = function(oimg, maxwidth, maxheight) {
6 o" V1 w: a6 T5 @% wif (maxheight && maxwidth && (oimg.width > oimg.height && (oimg.width / oimg.height) < (maxwidth / maxheight))) {
2 @+ |5 H! N0 _normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
normalizedheight = maxheight;
8 N5 D- q8 r4 S! ^7 s! s- x- c}
3 Y4 q' {3 E& `6 Q& Selse if (maxheight && ((oimg.height == oimg.width) || (oimg.height > oimg.width) || (oimg.height > maxheight))) {
normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
- q7 t: W) y  a+ M7 b# B- w6 gnormalizedheight = maxheight;
# ?4 W. s  c3 S' v9 ~+ [}
else if (maxwidth && (maxwidth < oimg.width)){
. @' T3 R" W5 M8 @4 h- a( a" n+ Wnormalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
+ F7 w) {6 V( a2 K; e/ p& ~) {normalizedwidth = maxwidth;
}
; [0 M0 H% S2 aelse {
normalizedwidth = oimg.width;
1 ]9 B" r. B! {; W, O) c! D5 Cnormalizedheight = oimg.height;
}
return { width: normalizedwidth, height: normalizedheight }
},
canvas.img.prototype.getoriginalsize = function() {
' P# p- b" A9 \7 T$ [  Breturn { width: this._oelement.width, height: this._oelement.height }
, ~( h* ]/ ~+ b! v};
canvas.img.prototype._setrandomproperties = function(oconfig) {
) E' v+ G' r- \if (oconfig.angle == null) {
this.angle = (math.random() * 90);
" M% G; Q, x  U; |! E. _}
if (oconfig.top == null) {
( i5 v' |- z. ?( y- g; Ithis.top = this.height / 2 + math.random() * 450;
}
4 F% g+ D: V' Y& c$ B5 Tif (oconfig.left == null) {
this.left = this.width / 2 + math.random() * 600;
}
};
canvas.img.prototype.setcornersvisibility = function(visible) {
this.cornervisibility = visible;
};
% {8 p& Q# X* y6 a" P4 X2 Hcanvas.img.prototype.setimagecoords = function() {
7 X, ~# G2 M6 C5 V8 c5 J7 kthis.left = parseint(this.left);
this.top = parseint(this.top);
7 `9 s3 [0 I3 d+ c! w5 Tthis.currentwidth = parseint(this.width) * this.scalex;
* o8 W3 I- f6 Y7 Rthis.currentheight = parseint(this.height) * this.scalex;
; q/ J" {7 Z8 U5 X/ \% F' |this._hypotenuse = math.sqrt(math.pow(this.currentwidth / 2, 2) + math.pow(this.currentheight / 2, 2));
this._angle = math.atan(this.currentheight / this.currentwidth);
# }9 h& j5 _! qvar offsetx = math.cos(this._angle + this.theta) * this._hypotenuse;
var offsety = math.sin(this._angle + this.theta) * this._hypotenuse;
var theta = this.theta;
var sinth = math.sin(theta);
& v& y+ a' x3 t' Q+ dvar costh = math.cos(theta);
2 b% `; V6 ?6 y% dvar tl = {
x: this.left - offsetx,
y: this.top - offsety
0 ?! Q, t- T1 I$ [1 c1 r+ _};
+ M$ d) J! d/ ?. dvar tr = {
* ]7 k! }) L7 z; {x: tl.x + (this.currentwidth * costh),
6 C) D" E) w1 [. Xy: tl.y + (this.currentwidth * sinth)
};
var br = {
x: tr.x - (this.currentheight * sinth),
y: tr.y + (this.currentheight * costh)
$ v: @1 F: o. c6 w& o, e( ]};
var bl = {
x: tl.x - (this.currentheight * sinth),
$ @2 j3 n0 c+ i8 L/ n7 ?4 L5 i; |y: tl.y + (this.currentheight * costh)
& V& g1 h9 D. j) O/ @/ z4 g};
this.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
this.setcornercoords();
- r" C! ?4 y5 ~9 w# V. a/ M};
$ X, P  J3 m2 fcanvas.img.prototype.setcornercoords = function() {
var coords = this.ocoords;
var theta = this.theta;
9 d% I& A; q6 m! C" H: ]" I8 Ovar cosoffset = this.cornersize * this.scalex * math.cos(theta);
var sinoffset = this.cornersize * this.scalex * math.sin(theta);
coords.tl.corner = {
tl: {
x: coords.tl.x,
6 V/ y, }) e! t! \# n8 oy: coords.tl.y
" T9 x+ V2 |+ Y* ]; a},
; c+ y$ V1 \* m- }tr: {
, `8 y  I3 \: e3 rx: coords.tl.x + cosoffset,
- ~3 S1 a/ j: z8 j5 r+ \& t+ `y: coords.tl.y + sinoffset
! a6 |4 \/ O, O+ |# t},
2 T6 G* `5 p4 n2 q2 Q( p4 Kbl: {
x: coords.tl.x - sinoffset,
+ K4 M" ^" o$ t4 G) N$ Py: coords.tl.y + cosoffset
}
};
. g5 s) U' K" Kcoords.tl.corner.br = {
x: coords.tl.corner.tr.x - sinoffset,
3 T' d" @& n0 @* }/ U: i7 o$ `y: coords.tl.corner.tr.y + cosoffset
, F2 ?2 _& [+ A: M4 X) E  r9 C};
coords.tr.corner = {
tl: {
4 N3 ?# e: w6 M* Qx: coords.tr.x - cosoffset,
' i1 u* t3 U3 B6 U) G) D/ e. M9 ey: coords.tr.y - sinoffset
},
+ T$ F' N$ |; j$ ]0 q4 `- {tr: {
x: coords.tr.x,
y: coords.tr.y
& H. G( ~$ z0 k; x0 H},
br: {
, o" Y& b6 ]. _1 ax: coords.tr.x - sinoffset,
y: coords.tr.y + cosoffset
. g5 Z. o9 C( g) z/ D; R}
};
: c; e& B6 ]/ r6 icoords.tr.corner.bl = {
x: coords.tr.corner.tl.x - sinoffset,
y: coords.tr.corner.tl.y + cosoffset
: Z: q9 {. a* F  r( g! a! Z) I1 D};
coords.bl.corner = {
tl: {
) G- X4 R5 d% w& w5 p( Wx: coords.bl.x + sinoffset,
y: coords.bl.y - cosoffset
},
9 |8 S1 P* L" C* j( u  sbl: {
x: coords.bl.x,
) d& T& p$ R3 s+ U# g- }6 dy: coords.bl.y
},
br: {
x: coords.bl.x + cosoffset,
y: coords.bl.y + sinoffset
}
, K1 T4 G) H+ P' J3 q: V( n8 o};
- F$ b2 C: }# @$ L. n) Scoords.bl.corner.tr = {
x: coords.bl.corner.br.x + sinoffset,
y: coords.bl.corner.br.y - cosoffset
0 w3 W  x* O8 J};
coords.br.corner = {
tr: {
x: coords.br.x + sinoffset,
. _) J6 d4 |+ F' F2 Ry: coords.br.y - cosoffset
% Z! P% p3 O1 P! L- S; |/ F},
; n5 E8 p, Y  Y* Q0 [4 ]$ Dbl: {
* M5 t7 `' ?# x$ {: Dx: coords.br.x - cosoffset,
y: coords.br.y - sinoffset
# B3 b1 _5 U* W5 Z0 N% ^+ g},
br: {
- m6 v: `) e7 z/ Q' a0 g# _+ O. ox: coords.br.x,
y: coords.br.y
}
};
coords.br.corner.tl = {
x: coords.br.corner.bl.x + sinoffset,
6 Z0 r1 X) {9 J9 cy: coords.br.corner.bl.y - cosoffset
  ~! F3 }' c9 ?# X( E  t};
};
9 _' j6 U# N/ `" n5 q3 I}());
return canvas;
: b# K- U( Y7 g});
5 j6 x6 w- M' Epuzzle.html代码如下：
复制代码代码如下:<!doctype html>
<html>
; ^* H  Z; F* Z2 J<head>
<meta http-equiv=content-type content=text/html; charset=utf-8>
2 m' p- z5 j) t9 h5 z# I<title>insert title here</title>
<link type=text/css href=html5_puzzle.css rel=stylesheet />
4 {" e+ m/ z, @9 X, _<script type=text/javascript src=../multi_upload/seed.js></script>
<script type=text/javascript src='html5_puzzle.js'></script>
, h( g0 n- b$ D( M6 ~5 D( e: T</head>
<body>
/ d& l# ~3 [! o" i6 D! |5 |  e' v6 N<div id='html5_puzzle'>
<div id='puzzle_left'>
<div class='puzzle_column'>
<ul>
<li><img src='small_img/1.jpg' data-index='1' /></li>
# O& m. e+ O: K3 G3 j<li><img src='small_img/2.jpg' data-index='2' /></li>
<li><img src='small_img/3.jpg' data-index='3' /></li>
<li><img src='small_img/4.jpg' data-index='4' /></li>
2 e* Y. H5 t. P<li><img src='small_img/5.jpg' data-index='5' /></li>
</ul>
3 E% {5 ~. `- F/ I6 d</div>
<div class='puzzle_column'>
<ul>
$ Z" |, w* @6 E2 @4 c% x: f9 ]<li><img src='small_img/6.jpg' data-index='6' /></li>
. u$ u4 S7 T- w# y0 t<li><img src='small_img/7.jpg' data-index='7' /></li>
- q6 O3 @3 @" _% B+ }<li><img src='small_img/8.jpg' data-index='8' /></li>
1 `2 o4 j2 y: k* r: I<li><img src='small_img/9.jpg' data-index='9' /></li>
<li><img src='small_img/10.jpg' data-index='10' /></li>
</ul>
</div>
5 r! E7 ~0 O& z0 \- r/ N</div>
<div id='puzzle_right'>
; D1 x0 u/ \! ^1 M( L/ v<div id='puzzle_canvas'>
<canvas id=canvid1></canvas>
9 K! @* R/ C% n8 R% t<div id='canvas_menu'>
; b* U' o' X& I2 L, O6 F: {<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
$ c, ^- z2 S4 x( z- J$ ihref='javascript:void(0)' id='photo_update'>更改图片</a>
</div>
0 V( R* V2 `, t! b6 R, w: M, b, u</div>
' }* ]* `; W7 I( t<img id=bg src=big_img/1.jpg width='600' height='450' />
* b/ ~! ~% c# ]% s- y1 T2 V</div>
<div id='puzzle_bottom'>
<a href='javascript:void(0)' id='add_img'><span>添加图片</span><input
type=file multiple= id='fileimage'> </a> <a
0 X8 g+ C/ a+ G' l7 E2 n8 `  phref='javascript:void(0)' id='upload_btn'>上传</a> <a>点击图片可以旋转，拖拽,
缩放哦!</a>
</div>
4 I% H: {" o% e% p# C) z# V</div>
# ~# W# T& H9 b<input type=file id='test'>
<canvas id='test_canvas'></canvas>
, M: B) u* i6 K1 l. X3 _</body>
0 ?0 r7 p9 Z& j$ r: m</html>
html5_puzzle.css代码如下：
# C6 W5 m, y+ e  w9 d9 t复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
" C% {2 c, K1 u4 W- x. @1 ~font-size: 0;
}</p> <p>canvas {
background-color: transparent;
2 q- {. Z8 I4 c9 x2 }( rleft: 0;
position: absolute;
top: 0;
% h0 H6 ]5 Z( o}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
9 q1 R: }* {" C+ v2 qdisplay: inline-block;
}</p> <p>.puzzle_column li {
7 Q: f2 E+ S- e" f3 E: ?" Udisplay: block;
6 O* E  M# b9 z6 a$ N; zmargin: 5px;
* @9 h) t5 a' Oborder: 1px solid #ffffff;
}</p> <p>.puzzle_column li:hover {
border: 1px solid #3b5998;
cursor: pointer;
}</p> <p>.puzzle_column {
! z, G: |. J3 k: ?9 B8 I7 R2 zfont-size: 0;
, m, n0 Y3 O4 N0 e( X  G* x}</p> <p>#puzzle_left,#puzzle_right {
border: 1px solid #3b5998;
}</p> <p>#puzzle_right,#puzzle_bottom a {
7 p1 X* s# ^5 t& q! h3 a9 M) xfont-size: 14px;
margin: 10px 0 0 10px;
6 M& T( |! _7 f6 V}</p> <p>#puzzle_bottom {
" W; D% N% _8 F: |- X- U  f" Imargin: 5px 0;
}</p> <p>#puzzle_canvas img {
}</p> <p>#puzzle_canvas {
1 }5 ^0 c  @2 I) z( |% \6 q6 ]overflow: hidden;
  e# [2 b$ s. j' W( {0 Q$ cwidth: 600px;
height: 450px;
position: relative;
: B) C' ?8 ^4 |1 V! [, A}</p> <p>#add_img input {
position: absolute;
+ c5 v9 l& A) s$ H. a+ R5 s5 Nfont-size: 100px;
right: 0;
, W' b0 l/ M! J) C- dtop: 0;
opacity: 0;
}</p> <p>#add_img {
position: relative;
display: inline-block;
) a8 G* }: U, X) O5 \: k+ Y( v% `, |background: #3b5998;
border-radius: 4px;
- F3 y. F5 x7 X  Kpadding: 4px 12px;
$ x1 p- X1 V1 ?, s  boverflow: hidden;
2 N4 o+ I. l5 Wcolor: #ffffff;
+ c# |* O4 p- f* y5 C1 n}</p> <p>#bg,#show_list {
display: none;
0 H8 E* {3 ~" w/ ~}</p> <p>#canvas_menu {
- }  ~$ x( Z. U8 m: k4 k4 X, n, uborder: 1px solid red;
position: absolute;
z-index: 5;
1 L0 i8 u2 I: ^" |: ^9 Htop: 0;
left: 0;
$ Z+ t) X0 W; k/ L1 ]display: none;
}</p> <p>#canvas_menu a {
% O" _( _5 y  q; mdisplay: inline-block;
- t6 p/ h# H1 j0 H" h) A" Q}</p> <p>#test_canvas {
top: 700px;
- j. a* t  H# w5 g( ?- c- r}
html5_puzzle.js代码如下：
( Z; n& @' q8 l1 @1 V% {复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
s, canvasimg, canvaselement) {
var img=[];
var canvas = new canvaselement.element();
/ [7 O  H2 o/ t! ]canvas.init('canvid1', {
' P  }2 a/ e6 l; O  mwidth : 600,
- r9 G7 B  q# s: L# Iheight : 450
) L  h5 A% ^3 I% e- @});
s('.puzzle_column img').on('click',function(e){
! T" K2 B. `" ^$ B2 R% Uvar index=this.getattribute('data-index');
$('bg').onload = function() {
' z* `2 d0 W9 X7 R2 q1 |var ctx=$('canvid1-canvas-background').getcontext('2d');
ctx.clearrect(0, 0,600,450);
img[0]=new canvasimg.img($('bg'), {});
canvas.setcanvasbackground(img[0]);
};
7 @+ `% @: G) n: r% L# `+ F$('bg').setattribute('src','medium_img/'+index+'.jpg');
+ {$ Z; y7 L  qe.stoppropagation();
});
var canvasdemo = function() {
1 a( `6 z8 X9 K& Ireturn {
! r" U  C/ Z" S' f1 ]+ pinit : function() {
; T: C; C( F5 V5 Wvar img_list=dom.query('#puzzle_canvas img');
img[0]=new canvasimg.img($('bg'), {});
1 u' P% R/ y2 ~* ys.each(img_list,function(i,el){
el.setattribute('data-index',i);
& _9 r6 J8 \! r+ N: P- O; T" S3 s' ximg.push(new canvasimg.img(el, {}));
! ~9 `/ a2 X2 ^7 T4 d2 @canvas.addimage(img[i+1]);
});
9 A" ^0 N! C. g$ m/ ^+ @canvas.setcanvasbackground(img[0]);
this.cornersvisible = (this.cornersvisible) ? false : true;
this.modifyimages(function(image) {
& r$ g4 c) P- ]0 }% S7 ~image.setcornersvisibility(this.cornersvisible);
});
% j* h7 |) |; \2 [  C},
1 O* C# g4 H- x3 pmodifyimages : function(fn) {
( u$ o1 B$ j' P. _9 p( ofor ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
4 [3 H% `9 c" l, N% c% cfn.call(this, canvas._aimages);
}
: D" y  A! k9 E# I0 ^, ^! s$ zcanvas.renderall(false,false);
s('#puzzle_canvas img').remove();
img = [];
4 s" v1 a/ {2 X. g" U+ i: F}
, z' j% g1 X+ x# j5 s* ~0 F};
& f, d! u. }  _0 l2 X}();
! f/ M5 W* U7 H  Xfunction getcurimg(){
* y% v: l, M% B2 E% b6 Nvar oimg=canvas._prevtransform.target;
for(var i=0;i<canvas._aimages.length;i++){
if(canvas._aimages._oelement.src==oimg._oelement.src){
return i;
}
}
  W+ `5 ]9 H" E- ?1 V}
; m. e) d; R  y+ ~s('#photo_delete').on('click',function(e){
var i=getcurimg();
$ K1 x$ e' i  b1 [) A) T8 D: ncanvas._aimages.splice(i,1);
canvas.renderall(true,true);
$('canvas_menu').style.display=none;
& u8 F7 R% L. ]# B2 g, B! R});
s('#photo_update').on('click',function(e){
$('test').click();
* ^, U7 D) j& J9 O" m});
  m6 O- b  c5 j( ]% y. \' ]s('#test').on('change',function(e){
! u) @( \& P+ \7 p9 U; B( v, U: }var files = e.target.files || e.datatransfer.files;
var reader = new filereader();
6 a7 S& M6 w$ q* @# B: sreader.onload = (function() {
return function(e) {
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;
  s3 C! H1 Y- H) ]+ {img.height=img.height*prop;
: y1 G+ m# M7 n- U! p; p}
3 C: |6 ^) R6 @9 @" t# z5 F5 ]" acanvas1.width=img.width;
canvas1.height=img.height;
ctx.drawimage(img, 0, 0, img.width, img.height);
: j" c+ v8 ^# ?! {4 y" gs('#canvid1').html(s('#canvid1').html()+<img src='+canvas1.todataurl(image/jpeg)+'/>);
var t = window.settimeout(function() {
5 t8 }5 W! _* F3 M& \var i=getcurimg(),target=canvas._prevtransform.target;
console.log(target);
canvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
: r4 Y" {) l# ttop:target.top,
left:target.left,
scalex:target.scalex,
$ ?9 a! F0 o$ N4 V$ J7 K" tscaley:target.scaley,
angle:canvas.curangle
});
canvas.rendertop();
: K% g( p8 K* z+ ]5 e! I2 _cleartimeout(t);
) f7 B: |. l# e. j. p2 g$ Ms('#canvid1 img').remove();
% P( K5 ?2 c/ D+ }; ]; `2 ^9 [9 q8 K},1000);
};
# o" ]9 i1 X* timg.src = dataurl;
};
})();
reader.readasdataurl(files[0]);
});
s('#upload_btn').on('click',function(){
2 u+ f9 @4 ?: A. ]var imgdata = canvas.canvasto('jpeg');
var imgvalue = imgdata.substr(22);
$ E- q$ Z; E/ C) Fs.ajax({
url : 'http://localhost/html5/upload1.php',
2 _# I: G# k1 ^, [- ]' e0 ?type : 'post',
data : {
imgdata : imgvalue,
file_name :'mix_img.jpeg'
},
datatype : 'text',
success : function(data) {
alert(s);
}
( b: w, g) g' w3 p+ G; r});
});
});
* c9 U6 _0 k0 j& R至于用html5 input读取图片，这很简单就不贴出来了。

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

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

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

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

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

疯了.........

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

一骂人就激动....

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