html5版canvas自由拼图实例

本文实例讲述了html5版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下：
$ G2 J& d- S$ f0 y) t代码运行效果如下图所示：
/ I7 Y' T) O0 X2 Y  X) P* |* X  E

                               
登录/注册后可看大图

canvaselement.js代码如下：
9 z4 _; G% F1 ]/ Z& H$ e' M$ a复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
% \& V# [  u# x: |var canvas = window.canvas || {};
(function () {
canvas.element = function() {};
canvas.element.prototype.fillbackground = true;
canvas.element.prototype.showcorners = false;
5 w8 x! k0 T8 b7 S0 S4 o/ dcanvas.element.prototype.photoborder = true;
canvas.element.prototype.polaroid = false;
canvas.element.prototype._backgroundimg = null;
canvas.element.prototype._groupselector = null;
canvas.element.prototype._aimages = null;
1 C0 `' N2 _1 Ncanvas.element.prototype._ocontext = null;
, J+ R; V( E! N4 m6 \) lcanvas.element.prototype._oelement = null;
canvas.element.prototype._oconfig = null;
canvas.element.prototype._currenttransform = null;
canvas.element.prototype._prevtransform = null;
7 d4 a6 B4 b! v$ M  n7 T( zcanvas.element.prototype.curangle = null;
! d/ M6 Y1 y7 }  Bcanvas.element.prototype.init = function(el, oconfig) {
( y" s# T4 `9 {: Q! t' n% t" Oif (el == '') {
return;
) q8 [/ \% X0 D: P5 g) j" M( ^}
this._initelement(el);
* B6 _) L& }: q2 A6 Z8 athis._initconfig(oconfig);
this._createcanvasbackground();
this._createcontainer();
this._initevents();
this._initcustomevents();
};
canvas.element.prototype._initelement = function(el) {
this._oelement = document.getelementbyid(el);
9 _! f  {% Y2 tthis._ocontexttop = this._oelement.getcontext('2d');
- m# X% z, u$ w, ?};
canvas.element.prototype._initcustomevents = function() {
) Q! i+ q. I; b2 p5 ithis.onrotatestart = new canvas.customevent('onrotatestart');
* P! P' }+ I( ^- pthis.onrotatemove = new canvas.customevent('onrotatemove');
1 t# [9 V* p5 r7 _% q  Sthis.onrotatecomplete = new canvas.customevent('onrotatecomplete');
this.ondragstart = new canvas.customevent('ondragstart');
this.ondragmove = new canvas.customevent('ondragmove');
8 ^+ R% D2 v$ Q1 v# C: M: Nthis.ondragcomplete = new canvas.customevent('ondragcomplete');
- V" Q) O/ H7 N, w7 ^" V};
, \' D% ?) v' O  l% m: j. ~3 @% hcanvas.element.prototype._initconfig = function(oconfig) {
" E1 X+ u4 P" p, Fthis._oconfig = oconfig;
this._oelement.width = this._oconfig.width;
this._oelement.height = this._oconfig.height;
this._oelement.style.width = this._oconfig.width + 'px';
$ M% z5 T, V( P. e5 C6 g7 othis._oelement.style.height = this._oconfig.height + 'px';
};
canvas.element.prototype._initevents = function() {
2 j0 {. \' [6 _: W) Uvar _this=this;
s(this._oelement).on('mousedown',function(e){
_this.onmousedown(e);
8 Z1 z7 t& x" e});
s(this._oelement).on( 'mouseup', function(e){
3 Z4 q+ E' u" d) T_this.onmouseup(e);
});
2 ~# E/ l- z! g6 {! Z) X2 w& ~s(this._oelement).on('mousemove', function(e){
_this.onmousemove(e);
4 ?7 f3 L* M0 Y  V: d* j4 I3 f});
};
canvas.element.prototype._createcontainer = function() {
var canvasel = document.createelement('canvas');
! Q( X- X% M$ j) m6 k0 Mcanvasel.id = this._oelement.id + '-canvas-container';
) D6 X5 n% d5 \' v4 tvar ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
ocontainer.width = this._oconfig.width;
ocontainer.height = this._oconfig.height;
9 C+ ~& Y" F$ T8 a4 O9 b# rocontainer.style.width = this._oconfig.width + 'px';
4 ?: E) U9 X) B# Nocontainer.style.height = this._oconfig.height + 'px';
& M/ l' F8 a" z& Lthis._ocontextcontainer = ocontainer.getcontext('2d');
; x0 X, S3 ~' w* i. F  f% m/ l' `" ^};
canvas.element.prototype._createcanvasbackground = function() {
: a9 M7 C  O2 C; F; l  a7 e) Hvar canvasel = document.createelement('canvas');
. o( w1 m* Q9 lcanvasel.id = this._oelement.id + '-canvas-background';
7 i0 A  N( _/ V: ~var obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
obackground.width = this._oconfig.width;
obackground.height = this._oconfig.height;
, G3 t3 U! ?, S7 |) ]3 V1 ]obackground.style.width = this._oconfig.width + 'px';
obackground.style.height = this._oconfig.height + 'px';
' B6 o. v  ^& r' y" dthis._ocontextbackground = obackground.getcontext('2d');
6 H) D; D* [0 \8 L- {};
canvas.element.prototype.setcanvasbackground = function(oimg) {
this._backgroundimg = oimg;
# ]4 M* b5 y: Pvar originalimgsize = oimg.getoriginalsize();
this._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
};
canvas.element.prototype.onmouseup = function(e) {
( R! p' Z5 c2 }6 T4 gif (this._aimages == null) {
4 J* ], i" }0 F: Z6 t: N% y7 |return;
  \) Y  G# k& r7 z}
if (this._currenttransform) {
this._currenttransform.target.setimagecoords();
}
if (this._currenttransform != null && this._currenttransform.action == rotate) {
3 O5 Z5 D; h% _$ I9 {this.onrotatecomplete.fire(e);
} else if (this._currenttransform != null && this._currenttransform.action == drag) {
1 [$ l* W, f2 H/ Y0 Vthis.ondragcomplete.fire(e);
}
this._currenttransform = null;
this._groupselector = null;
, }* v0 k. F" k* R. G7 K9 Pthis.rendertop();
};
canvas.element.prototype.onmousedown = function(e) {
var mp = this.findmouseposition(e);
if (this._currenttransform != null || this._aimages == null) {
3 x9 O7 s0 u' o& Y8 K8 \/ _, Ereturn;
0 X3 Y: y" D) K}
/ q  y# f7 G/ c. G2 Q$ |- Yvar oimg = this.findtargetimage(mp, false);
if (!oimg) {
this._groupselector = { ex: mp.ex, ey: mp.ey,
  N! v, [6 V, D- ?6 x& I1 T% Xtop: 0, left: 0 };
2 d! p/ _' ~& l/ U' U4 G8 I# L}
8 `: Z5 T3 {9 \" F- S, O5 aelse {
* Y0 p0 R: ^' C0 a; p6 E) _0 Rvar action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
- O7 ?) C: X' B$ {: t& W& q- Aif (action == rotate) {
this.onrotatemove.fire(e);
* s1 D; S$ O3 \' a} else if (action == drag) {
+ z- e+ f5 |3 R: p2 j* ?this.ondragmove.fire(e);
- y4 v" o" v" r7 h# B}
this._prevtransform=this._currenttransform = {
4 i. Q$ M! k% H, F* ^) w7 i5 w, Ytarget: oimg,
action: action,
scalex: oimg.scalex,
offsetx: mp.ex - oimg.left,
offsety: mp.ey - oimg.top,
5 a* Q4 F5 Z: ~' C; u% kex: mp.ex, ey: mp.ey,
8 }1 H" p! f9 @  [. eleft: oimg.left, top: oimg.top,
+ }8 P% ^' l1 X, c- [0 L( [theta: oimg.theta
7 V/ h* t" Z% R3 i; T' Z};
+ N/ d" T& D, o$('canvas_menu').style.transform='rotate('+oimg.theta*180/3.14+'deg)';
$('canvas_menu').style.left=oimg.left+px;
3 ?5 C5 Q$ _8 D  E2 c# `$('canvas_menu').style.top=oimg.top+px;
& \: z. k5 d6 s  C; \9 X$('canvas_menu').style.display=block;
this.renderall(false,false);
}
% E7 d1 H, r: J) |5 R7 h4 D" Q};
canvas.element.prototype.onmousemove = function(e) {
var mp = this.findmouseposition(e);
if (this._aimages == null) {
return;
}
3 @0 H! R# t8 y$ K+ b! g, jif (this._groupselector != null) {
this._groupselector.left = mp.ex - this._groupselector.ex;
* s0 n" k/ \# D, e# A6 jthis._groupselector.top = mp.ey - this._groupselector.ey;
this.rendertop();
}
( e( F* q6 k9 Y/ N% P% lelse if (this._currenttransform == null) {
1 H  Z9 B, l& q0 Y  Ivar targetimg = this.findtargetimage(mp, true);
this.setcursor(mp, targetimg);
}
else {
/ P; ^& V. P$ B- F: ^: c+ oif (this._currenttransform.action == 'rotate') {
this.rotateimage(mp);
this.scaleimage(mp);
7 I/ v- b! c/ P/ [" g& x- f% wthis.onrotatemove.fire(e);
}
else {
: `" s6 |8 W+ r. lthis.translateimage(mp);
0 ^) p; Q9 c* f, q( l# a9 c& G2 Ethis.ondragmove.fire(e);
}
this.rendertop();
}
* N8 b; g9 V$ D0 ~! ?% o, M6 W1 w};
canvas.element.prototype.translateimage = function(mp) {
$ l5 J6 T( m6 u" V, v" a4 S, S1 Qthis._currenttransform.target.left = mp.ex - this._currenttransform.offsetx;
) X: m! k  T. e" R& a5 Kthis._currenttransform.target.top = mp.ey - this._currenttransform.offsety;
! S9 G7 F( @) E8 I0 ~$('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 =
6 y1 ~8 r9 W" C# @$ f: Nmath.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
math.pow(this._currenttransform.ex - this._currenttransform.left, 2));
var curlen =
math.sqrt(math.pow(mp.ey - this._currenttransform.top, 2) +
8 u$ ?- }% w, u8 pmath.pow(mp.ex - this._currenttransform.left, 2));
: k4 {9 {9 _8 @: v/ X& Ovar curscalex= this._currenttransform.scalex * (curlen / lastlen);
var curscaley=this._currenttransform.target.scalex;
9 Y6 a) D) D: l' h* O2 Fif(curscalex>0.7&&curscaley>0.7){
2 v- l; S% X, r% |5 ]/ q0 K  E1 kthis._currenttransform.target.scalex =curscalex;
+ D6 }) C6 D" R3 @this._currenttransform.target.scaley = curscaley;
}
};
canvas.element.prototype.rotateimage = function(mp) {
var lastangle = math.atan2(
this._currenttransform.ey - this._currenttransform.top,
- f8 N* R+ t- F; u1 n, g5 x( Fthis._currenttransform.ex - this._currenttransform.left
, K6 F+ R; F! s! _/ ]);
var curangle = math.atan2(
& |- k; J& H; o3 G/ ^mp.ey - this._currenttransform.top,
" P1 I7 ^3 N+ P$ n- r$ k& y/ E$ P' |mp.ex - this._currenttransform.left
! d0 ^% {, F: s4 q7 A" f);
this._currenttransform.target.theta = (curangle - lastangle) + this._currenttransform.theta;
this.curangle=this._currenttransform.target.theta*180/3.14;
$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
};
$ r% a- L, Q9 u! @9 w% p& pcanvas.element.prototype.setcursor = function(mp, targetimg) {
if (!targetimg) {
this._oelement.style.cursor = 'default';
}
else {
+ A' \# b; n) _' Q( |var corner = this.findtargetcorner(mp, targetimg);
if (!corner)
0 F3 {2 M: i- Y9 A{
this._oelement.style.cursor = 'default';
}
else
  i3 Z0 O: z6 w2 {% V{
2 @/ F4 K3 L) p/ U. U* W, H: w' a8 tif(corner == 'tr') {
this._oelement.style.cursor = 'ne-resize';
}
- O( d4 u; |, Y) a- V+ l  Y, lelse if(corner == 'br') {
% }" v5 m6 P& P$ W8 ^, xthis._oelement.style.cursor = 'se-resize';
}
) `& P  q% U+ S4 zelse if(corner == 'bl') {
) k. E& ~0 I& k4 I& ethis._oelement.style.cursor = 'sw-resize';
9 [) N4 I! c" K" \0 i7 }$ N" X}
- A3 {8 L9 G! Xelse if(corner == 'tl') {
3 C% C* R1 [) b  K/ Gthis._oelement.style.cursor = 'nw-resize';
}
else {
this._oelement.style.cursor = 'default';
+ ^4 Z4 w: e5 d1 [}
( r8 A7 D# n" z: h0 F  b}
8 i2 L  P4 l6 R, e! q0 Y) S+ q}
};
canvas.element.prototype.addimage = function(oimg) {
if(s.isemptyobject(this._aimages)) {
9 ^' _4 Z' f( N0 d. m5 |( Fthis._aimages = [];
: a+ Y" r& d$ i) T* d* `! q5 C3 L}
this._aimages.push(oimg);
this.renderall(false,true);</p> <p> };
; Q6 c  f# G  S1 ?3 F. A* \canvas.element.prototype.renderall = function(allontop,allowcorners) {
var containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
, h+ v0 w$ b' Vthis._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
' m" L+ M7 {; c( _1 \, ycontainercanvas.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
: e4 ~7 Q- y) t; k( G$ D( fif (allontop) {
; c" x, Q* r& @0 K4 s. k! evar originalimgsize = this._backgroundimg.getoriginalsize();
2 }& Z( \: y# w3 |6 v' h0 d+ o( jthis._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
1 G" t# J  Y( t  a% N}
5 j8 d" r  h; G/ ?for (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
) \! M' X, s  M" Y. h3 @3 ~this.drawimageelement(containercanvas, this._aimages,allowcorners);
+ O) ?$ _2 J/ k+ U7 h1 ?}
5 J0 }! B2 I* n  p/ ?this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
7 Y( N! A  d  j% }9 d};
canvas.element.prototype.rendertop = function() {
this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
' h) w9 S/ R0 V& y/ jthis.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) ?
0 D" |0 a4 @/ _0 ~- f. L0 : - this._groupselector.left),
5 I% e7 F  v+ C7 ]# i' ~this._groupselector.ey - ((this._groupselector.top > 0) ?
# t# Z# O6 p/ b* [! p0 : - this._groupselector.top),
math.abs(this._groupselector.left),
) b# r9 }3 J- t$ ~: T* imath.abs(this._groupselector.top)
);
this._ocontexttop.strokerect(
# A" c4 P( @' F. O$ Cthis._groupselector.ex - ((this._groupselector.left > 0) ?
" R' q8 |5 q2 B& n, i  Z0 : math.abs(this._groupselector.left)),
this._groupselector.ey - ((this._groupselector.top > 0) ?
0 : math.abs(this._groupselector.top)),
- k2 ^3 _! I1 \! n2 r( p) b( K8 Umath.abs(this._groupselector.left),
math.abs(this._groupselector.top)
: M6 X' g5 B0 y3 _  q: G+ `);
" a! C1 N1 J7 I+ c0 t}
/ t" t8 v" A) V8 o};
# [' e2 }+ K. I) ?, hcanvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
, ^& ~2 Q5 F9 p5 A8 c4 v. A. Q# uoimg.cornervisibility=allowcorners;
: E& E+ ?) G, f+ A8 Yvar offsety = oimg.height / 2;
var offsetx = oimg.width / 2;
context.save();
context.translate(oimg.left, oimg.top);
- O+ X& u: {6 M. e( U% X3 V& ^, a. R4 J# qcontext.rotate(oimg.theta);
# V6 ]) L  i% @context.scale(oimg.scalex, oimg.scaley);
& f/ r' g  C. B# X  ethis.drawborder(context, oimg, offsetx, offsety);
var originalimgsize = oimg.getoriginalsize();
var polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
context.drawimage(
+ |5 P! U. B% p- ioimg._oelement,
- originalimgsize.width/2,
((- originalimgsize.height)/2 - polaroidheight),
originalimgsize.width,
originalimgsize.height
);
if (oimg.cornervisibility) {
6 c+ a5 P! u' Z/ @. ?this.drawcorners(context, oimg, offsetx, offsety);
}
context.restore();
. a' D# J8 Z2 X: r5 P9 i/ v& E) r};
canvas.element.prototype._getimagelines = function(ocoords) {
return {
topline: {
" ?3 a9 g/ l! {1 G# C: e9 r- [o: ocoords.tl,
% ~5 k% j8 n7 W# U3 _' T3 Bd: ocoords.tr
% `$ K4 a( V/ X. ?1 m0 N},
, k8 f/ p  t: G4 q7 i# }0 brightline: {
o: ocoords.tr,
d: ocoords.br
},
& D. s$ O2 N* v/ `! lbottomline: {
o: ocoords.br,
d: ocoords.bl
( R0 v5 e2 I1 L, Q( \},
leftline: {
0 j! M  h" Q0 ~/ e/ l$ oo: ocoords.bl,
d: ocoords.tl
3 T" ~0 Z$ N" x}
};
};
canvas.element.prototype.findtargetimage = function(mp, hovering) {
8 E+ T6 Y3 ]& C- d0 D6 `9 J' [) jfor (var i = this._aimages.length-1; i >= 0; i -= 1) {
: z4 T$ n$ p' ?  G( D. d) I0 Nvar ilines = this._getimagelines(this._aimages.ocoords);
var xpoints = this._findcrosspoints(mp, ilines);
7 Q! o- y" j$ ~0 ^* P  M3 i8 J2 rif (xpoints % 2 == 1 && xpoints != 0) {
, p7 b4 \& Q, V" |# i' o$ Kvar target = this._aimages;
8 {2 ^# o' H; [2 f3 N. dif (!hovering) {
- e9 ^- j$ R! ]  m+ ?this._aimages.splice(i, 1);
this._aimages.push(target);
; P8 Z0 z6 H# F9 Q. q6 z}
return target;
* }, X+ O% U. N& B- ?  @}
}
return false;
( f8 [, q; o. f* Q4 i3 O};
canvas.element.prototype._findcrosspoints = function(mp, ocoords) {
6 J" f; j4 n$ O: hvar b1, b2, a1, a2, xi, yi;
  ~/ ^$ m; r) H+ Q# ~# |- Pvar xcount = 0;
var iline = null;
for (linekey in ocoords) {
iline = ocoords[linekey];
if ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
$ c- W" n3 k, v- z) Y+ b3 z+ }continue;
}
. Z  V; H: o. @" aif ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
continue;
8 H4 ~% c) x5 P7 m( ~  |6 g}
if ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
& B8 n: k2 l) N& w7 M% m9 n$ exi = iline.o.x;
yi = mp.ey;
}
else {
b1 = 0;
. E3 h4 i: I# ]! k/ H6 f9 wb2 = (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;
- |8 m1 @7 S+ x6 Z) b" B0 C7 oxi = - (a1-a2)/(b1-b2);
yi = a1+b1*xi;
2 d+ e$ |, w" ]}
, N) S5 U( j# Y/ {  U  Z+ x6 a2 Sif (xi >= mp.ex) {
  [5 S# a" {: A( x  f) t# Qxcount += 1;
5 z# e5 }7 S; a7 a  {& M}
if (xcount == 2) {
break;
0 M( k& x# z1 E$ L5 a. R9 z* |1 o% {}
; m7 r1 |( J6 O}
0 P- W: b" X" p& _! Dreturn xcount;
) C3 A6 M$ J9 }- Z/ a2 r* s% A};
canvas.element.prototype.findtargetcorner = function(mp, oimg) {
8 d( [. g# q. H9 K3 r( rvar xpoints = null;
/ x7 V/ M7 C2 d0 G, d; ~) j4 Ivar corners = ['tl','tr','br','bl'];
for (var i in oimg.ocoords) {
- N- b, Q: p) {" Cxpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
if (xpoints % 2 == 1 && xpoints != 0) {
return i;
}
; @- N6 g# U4 I5 e5 D}
return false;
3 p7 Z% j6 F" x};
canvas.element.prototype.findmouseposition = function(e) {
var parentnode = (e.srcelement) ? e.srcelement.parentnode : e.target.parentnode;
: H+ [7 M: u8 f2 C- p+ K7 ]" Fvar issafari2 = !s.support.ie&&!s.support.firefox;
var scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
0 P7 h: j+ _( n& \+ y  u) ~var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
0 L+ E8 K2 n) m( g% a8 l" dvar safarioffsetleft = (issafari2) ? e.target.ownerdocument.body.offsetleft + scrollleft : 0;
& i+ s$ X3 }% o. z1 k/ H1 Zvar safarioffsettop = (issafari2) ? e.target.ownerdocument.body.offsettop + scrolltop : 0;
return {
ex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
ey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
2 {" O5 C' x  o1 J8 w0 Escreenx: e.screenx,
screeny: e.screeny
};
+ u" E- I9 N2 P$ W};
" Q7 x+ l0 {# p+ y& Lcanvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
  j: n( h6 X: B0 i$ U( Vvar outlinewidth = 2;
1 H9 |5 _* R3 V/ F5 scontext.fillstyle = 'rgba(0, 0, 0, .3)';
0 w- W- `. K: r* Q; x$ n8 z! Q% ]context.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
context.fillstyle = '#fff';
context.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
5 c, U' V2 l! a+ X) h};
2 B  a$ K' S' v9 rcanvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
7 z  A5 b6 J0 ?2 h1 Xcontext.fillstyle = rgba(0, 200, 50, 0.5);
& [+ k- y: o% s- icontext.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
1 o+ E2 x& g. ]0 Q- icontext.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
" u: v5 Z2 ^9 ]context.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
; x# e3 [- q- j6 ~$ J$ h};
canvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
, x- E& f  T4 }' w6 K& B5 _& wcontext.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
. v& J) r& {: l# I/ G6 }context.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
0 ~1 s7 ~  V4 ~, W4 ]* `3 }context.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);
9 F, z( |/ W) W* n8 tcontext.restore();
" \; ^# S2 w1 Z" i' [3 ?};
9 m0 w. N4 l0 v* Q% N% s. ]; Rcanvas.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) {
% g( ]' W: k& R% c; Y, E6 q, wvar offsety = this._aimages.height / 2;
var offsetx = this._aimages.width / 2;
. H7 S! D. Y; x( qthis.clearcorners(containercanvas, this._aimages, offsetx, offsety);
}
, A7 O5 E: t& A. `; M. ]4 U; ^if (format == 'jpeg' || format == 'png') {
return this._oelement.todataurl('image/'+format);
8 R( W, Z8 O4 a}
};
. |- f; h2 j' _( \; h* rcanvas.customevent = function(type) {
! U) G( I6 A$ D. Othis.type = type;
  }; d2 `2 X4 u) u- ~this.scope = null;
this.handler = null;
var self = this;
this.fire = function(e) {
" F5 y. M& ^, c; z) k! tif(this.handler != null) {
self.handler.call(self.scope, e);
5 I4 W1 ~) s5 Y; N" \: G) N}
};
2 @0 g( p1 K/ B9 M* g};
: T3 R; U% p5 Y}());
2 u( Q( {+ I; ~  wreturn canvas;
});
canvasimg.js代码如下：
, d- q7 h! S6 g% u3 n, \' n复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
(function () {
  ~& h# H- V5 j" ?canvas.img = function(el, oconfig) {
this._initelement(el);
this._initconfig(oconfig);
# H% T8 }3 t9 V6 K% I0 c  h9 ~this.setimagecoords();
};
canvas.img.css_canvas = canvas-img;
var default_config = {
top: {
# M/ p$ f: A! _4 a- F! kkey: top,
" x1 r: n, p7 k4 H. {" j3 Jvalue: 10
$ g$ O$ F+ @/ m. o, `4 T},
$ g% e9 q, U6 E* V  zleft: {
key: left,
value: 10
},
% h# P" i* K4 n) C3 Langle: {
, J$ r. e3 W9 y+ O  W) rkey: angle,
/ y  ?( K0 u+ W3 P8 J' qvalue: 0
},
8 I: C, R3 x3 _& j1 j; Y. ~" ztheta: {
key: theta,
value: 0
& F4 g: @! @* T$ L* N. [},
scale-x: {
key: scalex,
+ g8 K4 @5 G  avalue: 1
},
7 _& t# `9 I; W+ N' H* ?; A9 c7 Ascale-y: {
& A! x: [7 t2 ]7 T" l0 I2 `key: scaley,
5 K* G2 a; ^+ @# evalue: 1
},
5 X0 K) l$ j& L: m  r! \cornersize: {
$ w0 {5 l* ]7 w0 ]) F, g, [' W$ nkey: cornersize,
value:10
. j$ Y& K% h( w& A. t& m},
" ]" n) g3 n  yborderwidth: {
key: borderwidth,
5 I9 A) K5 w/ J5 U( i$ jvalue: 10
( V/ H6 c* M  p},
  X: ^( R2 \: k3 _polaroidheight: {
key: polaroidheight,
value: 40
( K) y  k2 h1 @( x% B# b$ R2 W},
randomposition: {
8 d9 y. M& x) F- E% }7 k9 fkey: randomposition,
" K6 r# \; A3 r* ivalue: true
}
* \' f4 v0 a4 ^1 m5 I4 Z};
canvas.img.prototype._oelement = null;
/ l2 |" x/ s2 p' E) O: f/ K( d; ucanvas.img.prototype.top = null;
canvas.img.prototype.left = null;
canvas.img.prototype.maxwidth = null;
canvas.img.prototype.maxheight = null;
6 `, ?0 |" R# B: H5 _canvas.img.prototype.ocoords = null;
- _( N; b+ q. x. n4 r3 W/ ]8 @/ c: Fcanvas.img.prototype.angle = null;
3 e& c- G, f2 q9 b6 V9 U9 gcanvas.img.prototype.theta = null;
canvas.img.prototype.scalex = null;
) @/ L6 n' k% N9 p# w( Lcanvas.img.prototype.scaley = null;
canvas.img.prototype.cornersize = null;
canvas.img.prototype.polaroidheight = null;
; Q* C. T) x; ~' qcanvas.img.prototype.randomposition = null;
7 B  s  M. }; K& gcanvas.img.prototype.selected = false;
" }" ]2 }6 R# U4 B, W) pcanvas.img.prototype.bordervisibility = false;
% G. @' h5 A. v; B; Icanvas.img.prototype.cornervisibility = false;
( F; a' |% |1 N- `" _. k6 Z& Xcanvas.img.prototype._initelement = function(el) {
0 Q+ I& _( P$ v1 w3 N. i; othis._oelement = el;
) ~/ v/ ^5 I0 z0 G% F8 g};
canvas.img.prototype._initconfig = function(oconfig) {
var skey;
2 c/ R4 F9 j1 E* rfor (skey in default_config) {
var defaultkey = default_config[skey].key;
/ ~+ a' N* i3 j- P$ T0 Y' Rif (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
3 I: U1 O# j! Y- ^2 n% jthis[defaultkey] = default_config[skey].value;
}
else {
1 z) Q* n- L6 n2 g* |; C- }this[defaultkey] = oconfig[defaultkey];
/ E% O1 `% @. B( T$ ~% B}
; d' h! j0 p4 W0 \3 Y( S: Y}
if (this.bordervisibility) {
this.currentborder = this.borderwidth;
! |% n" F1 W' u+ S8 ]}
else {
this.currentborder = 0;
' G" w  u7 @4 V/ w$ I6 [" Y  |! w}
var normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
  z+ U# E. n! c7 \. v/ lthis._oelement.width = normalizedsize.width;
+ U8 u% v. v& S/ m, e) Vthis._oelement.height = normalizedsize.height;
0 e1 {! H8 ^1 H- F; E  Z) pthis.width = normalizedsize.width + (2 * this.currentborder);
this.height = normalizedsize.height + (2 * this.currentborder);
/ q3 L  X2 h. O' B; Hif (this.randomposition) {
7 l( y5 N$ R1 P9 @2 J+ ^, Cthis._setrandomproperties(oconfig);
}
# m' F  C* m0 {; d/ [this.theta = this.angle * (math.pi/180);
4 a, M2 [/ B; ^$ M9 ^- X};
& b* h4 z& w) Ecanvas.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);
) m0 p& \; F6 P$ V* inormalizedheight = maxheight;
}
else if (maxheight && ((oimg.height == oimg.width) || (oimg.height > oimg.width) || (oimg.height > maxheight))) {
normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
normalizedheight = maxheight;
}
0 @0 L/ n1 m5 F+ F- velse if (maxwidth && (maxwidth < oimg.width)){
9 Q) G! @, V9 A; m3 E5 `normalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
normalizedwidth = maxwidth;
}
else {
normalizedwidth = oimg.width;
. J* d: |) a8 S" ~& @. Gnormalizedheight = oimg.height;
}
return { width: normalizedwidth, height: normalizedheight }
/ F8 `1 L7 }4 g! _7 t6 e4 ?" C6 c9 r},
canvas.img.prototype.getoriginalsize = function() {
7 t9 r4 k3 \% r( q  greturn { width: this._oelement.width, height: this._oelement.height }
+ }, b/ m+ U( Q: [' e, g# E* |};
& a3 J0 O# u2 g4 ?0 ccanvas.img.prototype._setrandomproperties = function(oconfig) {
if (oconfig.angle == null) {
this.angle = (math.random() * 90);
}
if (oconfig.top == null) {
this.top = this.height / 2 + math.random() * 450;
3 w3 o% k( @, x}
- z& @( l9 J: j- |; eif (oconfig.left == null) {
9 a" V* Y' u9 u& athis.left = this.width / 2 + math.random() * 600;
}
' l& h9 _4 l: T' e* @1 s4 E3 d1 M};
, j  y$ {' p. o! a2 pcanvas.img.prototype.setcornersvisibility = function(visible) {
: X0 W8 T" \% W0 q7 [& Cthis.cornervisibility = visible;
};
/ \- N  S* c6 Z5 {% G/ n" _canvas.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);
var offsetx = math.cos(this._angle + this.theta) * this._hypotenuse;
var offsety = math.sin(this._angle + this.theta) * this._hypotenuse;
var theta = this.theta;
5 g  E  J3 v1 r) Q, Cvar sinth = math.sin(theta);
var costh = math.cos(theta);
var tl = {
x: this.left - offsetx,
4 W" R/ w( c* F2 u6 q  `, c1 g) Dy: this.top - offsety
, p* I" ?) \9 p9 E  s9 w};
var tr = {
, o# S: P: o3 b( jx: tl.x + (this.currentwidth * costh),
% P1 y; x9 K! R! {y: tl.y + (this.currentwidth * sinth)
1 H2 y* C- ?0 I) K};
var br = {
x: tr.x - (this.currentheight * sinth),
  C; f1 U1 l& z! l3 N" \' sy: tr.y + (this.currentheight * costh)
' ]1 c% h* D. I& s};
& r- a9 ^* [9 \0 |* H$ X, Nvar bl = {
4 \5 m# g: N: o5 T5 \7 ^" q/ _7 b9 `x: tl.x - (this.currentheight * sinth),
9 T1 D% R3 K0 H. d: Ey: tl.y + (this.currentheight * costh)
% Z" |- u6 _3 \( f# q& P  J+ c};
this.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
this.setcornercoords();
};
* M# Z6 P4 l1 Q4 k0 [5 e2 |4 mcanvas.img.prototype.setcornercoords = function() {
* j3 f& x" g, t0 A8 T9 y+ fvar coords = this.ocoords;
0 v3 f0 P3 g$ T! v$ q0 R8 qvar theta = this.theta;
var cosoffset = this.cornersize * this.scalex * math.cos(theta);
var sinoffset = this.cornersize * this.scalex * math.sin(theta);
" ?, E& j* g" s3 z& p; b  g0 Gcoords.tl.corner = {
tl: {
% V9 G8 \* ~2 m; Y% C- r( Sx: coords.tl.x,
y: coords.tl.y
" L0 Y7 b9 o1 m},
8 o4 d2 E# g5 q, _tr: {
x: coords.tl.x + cosoffset,
. R: G" j. m" j" w- Ly: coords.tl.y + sinoffset
},
) h. |/ N9 [3 }8 N" w4 y1 ]bl: {
+ f8 x/ J+ P1 R' q$ o/ Z7 l4 f! P# ]x: coords.tl.x - sinoffset,
3 Q/ _6 x5 [! i/ my: coords.tl.y + cosoffset
9 H4 E6 X5 U) ?" B6 T2 [! @! c: w}
! x6 r* {1 D1 ]};
1 Z( O0 e- z) p! Hcoords.tl.corner.br = {
$ K8 @, n! a" R7 ex: coords.tl.corner.tr.x - sinoffset,
y: coords.tl.corner.tr.y + cosoffset
, q& M, h$ U) d: x) O};
- Y1 h) O7 {; q3 m' R3 Wcoords.tr.corner = {
tl: {
6 _" z- a$ i. M: ?. h3 s7 \2 fx: coords.tr.x - cosoffset,
y: coords.tr.y - sinoffset
9 l+ G' e$ e7 j& m( D* L% H},
tr: {
x: coords.tr.x,
y: coords.tr.y
5 O5 Y" ^6 K1 \& S% C- N2 q},
* e4 N' _+ K" ^& T4 J7 Rbr: {
# `5 e0 X0 M. ]' G$ H6 [; r2 yx: coords.tr.x - sinoffset,
. v+ ^- y9 _! b# Y1 k8 p! }3 N# cy: coords.tr.y + cosoffset
! T% Q- n/ K% ?$ B4 w$ D) Y  r2 L5 O}
+ R8 t0 f5 D4 R3 O, ?& X! v! j2 s};
coords.tr.corner.bl = {
9 X+ O$ b( g" w# A! f7 [  Cx: coords.tr.corner.tl.x - sinoffset,
* ]3 E7 G+ E/ V/ E$ G- ^8 P0 Fy: coords.tr.corner.tl.y + cosoffset
};
coords.bl.corner = {
* a  j9 j! Q! d! L  Otl: {
x: coords.bl.x + sinoffset,
y: coords.bl.y - cosoffset
},
bl: {
7 D/ s7 ]) k# C' ], I4 X/ Yx: coords.bl.x,
y: coords.bl.y
},
br: {
; M+ J9 S1 H4 }2 _, m0 F# e+ R) G- d& Fx: coords.bl.x + cosoffset,
* y; f- j9 m0 y& O" E! Hy: coords.bl.y + sinoffset
}
};
1 h+ r- o. |0 zcoords.bl.corner.tr = {
x: coords.bl.corner.br.x + sinoffset,
2 s# B3 P/ f5 P; qy: coords.bl.corner.br.y - cosoffset
};
: T; n; M- T4 G0 G6 q9 X& wcoords.br.corner = {
tr: {
x: coords.br.x + sinoffset,
y: coords.br.y - cosoffset
},
bl: {
  f3 ?- P1 ^6 z3 f, `3 `4 |: ax: coords.br.x - cosoffset,
& h& B" Z/ O  N, zy: coords.br.y - sinoffset
' r, I2 \) K6 C* z2 e1 C; W},
* ^" a# z3 x, o- `br: {
x: coords.br.x,
# K( Z8 P  b% W8 J5 ~0 T  Q* ]y: coords.br.y
1 J1 {' |. k- Q( @8 v8 q}
};
: ]8 s6 D$ D1 f7 ]coords.br.corner.tl = {
x: coords.br.corner.bl.x + sinoffset,
y: coords.br.corner.bl.y - cosoffset
, K. Z- p' Y( I8 m- h+ y};
};
3 T, A5 h2 v1 H7 u) ^}());
$ b+ C$ b* [- Freturn canvas;
});
puzzle.html代码如下：
0 C' B: O  a8 c/ @( G$ h复制代码代码如下:<!doctype html>
; ]: m5 e5 W8 Y7 D+ ]6 M<html>
<head>
. e# `% I, S9 k7 {/ o0 F<meta http-equiv=content-type content=text/html; charset=utf-8>
$ N2 L: O0 V! ~' s' [% Y<title>insert title here</title>
0 z. g( {2 s+ ]7 ]1 R<link type=text/css href=html5_puzzle.css rel=stylesheet />
<script type=text/javascript src=../multi_upload/seed.js></script>
4 V% T6 Y; l+ ^9 f" I0 x<script type=text/javascript src='html5_puzzle.js'></script>
</head>
0 A: T  v( a6 f6 k, |5 T+ u<body>
<div id='html5_puzzle'>
# O8 F' N  D! U<div id='puzzle_left'>
/ K2 J' S( f/ E8 v% Z9 b<div class='puzzle_column'>
<ul>
<li><img src='small_img/1.jpg' data-index='1' /></li>
* ~' H; Y- s+ `3 T<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>
6 e9 A- Z* Z3 P% c" o) V<li><img src='small_img/5.jpg' data-index='5' /></li>
6 w+ Q4 ?2 a- s  K. W) t& G7 d* o</ul>
! M8 ^, F( \6 a</div>
/ _) G6 ?% P5 V6 f<div class='puzzle_column'>
<ul>
0 C$ A# v" K' b8 `2 q8 r<li><img src='small_img/6.jpg' data-index='6' /></li>
<li><img src='small_img/7.jpg' data-index='7' /></li>
<li><img src='small_img/8.jpg' data-index='8' /></li>
. v1 z2 I3 o& W& X& \5 ]9 y<li><img src='small_img/9.jpg' data-index='9' /></li>
<li><img src='small_img/10.jpg' data-index='10' /></li>
! \0 V+ |: V$ O4 @! l# D' y</ul>
</div>
</div>
$ i) F4 p% t$ s4 {% g; o  Q" l. X<div id='puzzle_right'>
; J! w1 U4 i! l- s& a' C% f2 n7 w<div id='puzzle_canvas'>
<canvas id=canvid1></canvas>
1 @  x0 z2 W! J+ S$ s0 |' ~. F<div id='canvas_menu'>
<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
href='javascript:void(0)' id='photo_update'>更改图片</a>
* }' i7 s& V$ c$ V6 x</div>
, f: k! Z& Q* l6 l3 O4 y</div>
) H* H! f' x5 v. m& T<img id=bg src=big_img/1.jpg width='600' height='450' />
</div>
9 a8 M/ V+ M; }+ p- [% P/ l<div id='puzzle_bottom'>
<a href='javascript:void(0)' id='add_img'><span>添加图片</span><input
type=file multiple= id='fileimage'> </a> <a
href='javascript:void(0)' id='upload_btn'>上传</a> <a>点击图片可以旋转，拖拽,
* _! K0 G8 o/ H3 j. B/ _7 L+ N0 |( ]缩放哦!</a>
</div>
, s0 b% S% n* K! l' d' k% I5 Z</div>
<input type=file id='test'>
<canvas id='test_canvas'></canvas>
/ n/ g/ A/ J$ k0 `3 f. D* z</body>
</html>
" i/ j) S% `- @$ @2 L1 ]/ m$ khtml5_puzzle.css代码如下：
复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
% i7 C, C7 e  A5 i( C; Zfont-size: 0;
& K# l' U3 `& K, Z}</p> <p>canvas {
. t+ F0 |# _# Y" D+ Ebackground-color: transparent;
- C7 {' {+ j( A5 ]3 M+ Uleft: 0;
position: absolute;
top: 0;
}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
display: inline-block;
}</p> <p>.puzzle_column li {
  K" b6 e+ L8 j: F2 n& pdisplay: block;
# r# o  f% C' V7 \margin: 5px;
9 N' [) c* ?. i9 |border: 1px solid #ffffff;
) e7 X* I- K- \}</p> <p>.puzzle_column li:hover {
border: 1px solid #3b5998;
$ k$ [; ~4 S" _* x* X& ~7 Ecursor: pointer;
% c3 L) b) p/ L" i}</p> <p>.puzzle_column {
font-size: 0;
}</p> <p>#puzzle_left,#puzzle_right {
border: 1px solid #3b5998;
' E* I" [; S6 E9 v7 y$ g% b, B, V}</p> <p>#puzzle_right,#puzzle_bottom a {
1 @% g  ]3 |! F" W8 ]% t; ^! ofont-size: 14px;
margin: 10px 0 0 10px;
}</p> <p>#puzzle_bottom {
margin: 5px 0;
}</p> <p>#puzzle_canvas img {
}</p> <p>#puzzle_canvas {
overflow: hidden;
; s8 F5 `, M* T  l1 b, Swidth: 600px;
% E& B1 \4 a1 S+ M. \# [height: 450px;
position: relative;
}</p> <p>#add_img input {
position: absolute;
font-size: 100px;
$ I1 Q3 w( J) O9 M; _right: 0;
top: 0;
opacity: 0;
}</p> <p>#add_img {
position: relative;
display: inline-block;
' }3 r$ a1 B4 F7 H3 Ubackground: #3b5998;
4 U  r( K) v) {border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
& O: o4 W( u; Icolor: #ffffff;
}</p> <p>#bg,#show_list {
display: none;
1 A6 t7 ?9 t% K6 |* p" d8 \& {3 S}</p> <p>#canvas_menu {
border: 1px solid red;
position: absolute;
z-index: 5;
top: 0;
, I4 m( t0 j" _. y+ H) C4 Xleft: 0;
* J8 w. {) ?  l; o8 Rdisplay: none;
}</p> <p>#canvas_menu a {
display: inline-block;
3 O  @" I: n3 l% z+ a, p}</p> <p>#test_canvas {
, S$ }7 `$ s: P! W" o' n; gtop: 700px;
}
html5_puzzle.js代码如下：
复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
0 l) k0 a- W# _/ Q: Vs, canvasimg, canvaselement) {
var img=[];
var canvas = new canvaselement.element();
, O3 p% _- \9 t8 m9 V+ \0 ~* Rcanvas.init('canvid1', {
width : 600,
6 r& r" p2 S' E0 G5 M* m- U# V1 rheight : 450
});
s('.puzzle_column img').on('click',function(e){
var index=this.getattribute('data-index');
$('bg').onload = function() {
var ctx=$('canvid1-canvas-background').getcontext('2d');
ctx.clearrect(0, 0,600,450);
# c/ }8 H$ J% ~  ?, ~img[0]=new canvasimg.img($('bg'), {});
$ p& {. w/ y2 ?- d. C; S% icanvas.setcanvasbackground(img[0]);
};
$('bg').setattribute('src','medium_img/'+index+'.jpg');
7 g: y2 O( o3 V0 ke.stoppropagation();
});
  c1 ?5 ~2 l8 @) @% L/ \var canvasdemo = function() {
, d( B- c' }. E; p3 greturn {
+ @/ X+ b0 j% I. w5 O2 X0 Qinit : function() {
var img_list=dom.query('#puzzle_canvas img');
4 ?( J$ Y) ]7 [9 ]# M& Uimg[0]=new canvasimg.img($('bg'), {});
s.each(img_list,function(i,el){
+ U  V: n! h8 u4 X% Nel.setattribute('data-index',i);
img.push(new canvasimg.img(el, {}));
! o2 A( @5 _- v: ^- y. N# Ecanvas.addimage(img[i+1]);
$ P) K" B$ C" R3 p) v" s* U});
* A, l  O( V8 S! H& x. Z1 L. zcanvas.setcanvasbackground(img[0]);
; a# i% [% l$ g7 G* [this.cornersvisible = (this.cornersvisible) ? false : true;
- v4 V: E# B  p* |this.modifyimages(function(image) {
" A5 X% b5 V+ `image.setcornersvisibility(this.cornersvisible);
});
8 K: ]" r2 V, H) R! i% a! y5 C},
/ Z& ]' e4 b  U) m+ T) _modifyimages : function(fn) {
6 m3 s0 O" P$ Q9 k( E  Rfor ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
fn.call(this, canvas._aimages);
}
3 S+ |" w2 r2 R* M- @. l/ B; D7 ^) |canvas.renderall(false,false);
s('#puzzle_canvas img').remove();
img = [];
}
) ?0 z) b5 o% `7 u" Q};
}();
function getcurimg(){
3 o3 I$ d1 M2 Q) r: |var oimg=canvas._prevtransform.target;
for(var i=0;i<canvas._aimages.length;i++){
if(canvas._aimages._oelement.src==oimg._oelement.src){
return i;
+ b, a- A0 w/ Q4 o9 Y% O" H4 A}
}
7 Y; y0 w7 Y5 _& b# Z}
9 _3 F9 |$ M8 v) y8 ~+ ps('#photo_delete').on('click',function(e){
4 q/ D* ~! M7 C/ K) |var i=getcurimg();
canvas._aimages.splice(i,1);
9 {3 P  ~" o  w' o' jcanvas.renderall(true,true);
4 x, X4 V$ _5 e0 @3 p7 o8 L( w$('canvas_menu').style.display=none;
});
s('#photo_update').on('click',function(e){
& w; }* f7 K  ~2 @0 o$('test').click();
8 J+ R- g" A  L8 {5 X0 S# Q});
: B! h1 X% E3 P! |' Qs('#test').on('change',function(e){
var files = e.target.files || e.datatransfer.files;
var reader = new filereader();
reader.onload = (function() {
return function(e) {
var dataurl = e.target.result, canvas1 = document.queryselector('#test_canvas'), ctx = canvas1.getcontext('2d'), img = new image();
* x# x2 [  K- @# A6 @img.onload = function(e) {
- h( A0 X- y2 _( iif(img.width>200||img.height>200){
, k" U9 M+ a1 N7 L! Rvar prop=math.min(200/img.width,200/img.height);
img.width=img.width*prop;
img.height=img.height*prop;
}
canvas1.width=img.width;
canvas1.height=img.height;
( H$ h4 N0 D# p% lctx.drawimage(img, 0, 0, img.width, img.height);
* A  _" Z( B- n% ^; Gs('#canvid1').html(s('#canvid1').html()+<img src='+canvas1.todataurl(image/jpeg)+'/>);
: ^$ M$ X# p7 G' C4 V6 gvar t = window.settimeout(function() {
4 K1 R% Y6 i* n5 }, D" q) Z- avar i=getcurimg(),target=canvas._prevtransform.target;
console.log(target);
/ i7 }0 L, \' D. c: z0 Xcanvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
2 S5 N: J% C' T$ w& Z) B6 Y5 L8 S) Btop:target.top,
left:target.left,
6 |- F  D' g1 Gscalex:target.scalex,
scaley:target.scaley,
angle:canvas.curangle
});
! `( L% \9 Z0 N3 vcanvas.rendertop();
cleartimeout(t);
) R( j( B( X9 S4 I- `s('#canvid1 img').remove();
},1000);
4 @7 ^: Z5 J8 o% P$ I0 M1 C: H: M};
img.src = dataurl;
};
+ q5 W2 e# _( E+ \* z; W})();
" o- T. A# m* Ureader.readasdataurl(files[0]);
});
s('#upload_btn').on('click',function(){
var imgdata = canvas.canvasto('jpeg');
, O( `" ^: b( C3 |var imgvalue = imgdata.substr(22);
4 J- Y0 C! ^( i! F" s: ss.ajax({
url : 'http://localhost/html5/upload1.php',
1 p/ O, `6 S! @. z  k' |* P' atype : 'post',
! ?, i# f& ~, n1 [# ^data : {
/ H% r# \) M2 d; ?; dimgdata : imgvalue,
6 z. k( U; H2 W3 `6 t5 i, D3 k3 lfile_name :'mix_img.jpeg'
- l3 f4 n' S0 [& P},
+ O. j: m& i* ?4 s& E, Odatatype : 'text',
: p& C/ W+ T1 Y4 j, Osuccess : function(data) {
9 c8 q' v" o7 y  s4 W  C: R1 Galert(s);
}
# E% Z- k2 g1 t7 |});
});
8 z2 p; ^  n: U( h2 ?7 z9 y});
至于用html5 input读取图片，这很简单就不贴出来了。
5 D7 f; a' F" [1 |% }
更多网页制作信息请查看： 网页制作

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

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

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

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

疯了.........

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

一骂人就激动....

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