html5版canvas自由拼图实例

本文实例讲述了html5版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下：
* U. S# r1 M. W9 S8 p代码运行效果如下图所示：

                               
登录/注册后可看大图

canvaselement.js代码如下：
5 V# F7 Q/ w- N5 ~. F9 t- k( N+ D& y复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
" T" u; D8 B  n8 M- n, i; v(function () {
canvas.element = function() {};
: s* x# M% C) R% Z/ {canvas.element.prototype.fillbackground = true;
canvas.element.prototype.showcorners = false;
canvas.element.prototype.photoborder = true;
6 n. u6 u5 f0 _& Tcanvas.element.prototype.polaroid = false;
8 v7 l  b8 E1 M& K- W( f& Scanvas.element.prototype._backgroundimg = null;
5 r- K/ P8 d8 S! Pcanvas.element.prototype._groupselector = null;
, U9 ^( k7 q! p5 ocanvas.element.prototype._aimages = null;
canvas.element.prototype._ocontext = null;
canvas.element.prototype._oelement = null;
canvas.element.prototype._oconfig = null;
canvas.element.prototype._currenttransform = null;
canvas.element.prototype._prevtransform = null;
* R! G. X* R9 `$ `' H3 |( pcanvas.element.prototype.curangle = null;
canvas.element.prototype.init = function(el, oconfig) {
if (el == '') {
7 d% I6 X& x* x/ A3 n8 S$ [return;
}
this._initelement(el);
& s* s4 Q; R5 R/ [! F, hthis._initconfig(oconfig);
1 R, ]0 {/ V' |, K" e& N7 }this._createcanvasbackground();
& J* A3 \( @# L3 @# i$ P* nthis._createcontainer();
; V1 n6 ?2 c3 sthis._initevents();
this._initcustomevents();
- L0 x+ ~" A* W, Z" g};
canvas.element.prototype._initelement = function(el) {
. r6 e8 ^6 o0 mthis._oelement = document.getelementbyid(el);
this._ocontexttop = this._oelement.getcontext('2d');
};
canvas.element.prototype._initcustomevents = function() {
  y' Q7 X- u* w* s4 w- qthis.onrotatestart = new canvas.customevent('onrotatestart');
( T. q8 J# n' f9 z* A' ~) pthis.onrotatemove = new canvas.customevent('onrotatemove');
2 X& E- _+ k8 ?this.onrotatecomplete = new canvas.customevent('onrotatecomplete');
this.ondragstart = new canvas.customevent('ondragstart');
this.ondragmove = new canvas.customevent('ondragmove');
3 z7 S+ r( r9 w" J+ }# T) u9 X+ C9 ethis.ondragcomplete = new canvas.customevent('ondragcomplete');
- y9 T# A) w9 @4 S};
8 [. Y5 A+ G4 G0 w: Y9 ^1 }canvas.element.prototype._initconfig = function(oconfig) {
this._oconfig = oconfig;
this._oelement.width = this._oconfig.width;
  o3 z5 @3 X3 g* Cthis._oelement.height = this._oconfig.height;
6 r6 j' V# i8 n3 Bthis._oelement.style.width = this._oconfig.width + 'px';
# n& r3 j$ \, W5 k3 Bthis._oelement.style.height = this._oconfig.height + 'px';
};
canvas.element.prototype._initevents = function() {
var _this=this;
s(this._oelement).on('mousedown',function(e){
_this.onmousedown(e);
});
s(this._oelement).on( 'mouseup', function(e){
_this.onmouseup(e);
: L5 M" l2 ~! n# @7 C) I8 }});
: B. Y  x  H6 F- as(this._oelement).on('mousemove', function(e){
_this.onmousemove(e);
});
/ X( z, r' s* f: K8 E9 ~9 j: w};
7 o0 |8 R4 e* E8 kcanvas.element.prototype._createcontainer = function() {
2 x! L! h' R4 X. c; Wvar canvasel = document.createelement('canvas');
: c. ~- f" r* ncanvasel.id = this._oelement.id + '-canvas-container';
var ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
* d/ z, s  @# nocontainer.width = this._oconfig.width;
ocontainer.height = this._oconfig.height;
ocontainer.style.width = this._oconfig.width + 'px';
+ E% X" d/ C) q) y7 j7 R' k9 rocontainer.style.height = this._oconfig.height + 'px';
this._ocontextcontainer = ocontainer.getcontext('2d');
1 D5 h( b# K5 J# M- i, m- _  C};
canvas.element.prototype._createcanvasbackground = function() {
9 L: v/ `/ r2 c7 ^$ Avar canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-background';
1 f# i* z6 A: A1 i& ?var obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
obackground.width = this._oconfig.width;
/ q8 |: k) m) |# ^obackground.height = this._oconfig.height;
obackground.style.width = this._oconfig.width + 'px';
$ P) X* N4 J. _obackground.style.height = this._oconfig.height + 'px';
6 X" {. |! T8 `! p5 l! b. B5 sthis._ocontextbackground = obackground.getcontext('2d');
9 |8 f# L7 P$ e6 i; Y};
canvas.element.prototype.setcanvasbackground = function(oimg) {
- R$ Y( a' X4 p2 hthis._backgroundimg = oimg;
+ j! i. v& l! t% @. v( V# gvar originalimgsize = oimg.getoriginalsize();
2 \7 ]5 a( p8 M/ U! Dthis._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
! k7 u8 e/ h+ d6 J};
! C1 h: x. [5 T8 C- j0 Rcanvas.element.prototype.onmouseup = function(e) {
if (this._aimages == null) {
) Y+ u& t5 [4 A, U& Dreturn;
! R1 Z$ r8 q4 S. a8 M. @7 J}
if (this._currenttransform) {
this._currenttransform.target.setimagecoords();
}
if (this._currenttransform != null && this._currenttransform.action == rotate) {
this.onrotatecomplete.fire(e);
! S: `* e* {3 v0 k! w- C$ T; {} else if (this._currenttransform != null && this._currenttransform.action == drag) {
this.ondragcomplete.fire(e);
9 r0 `" b  y. K3 A. e3 |' S}
6 D. ]( V, }- H$ y: b2 `this._currenttransform = null;
0 D' S  n/ L# r1 X- o) S2 Fthis._groupselector = null;
: c. f( g7 P6 U7 K' E! Q/ Hthis.rendertop();
};
canvas.element.prototype.onmousedown = function(e) {
+ J4 f' Q5 `6 C* S; Z- H- v% b6 Gvar mp = this.findmouseposition(e);
0 @4 o# G2 M+ V% U. y! O( S$ P; eif (this._currenttransform != null || this._aimages == null) {
return;
; C1 C$ |/ ]2 M3 ?# p}
var oimg = this.findtargetimage(mp, false);
- p8 g0 \, @% N  N% M7 dif (!oimg) {
3 ?: _" }( f+ |( {7 `8 `6 R3 Lthis._groupselector = { ex: mp.ex, ey: mp.ey,
& C. P5 d3 k% T, m& c- n1 _top: 0, left: 0 };
! G# ]3 u7 |3 ?* i2 Q. t9 F}
else {
! X9 E* V3 b3 |% Ovar action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
; F) Z8 M# I2 jif (action == rotate) {
this.onrotatemove.fire(e);
} else if (action == drag) {
this.ondragmove.fire(e);
* y- H6 s9 @$ B1 j}
6 ]) k) i1 T# S* r, Lthis._prevtransform=this._currenttransform = {
target: oimg,
; J' I4 L& R6 v, h* X2 V( \9 U9 ?2 a  w/ Oaction: action,
; v* N- g- Z' i0 S0 Uscalex: oimg.scalex,
offsetx: mp.ex - oimg.left,
offsety: mp.ey - oimg.top,
' [$ P4 x0 F/ r- nex: mp.ex, ey: mp.ey,
  z7 e: X7 b& Jleft: oimg.left, top: oimg.top,
theta: oimg.theta
};
7 a% ~/ f- f, t/ Z: @$('canvas_menu').style.transform='rotate('+oimg.theta*180/3.14+'deg)';
$('canvas_menu').style.left=oimg.left+px;
/ a2 Y& e; x2 C2 h! I9 t1 j. s! f$('canvas_menu').style.top=oimg.top+px;
. b7 ?, d- o0 |, q+ W" {7 G' W$('canvas_menu').style.display=block;
this.renderall(false,false);
, r' q( Z. d8 Q}
};
9 A; j0 W0 a5 l; s3 q' `" gcanvas.element.prototype.onmousemove = function(e) {
' _3 [: v! |$ k3 \' zvar mp = this.findmouseposition(e);
if (this._aimages == null) {
2 ?4 m: c( D* t' d' h; ireturn;
}
6 W) V! g7 l* N6 `+ G( A8 _+ gif (this._groupselector != null) {
this._groupselector.left = mp.ex - this._groupselector.ex;
- Z* P% |& |2 u- ~this._groupselector.top = mp.ey - this._groupselector.ey;
this.rendertop();
}
' I* D- T+ q" Eelse if (this._currenttransform == null) {
var targetimg = this.findtargetimage(mp, true);
this.setcursor(mp, targetimg);
}
else {
if (this._currenttransform.action == 'rotate') {
7 m$ s8 [# ]7 U! K& q  tthis.rotateimage(mp);
% L0 K& b9 A9 Gthis.scaleimage(mp);
this.onrotatemove.fire(e);
. E6 k/ X* k) C# c: c: A% R& u6 l' ^}
else {
this.translateimage(mp);
this.ondragmove.fire(e);
% c+ ~/ L3 P, z+ _2 d* M; x1 J8 C}
! e/ Z) V* f) i3 r- {$ f! Uthis.rendertop();
' h& D$ M: H* u* k6 u$ K9 t}
};
" Y5 d- U( k  P: C! rcanvas.element.prototype.translateimage = function(mp) {
this._currenttransform.target.left = mp.ex - this._currenttransform.offsetx;
this._currenttransform.target.top = mp.ey - this._currenttransform.offsety;
( w* Y+ t+ X0 E$('canvas_menu').style.left=this._currenttransform.target.left+px;
3 Y6 I( L# c7 _, y3 m0 a$('canvas_menu').style.top=this._currenttransform.target.top +px;
5 V; K9 s7 t: J5 q};
canvas.element.prototype.scaleimage = function(mp) {
var lastlen =
+ W+ f% w/ d  }2 S' ^  O+ e) Jmath.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
math.pow(this._currenttransform.ex - this._currenttransform.left, 2));
1 V' o  B/ ]- z! n+ K5 m" g5 Evar curlen =
- z: V& p; m. Z( cmath.sqrt(math.pow(mp.ey - this._currenttransform.top, 2) +
  {# b! x3 L7 d$ ^  j4 h% A- ?. Tmath.pow(mp.ex - this._currenttransform.left, 2));
var curscalex= this._currenttransform.scalex * (curlen / lastlen);
: x0 X6 a, S5 v6 \" [var curscaley=this._currenttransform.target.scalex;
# b! H$ \) s  f$ p- c, Mif(curscalex>0.7&&curscaley>0.7){
this._currenttransform.target.scalex =curscalex;
7 p: j, @5 A- p% y1 S( o0 }this._currenttransform.target.scaley = curscaley;
5 X3 ~' O& V' X}
};
canvas.element.prototype.rotateimage = function(mp) {
4 v" W' Q) a$ m% R6 cvar lastangle = math.atan2(
; J* ?0 S5 W0 r5 O$ u6 zthis._currenttransform.ey - this._currenttransform.top,
1 e( }! `8 @) G/ L2 y! q8 x$ r$ h& P" fthis._currenttransform.ex - this._currenttransform.left
& |  c) t7 ~/ V1 [);
var curangle = math.atan2(
mp.ey - this._currenttransform.top,
mp.ex - this._currenttransform.left
);
this._currenttransform.target.theta = (curangle - lastangle) + this._currenttransform.theta;
this.curangle=this._currenttransform.target.theta*180/3.14;
1 v, m3 |: M4 @8 A$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
};
- M) B3 |1 j+ ^0 U" zcanvas.element.prototype.setcursor = function(mp, targetimg) {
0 s! U+ K# l$ [% A1 `if (!targetimg) {
. e' o1 D$ ~) o/ D, y  ?1 D; a" tthis._oelement.style.cursor = 'default';
}
/ }8 ~8 |8 B3 o. d7 ~else {
) o8 s$ L" }3 R. U# ^# X- Ivar corner = this.findtargetcorner(mp, targetimg);
: S8 a& w' i/ ~# ~if (!corner)
{
this._oelement.style.cursor = 'default';
3 m5 \# G( `- a" w- j}
8 I( J$ y8 k8 I' ~8 B/ felse
0 X) N% q) X5 X' D  E# s9 j{
" J. b0 S9 h/ r" y& ~0 |if(corner == 'tr') {
this._oelement.style.cursor = 'ne-resize';
1 l8 Q* T! W# F, F/ m4 p  N, r}
* G; {7 e0 M( p, H3 P, O2 R5 M! D5 Ielse if(corner == 'br') {
this._oelement.style.cursor = 'se-resize';
}
else if(corner == 'bl') {
this._oelement.style.cursor = 'sw-resize';
$ A5 e+ ~: J* l. x6 G8 M}
: a$ O3 M$ c3 i  f7 zelse if(corner == 'tl') {
" n6 n# Y. Y3 Athis._oelement.style.cursor = 'nw-resize';
; n8 R) W9 B! c4 x+ H}
7 z% _! X' P. a; A' W. |' Pelse {
this._oelement.style.cursor = 'default';
# Z9 f/ n# u3 R5 t# @: B5 c}
' a9 k  N2 A8 ?- Q7 A. z: k}
}
};
canvas.element.prototype.addimage = function(oimg) {
& V1 A: K/ p0 e9 m7 `- l2 H8 ^* ~4 Aif(s.isemptyobject(this._aimages)) {
+ i! g( c- L8 t) ]8 w0 Qthis._aimages = [];
}
; R. V* g% [' ~this._aimages.push(oimg);
4 k0 G+ H  T( ithis.renderall(false,true);</p> <p> };
$ z: [: t5 Q5 V) Tcanvas.element.prototype.renderall = function(allontop,allowcorners) {
0 ~' l' n$ R, [  v* T4 U  K& R# _var containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
! n* [" A: w/ O' D4 ]this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
containercanvas.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
2 g+ j4 j( o0 `( m) [if (allontop) {
var originalimgsize = this._backgroundimg.getoriginalsize();
; w# B* K2 Y- x# T6 @0 U8 rthis._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
, h: q5 Y+ t. m1 C}
* P( w7 w+ E  V* I: @4 R/ p! Kfor (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
this.drawimageelement(containercanvas, this._aimages,allowcorners);
}
this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
};
* `- t) l  Z  f, R$ Vcanvas.element.prototype.rendertop = function() {
8 g0 z3 O9 U+ E4 x1 t; A4 Bthis._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],true);
if (this._groupselector != null) {
- j' ]" m- r( x3 }3 a& w! [5 Gthis._ocontexttop.fillstyle = rgba(0, 0, 200, 0.5);
this._ocontexttop.fillrect(
, r! V3 v8 Y0 \, Z6 i/ V3 Sthis._groupselector.ex - ((this._groupselector.left > 0) ?
. z9 {2 l) W4 W7 D; o0 : - this._groupselector.left),
' x) Z% h" r5 Q  h2 H2 Hthis._groupselector.ey - ((this._groupselector.top > 0) ?
0 : - this._groupselector.top),
* S8 `% M, V& G# kmath.abs(this._groupselector.left),
math.abs(this._groupselector.top)
1 M0 X! {( a/ |! w);
; D7 L( k+ A# g2 ?3 j& ^2 tthis._ocontexttop.strokerect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
0 : math.abs(this._groupselector.left)),
6 t; x: ~! B5 T$ ]this._groupselector.ey - ((this._groupselector.top > 0) ?
+ X9 a" r3 i0 c, h  j2 D0 : math.abs(this._groupselector.top)),
math.abs(this._groupselector.left),
6 p+ D  E& f- w4 b0 [math.abs(this._groupselector.top)
);
}
8 _' D: D. F3 }( T; A$ b};
& d/ @9 S' p7 vcanvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
oimg.cornervisibility=allowcorners;
var offsety = oimg.height / 2;
' B; g9 {7 g# w2 A6 ovar offsetx = oimg.width / 2;
0 y: e) _% J9 U, _( dcontext.save();
context.translate(oimg.left, oimg.top);
4 Y7 P+ J( k' ]2 N7 n1 _. _3 Ncontext.rotate(oimg.theta);
context.scale(oimg.scalex, oimg.scaley);
0 u7 B- C$ H! ?/ M- I+ mthis.drawborder(context, oimg, offsetx, offsety);
var originalimgsize = oimg.getoriginalsize();
# b& N* J+ h+ o" C" L. g% t6 vvar polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
context.drawimage(
8 u7 H# i  m) @$ L& k7 a: Yoimg._oelement,
- originalimgsize.width/2,
9 @. X$ N8 G# q0 X, Z# L' g9 ^((- originalimgsize.height)/2 - polaroidheight),
originalimgsize.width,
% [7 w& @; T: l* q& L1 }/ eoriginalimgsize.height
);
* o! `) r0 T) I/ Wif (oimg.cornervisibility) {
7 W7 ]- C- J3 Xthis.drawcorners(context, oimg, offsetx, offsety);
}
0 ]" H( [) b+ `- b$ a! _context.restore();
};
3 @2 o% A5 w' {canvas.element.prototype._getimagelines = function(ocoords) {
return {
topline: {
o: ocoords.tl,
4 R* u! s0 }- Rd: ocoords.tr
3 g# b( @% }) \2 Y# R0 r},
rightline: {
  O2 Q& H8 X  Y' Do: ocoords.tr,
d: ocoords.br
},
bottomline: {
# T( T. P: u; }" ]o: ocoords.br,
d: ocoords.bl
0 V( R- Y4 W. Z: ^& @},
leftline: {
o: ocoords.bl,
d: ocoords.tl
}
};
! D4 n( ~' d  Y1 }' a};
$ M8 b" U% W5 B" ecanvas.element.prototype.findtargetimage = function(mp, hovering) {
for (var i = this._aimages.length-1; i >= 0; i -= 1) {
var ilines = this._getimagelines(this._aimages.ocoords);
var xpoints = this._findcrosspoints(mp, ilines);
if (xpoints % 2 == 1 && xpoints != 0) {
8 \" D: ]% n5 P4 t$ T( rvar target = this._aimages;
if (!hovering) {
. P& {0 S8 H* A6 a0 w+ @: W* Uthis._aimages.splice(i, 1);
5 l8 {# t3 u9 s0 H  I/ W7 ithis._aimages.push(target);
; p+ u" D- E0 k5 m( ?}
return target;
}
7 v0 Y- }/ ^  E8 M5 y7 X3 R8 z. A}
return false;
};
canvas.element.prototype._findcrosspoints = function(mp, ocoords) {
var b1, b2, a1, a2, xi, yi;
var xcount = 0;
' m. Q2 z: W& x9 a' Qvar iline = null;
2 L% \) V+ |" c. Gfor (linekey in ocoords) {
' U2 e' ~2 `. Y8 `; iiline = ocoords[linekey];
if ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
, ~, q8 T: g! T' s1 J: ~! B  |continue;
0 H* {+ p! l! A8 w$ u}
( I( F7 q+ U+ N2 ]% x0 i; Cif ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
continue;
}
if ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
8 R7 V) L- e: r  \* Sxi = iline.o.x;
# J, f3 U2 B3 q  Syi = mp.ey;
- Q) k+ A1 l! }}
else {
b1 = 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;
7 e( U- X. c! \  Gxi = - (a1-a2)/(b1-b2);
yi = a1+b1*xi;
- J* |" p3 I  K+ H  `* ~}
if (xi >= mp.ex) {
xcount += 1;
+ `. j, D/ n7 M4 \& x9 I- T' C}
if (xcount == 2) {
6 U' Y/ n* o( R. h# H) s8 |* dbreak;
0 j5 _& p3 L  Q5 {4 `9 ?}
5 I8 q% k, s" q}
- m& j" f2 a/ ^& }, S  ?' ureturn xcount;
};
canvas.element.prototype.findtargetcorner = function(mp, oimg) {
0 {/ s% v# y& Vvar xpoints = null;
' h( A2 Q" x  G- X8 s: V8 |. Pvar corners = ['tl','tr','br','bl'];
for (var i in oimg.ocoords) {
4 X! z. l8 i" |7 g. O5 gxpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
! g! r. J0 s+ k9 Cif (xpoints % 2 == 1 && xpoints != 0) {
return i;
6 V* `6 a( w1 f9 q9 v, k}
3 Z. l$ `% ]+ {5 c. W6 j; a}
return false;
};
canvas.element.prototype.findmouseposition = function(e) {
var parentnode = (e.srcelement) ? e.srcelement.parentnode : e.target.parentnode;
var issafari2 = !s.support.ie&&!s.support.firefox;
, M( N" E% ?) p: o4 d' pvar scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
5 h+ i, q7 |- c. }$ i$ Dvar scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
0 n# z: w8 V- g6 k6 _) xvar safarioffsetleft = (issafari2) ? e.target.ownerdocument.body.offsetleft + scrollleft : 0;
var safarioffsettop = (issafari2) ? e.target.ownerdocument.body.offsettop + scrolltop : 0;
3 o: W# E3 G# U2 Preturn {
: [9 n. J* I9 b- K3 `% }' jex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
; g/ ~/ t( N; t  aey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
screenx: e.screenx,
1 E9 l) O& r; }8 O+ N. Xscreeny: e.screeny
) ?  F5 A+ h* g};
& h" \! b. W1 p/ O9 Z0 b1 g};
canvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
# k# d( P3 q9 e9 a8 b% w( tvar outlinewidth = 2;
0 T) ^+ f' Y' F- S" X3 Jcontext.fillstyle = 'rgba(0, 0, 0, .3)';
context.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
, M$ b1 E9 e3 \$ Q9 L% k( Bcontext.fillstyle = '#fff';
context.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
) `5 G2 W% a4 `" c};
+ i2 N5 X, f1 Q* o0 Ccanvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
  x' {6 E; |$ c# ~9 [: X# x9 I, n! zcontext.fillstyle = rgba(0, 200, 50, 0.5);
context.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
* j; K( @2 P9 C/ [9 Ycontext.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
2 @3 r& o0 l; @: Y5 ncontext.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
};
canvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
" d+ H# V* U5 y- e- b' {1 B7 [! Lcontext.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
1 N( e, F2 Z3 H/ H7 Pcontext.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
- y5 a# z9 J1 ^- fcontext.clearrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
: y1 `/ v( m& U( ]: Kcontext.clearrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
( I0 Q2 U  ?" w) c8 S  Zcontext.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;
% Z9 J8 q% H6 |, T, w  Avar offsetx = this._aimages.width / 2;
this.clearcorners(containercanvas, this._aimages, offsetx, offsety);
}
if (format == 'jpeg' || format == 'png') {
return this._oelement.todataurl('image/'+format);
}
};
canvas.customevent = function(type) {
this.type = type;
this.scope = null;
" C5 I+ i" {  w& X. G- |; |6 [: ?; Qthis.handler = null;
& G, J) c* j' jvar self = this;
. {* n& b8 c/ {this.fire = function(e) {
if(this.handler != null) {
9 D' E  D$ F" |% ?, o2 s' ?2 cself.handler.call(self.scope, e);
( r* P  d7 w+ k, {$ ^}
# ~8 _0 C4 N# O4 C+ |};
};
}());
* K% w( g2 o6 ^9 N& V* `/ `7 C" q0 qreturn canvas;
) S) [3 ]5 i# V: `& I5 U4 A* s});
canvasimg.js代码如下：
复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
; s, v( T9 V8 Z; J# C0 w(function () {
canvas.img = function(el, oconfig) {
$ [8 y; j- ?( `9 V# k) ]( L+ [this._initelement(el);
this._initconfig(oconfig);
this.setimagecoords();
};
canvas.img.css_canvas = canvas-img;
var default_config = {
top: {
. [6 j/ h$ R5 Akey: top,
value: 10
},
left: {
key: left,
. i6 N8 p0 {1 n. lvalue: 10
},
+ ]/ L0 W9 @  ~/ w( {% gangle: {
) p: c0 G( N7 ^! B7 hkey: angle,
value: 0
+ j' W5 |7 O  y% ?* }. ^},
theta: {
$ p& u; C& \" ?! g! E  C6 @/ Bkey: theta,
0 I2 Z8 h$ o$ s1 p1 q3 lvalue: 0
},
scale-x: {
; }4 F" Q/ a' n  _; C2 ?key: scalex,
( N* \# j+ ]' y) O. ~; `value: 1
* t6 g0 I5 j2 v$ {( `},
scale-y: {
5 r7 Z" {+ V5 @# a! ]3 F0 ckey: scaley,
8 d# e, w% S+ Cvalue: 1
* I! R+ e9 Y! \2 K% Y; S},
cornersize: {
0 \1 F/ I7 l0 Z8 L; @9 z+ skey: cornersize,
value:10
},
borderwidth: {
key: borderwidth,
value: 10
/ ]5 J$ a5 Q& R) ]2 [6 E4 g},
' h0 ~( I* b9 o3 M* B2 Epolaroidheight: {
  H+ \; F+ H) W8 m  [1 U# x" |key: polaroidheight,
/ x- d1 m2 r; x; J: Rvalue: 40
2 Q  `/ A3 _/ m+ A- X$ X},
randomposition: {
: {& P9 E( K" S+ l) {key: randomposition,
value: true
$ |" c: H: U6 q}
6 ^  a" P- |7 h1 |  F& k};
6 o/ X) t- x0 Ycanvas.img.prototype._oelement = null;
canvas.img.prototype.top = null;
canvas.img.prototype.left = null;
5 g4 X. `. [( ucanvas.img.prototype.maxwidth = null;
$ d" ?5 g( a0 m! H5 k/ Y1 wcanvas.img.prototype.maxheight = null;
canvas.img.prototype.ocoords = null;
canvas.img.prototype.angle = null;
canvas.img.prototype.theta = null;
/ R. @2 R6 e& I3 q2 pcanvas.img.prototype.scalex = null;
canvas.img.prototype.scaley = null;
canvas.img.prototype.cornersize = null;
canvas.img.prototype.polaroidheight = null;
% p8 o5 f0 D+ ]" S+ _+ N! k9 P% vcanvas.img.prototype.randomposition = null;
9 C4 l' z% B3 wcanvas.img.prototype.selected = false;
3 z( S4 ]; Z6 |6 g/ m, S3 rcanvas.img.prototype.bordervisibility = false;
canvas.img.prototype.cornervisibility = false;
canvas.img.prototype._initelement = function(el) {
this._oelement = el;
};
, T0 r( V4 L* g& O+ icanvas.img.prototype._initconfig = function(oconfig) {
var skey;
for (skey in default_config) {
var defaultkey = default_config[skey].key;
# C: o# w- [% V- U. i9 bif (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
5 P4 s8 _7 v+ B4 l' S) V. Dthis[defaultkey] = default_config[skey].value;
( C3 M8 _+ a4 R/ r: ^' O1 u8 N}
+ i! o7 p3 M% {, J& j" v; B4 K- M+ Delse {
this[defaultkey] = oconfig[defaultkey];
}
}
! r5 h5 K% H, O) \# Hif (this.bordervisibility) {
this.currentborder = this.borderwidth;
}
7 E* V$ |; @2 Y) Telse {
: R5 e* v1 n5 q- N$ Lthis.currentborder = 0;
}
0 Q: Z) n! Y/ K/ Cvar normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
/ Q, u" k5 V( r* Pthis._oelement.width = normalizedsize.width;
; J# Z: ^- ^5 g& n- athis._oelement.height = normalizedsize.height;
! C" V, C- ]+ @this.width = normalizedsize.width + (2 * this.currentborder);
+ ^; `( n; k4 zthis.height = normalizedsize.height + (2 * this.currentborder);
if (this.randomposition) {
0 M8 `0 B0 v0 u" Wthis._setrandomproperties(oconfig);
& `9 o" v" e. C4 \2 B; U, ]1 Q}
) E# b+ W- L, Dthis.theta = this.angle * (math.pi/180);
};
canvas.img.prototype.getnormalizedsize = function(oimg, maxwidth, maxheight) {
, |: g& _* c4 u& D2 Z: a( Eif (maxheight && maxwidth && (oimg.width > oimg.height && (oimg.width / oimg.height) < (maxwidth / maxheight))) {
normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
( D! q% R; x! K) ]5 C- Onormalizedheight = maxheight;
5 j/ d+ \3 |* I}
else if (maxheight && ((oimg.height == oimg.width) || (oimg.height > oimg.width) || (oimg.height > maxheight))) {
normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
normalizedheight = maxheight;
}
5 |' u. x; `" x2 P& |7 nelse if (maxwidth && (maxwidth < oimg.width)){
+ z. s% U2 \% U/ bnormalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
3 I% ]' E+ T. D2 N! R4 Jnormalizedwidth = maxwidth;
. O( L* `0 I% |/ @! J}
8 \: {8 E- e! z2 ~3 e- nelse {
normalizedwidth = oimg.width;
' t7 C) J1 R$ N2 q4 J+ w- u9 rnormalizedheight = oimg.height;
}
9 P, v% B( ^8 L" m- L! Areturn { width: normalizedwidth, height: normalizedheight }
& F4 s+ p3 z/ X9 s; Y! v* u},
canvas.img.prototype.getoriginalsize = function() {
+ C0 s, I( P2 J4 `8 U' j7 Hreturn { width: this._oelement.width, height: this._oelement.height }
: F7 j7 L3 _) ]( Q, O$ |};
canvas.img.prototype._setrandomproperties = function(oconfig) {
if (oconfig.angle == null) {
2 ~  Y8 {4 H. e. K) W1 S& j7 ythis.angle = (math.random() * 90);
}
( B) Q1 \8 v4 g' q0 [3 K9 `if (oconfig.top == null) {
( ]5 L8 M8 P1 [this.top = this.height / 2 + math.random() * 450;
$ P$ Z* n+ J' B6 b8 N# n' P}
if (oconfig.left == null) {
this.left = this.width / 2 + math.random() * 600;
}
# M5 J. O3 g' d( P9 ]};
0 a) h7 n' a" [, x$ e- icanvas.img.prototype.setcornersvisibility = function(visible) {
this.cornervisibility = visible;
};
% x* o! w6 O4 Vcanvas.img.prototype.setimagecoords = function() {
this.left = parseint(this.left);
this.top = parseint(this.top);
' P$ W8 A- |$ Xthis.currentwidth = parseint(this.width) * this.scalex;
this.currentheight = parseint(this.height) * this.scalex;
2 X' ?6 ?$ \" g. H$ Q6 rthis._hypotenuse = math.sqrt(math.pow(this.currentwidth / 2, 2) + math.pow(this.currentheight / 2, 2));
# L' r, Q! D4 m( R- J' {# v8 Zthis._angle = math.atan(this.currentheight / this.currentwidth);
var offsetx = math.cos(this._angle + this.theta) * this._hypotenuse;
( G) v- B2 C6 @: n: Wvar offsety = math.sin(this._angle + this.theta) * this._hypotenuse;
var theta = this.theta;
! K3 J4 l+ @$ Q7 e8 B0 f. i5 Bvar sinth = math.sin(theta);
var costh = math.cos(theta);
var tl = {
x: this.left - offsetx,
y: this.top - offsety
};
var tr = {
( U1 A# W( M/ s) \6 z* Lx: tl.x + (this.currentwidth * costh),
6 y4 R9 V0 l% T; s$ W9 |y: tl.y + (this.currentwidth * sinth)
};
! p3 S4 W. X7 n$ Uvar br = {
x: tr.x - (this.currentheight * sinth),
y: tr.y + (this.currentheight * costh)
};
var bl = {
% d1 R' Z5 ]0 W" I4 ?+ ^0 qx: tl.x - (this.currentheight * sinth),
y: tl.y + (this.currentheight * costh)
% F& v9 @2 L% K( l6 Q2 T: W};
, M6 o% a( {* F" q7 P) gthis.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
3 h5 X1 O- [1 ~. jthis.setcornercoords();
: `6 p- k0 u7 J- N+ `7 X};
" h  X" V! f  k( |, Ucanvas.img.prototype.setcornercoords = function() {
/ T( s. }$ ~. Z8 L+ t+ w! hvar coords = this.ocoords;
var theta = this.theta;
% [% T% J3 l7 Z* rvar 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,
y: coords.tl.y
},
tr: {
x: coords.tl.x + cosoffset,
9 i9 t3 ]6 y7 Q. d2 \" R8 @- dy: coords.tl.y + sinoffset
  o. V: U- M( E# U; l' c' D! M},
8 Z) a/ u% U* V# H0 fbl: {
x: coords.tl.x - sinoffset,
  ]- o9 N& s: X9 H* D; ?y: coords.tl.y + cosoffset
}
};
coords.tl.corner.br = {
x: coords.tl.corner.tr.x - sinoffset,
  E- h1 m0 X: I# o3 Wy: coords.tl.corner.tr.y + cosoffset
% l8 Y, W* f/ g& d# A" `};
) Q, ~0 s( C+ \4 X5 ?4 ^coords.tr.corner = {
tl: {
" M! v+ ?2 s8 px: coords.tr.x - cosoffset,
y: coords.tr.y - sinoffset
},
tr: {
x: coords.tr.x,
y: coords.tr.y
# j: I6 c& l5 w7 Z! u. q' ^' S- v},
br: {
/ L0 ^4 I. j! t# C6 ]3 Gx: coords.tr.x - sinoffset,
y: coords.tr.y + cosoffset
}
};
: L- t5 Y" s, }* b. i, mcoords.tr.corner.bl = {
" B+ Q  w) _. q& l# ~x: coords.tr.corner.tl.x - sinoffset,
y: coords.tr.corner.tl.y + cosoffset
6 O5 E5 A- W8 u  L/ x};
coords.bl.corner = {
5 g$ y* D! ~* h. d' T- gtl: {
x: coords.bl.x + sinoffset,
y: coords.bl.y - cosoffset
& a/ z% x* Q1 [/ j- B},
bl: {
0 G( m; I9 ~  ]x: coords.bl.x,
y: coords.bl.y
  Y" V* X: ~% C% H},
4 R$ e9 _: I  b( B) O# G( q7 Ibr: {
* R3 s  l% H" E  `# N; [9 Hx: coords.bl.x + cosoffset,
; \4 c! l/ l) s/ q2 W1 {& c# h! Hy: coords.bl.y + sinoffset
}
};
% P& g/ S, m4 x* Q$ i+ ~4 Dcoords.bl.corner.tr = {
x: coords.bl.corner.br.x + sinoffset,
y: coords.bl.corner.br.y - cosoffset
};
coords.br.corner = {
5 {4 i. _, g* u( O8 D6 t0 ltr: {
7 w1 A) p- M9 S3 P3 E6 Kx: coords.br.x + sinoffset,
y: coords.br.y - cosoffset
},
8 G3 h& g/ H3 x* [' c: Q. Cbl: {
x: coords.br.x - cosoffset,
2 N% |; s9 f8 P9 E" _8 fy: coords.br.y - sinoffset
},
& ^5 O" r. M! Y) [0 {br: {
6 k' S. q( \2 g# t6 Y$ ?x: coords.br.x,
6 p) |, Z# K2 K# Py: coords.br.y
}
5 q0 L2 B/ x0 y7 _/ e, |};
coords.br.corner.tl = {
3 `. s1 }9 C0 p, T9 qx: coords.br.corner.bl.x + sinoffset,
$ c( S* d5 k9 |y: coords.br.corner.bl.y - cosoffset
};
+ X1 @  s" b% R' r};
}());
return canvas;
' Y- a1 f& n  U; j0 b% |});
puzzle.html代码如下：
复制代码代码如下:<!doctype html>
<html>
$ C7 S* f5 K# l# C6 o5 G<head>
/ G9 n4 o' V" X$ U2 I<meta http-equiv=content-type content=text/html; charset=utf-8>
<title>insert title here</title>
! D4 p+ D8 y' ^! ]/ H; K<link type=text/css href=html5_puzzle.css rel=stylesheet />
<script type=text/javascript src=../multi_upload/seed.js></script>
" @0 h) K2 X" k" x" I<script type=text/javascript src='html5_puzzle.js'></script>
# e4 A$ y7 d( A</head>
<body>
/ I& K+ T  n% D7 O5 b7 p6 e<div id='html5_puzzle'>
. E6 n7 j4 V7 G! ~<div id='puzzle_left'>
<div class='puzzle_column'>
<ul>
<li><img src='small_img/1.jpg' data-index='1' /></li>
- G4 ~" y* p9 d- M+ [3 u<li><img src='small_img/2.jpg' data-index='2' /></li>
<li><img src='small_img/3.jpg' data-index='3' /></li>
$ J; }0 A3 N  w<li><img src='small_img/4.jpg' data-index='4' /></li>
) l, R- [. L2 U- d! f+ J6 l: D" }<li><img src='small_img/5.jpg' data-index='5' /></li>
/ D' I3 ^$ t2 g! x$ M  H</ul>
</div>
<div class='puzzle_column'>
9 r' A5 m. W: l" I5 T<ul>
<li><img src='small_img/6.jpg' data-index='6' /></li>
6 \3 n9 q& ~& N, i  r  b  Z<li><img src='small_img/7.jpg' data-index='7' /></li>
0 j/ B9 e6 ~" E* w/ t1 ?% ?$ O<li><img src='small_img/8.jpg' data-index='8' /></li>
" L' T( Y# q4 `6 [<li><img src='small_img/9.jpg' data-index='9' /></li>
! o4 A& A5 T0 r- n& j, e  g<li><img src='small_img/10.jpg' data-index='10' /></li>
& L( u. _# u, B" Y" Y7 T7 J9 D</ul>
3 A  P. ]8 T) b8 e</div>
</div>
<div id='puzzle_right'>
" n/ v; f, I; q- x+ X' d0 b<div id='puzzle_canvas'>
' p# R# @& g' J' ]4 C& p<canvas id=canvid1></canvas>
<div id='canvas_menu'>
<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
' ]4 P/ e7 m' j: ]% V; Mhref='javascript:void(0)' id='photo_update'>更改图片</a>
</div>
5 c! |3 M) |  c2 z( }</div>
<img id=bg src=big_img/1.jpg width='600' height='450' />
/ F: ]8 E# y3 D7 ?</div>
<div id='puzzle_bottom'>
" F& H( s. [! G! Q8 D* r/ X' c<a href='javascript:void(0)' id='add_img'><span>添加图片</span><input
8 W$ ^& u) r6 d/ O6 c4 Ztype=file multiple= id='fileimage'> </a> <a
& I) U' T, ~. |href='javascript:void(0)' id='upload_btn'>上传</a> <a>点击图片可以旋转，拖拽,
! ~4 S: S" S3 B缩放哦!</a>
</div>
</div>
<input type=file id='test'>
3 {4 [) @$ H1 A/ C8 O( _: d7 m<canvas id='test_canvas'></canvas>
) t; h. S; ^2 Z7 ^</body>
. {- l& r: N+ C5 S' Y1 y</html>
; y3 }2 l3 @: V! w# J8 jhtml5_puzzle.css代码如下：
复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
( Z/ b% C2 T6 {7 l2 w& m0 \; Z, _font-size: 0;
' a8 G. ~$ \* f7 `/ \- l7 x}</p> <p>canvas {
# x' G( u8 ]2 ^& s" z1 j9 ^$ Ebackground-color: transparent;
left: 0;
position: absolute;
! X% D7 h2 k6 B9 H# A) btop: 0;
. d* P9 v1 R- h( m- h$ r}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
2 V/ Y5 ]" {: C# U4 j% L) }5 edisplay: inline-block;
* Y3 S4 ~$ V* B+ `}</p> <p>.puzzle_column li {
display: block;
2 C* \0 j1 n% A/ G0 Gmargin: 5px;
border: 1px solid #ffffff;
}</p> <p>.puzzle_column li:hover {
: s5 s# u1 _0 w$ x( t0 ?7 Vborder: 1px solid #3b5998;
cursor: pointer;
}</p> <p>.puzzle_column {
, E2 A' a1 X/ V1 ?font-size: 0;
}</p> <p>#puzzle_left,#puzzle_right {
border: 1px solid #3b5998;
}</p> <p>#puzzle_right,#puzzle_bottom a {
; z- E" n, P. z  h# C8 Zfont-size: 14px;
margin: 10px 0 0 10px;
5 V1 @1 I! J% s}</p> <p>#puzzle_bottom {
margin: 5px 0;
}</p> <p>#puzzle_canvas img {
}</p> <p>#puzzle_canvas {
( g9 ^' a- D8 G: ^2 _8 ooverflow: hidden;
) G( P( [* `/ u7 A) |$ Kwidth: 600px;
8 r3 y# @8 K. J8 [) E4 Mheight: 450px;
& v8 z( g$ M9 b" Fposition: relative;
}</p> <p>#add_img input {
* K2 Q+ \2 t; z( j" e6 rposition: absolute;
font-size: 100px;
  q( `2 [3 _" B9 xright: 0;
top: 0;
0 ~4 P2 v$ G0 A! Jopacity: 0;
}</p> <p>#add_img {
; d% z" j" W4 }- b- ^position: relative;
- x- U& Y  C: L! }0 ]+ Fdisplay: inline-block;
" u1 J" @$ B) Z" fbackground: #3b5998;
& }6 ~1 R. R% R/ u8 N, hborder-radius: 4px;
# l9 I' @( E, w* A( Spadding: 4px 12px;
) Z; m+ b/ m( e$ c8 m/ W$ \overflow: hidden;
color: #ffffff;
3 r, U' w- {( P$ ~/ j}</p> <p>#bg,#show_list {
display: none;
}</p> <p>#canvas_menu {
% Z+ p2 J. {- w5 ^$ M0 f1 lborder: 1px solid red;
position: absolute;
z-index: 5;
top: 0;
0 l" ?* Y6 o1 Tleft: 0;
6 G' ]2 }4 V  p6 S" N0 D3 F/ Udisplay: none;
}</p> <p>#canvas_menu a {
display: inline-block;
! d1 Q, d! A5 A! W}</p> <p>#test_canvas {
top: 700px;
) Y+ ]$ u8 X# z}
html5_puzzle.js代码如下：
4 ^4 q. m/ \. @# M. m" K复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
, A4 x" P6 a' zs, canvasimg, canvaselement) {
+ e- P6 w# |) F' d' G: Yvar img=[];
var canvas = new canvaselement.element();
canvas.init('canvid1', {
0 L& a5 _; c* ]width : 600,
height : 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);
img[0]=new canvasimg.img($('bg'), {});
( C8 L; {8 v4 |- [canvas.setcanvasbackground(img[0]);
0 i' x1 B% y+ D0 U3 e5 G" @- ^5 U};
2 ?: q( v: a% `% @" N$('bg').setattribute('src','medium_img/'+index+'.jpg');
5 C9 D0 T$ S0 K6 J- j" `e.stoppropagation();
});
. Z" K0 Q$ h$ ?0 n: H8 X9 xvar canvasdemo = function() {
. B- g+ P/ |8 [! `9 l; Areturn {
init : function() {
var img_list=dom.query('#puzzle_canvas img');
" s) |, o- S8 Y, F8 J8 z+ B9 Gimg[0]=new canvasimg.img($('bg'), {});
s.each(img_list,function(i,el){
, f2 X# s6 O( c2 h) g' N1 Bel.setattribute('data-index',i);
: M+ ^& g7 [+ X/ vimg.push(new canvasimg.img(el, {}));
" S' O2 `8 V3 e8 s" fcanvas.addimage(img[i+1]);
: ?" ?9 s' w5 l$ f8 m% ?9 d});
8 [) \" ~: ~3 k8 E4 Y9 Q* ycanvas.setcanvasbackground(img[0]);
this.cornersvisible = (this.cornersvisible) ? false : true;
3 h6 A" x0 u4 j6 I. P; O6 Dthis.modifyimages(function(image) {
& z9 r  c. H- Gimage.setcornersvisibility(this.cornersvisible);
});
# T4 p: u, W6 T( ]* }8 W},
% Y! ?2 ?2 \; Y. h3 jmodifyimages : function(fn) {
8 e1 y4 ~1 D: {$ s. T% E/ Hfor ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
fn.call(this, canvas._aimages);
4 ~- c" U5 J* i* ?* L}
canvas.renderall(false,false);
s('#puzzle_canvas img').remove();
4 `( }* r. x' O+ w3 Nimg = [];
}
};
}();
function getcurimg(){
var oimg=canvas._prevtransform.target;
for(var i=0;i<canvas._aimages.length;i++){
if(canvas._aimages._oelement.src==oimg._oelement.src){
6 s! D+ A! N6 f4 Nreturn i;
}
6 t$ C1 s. T2 v. h1 c}
}
& N* h6 s9 Z4 Z4 `7 l7 Ts('#photo_delete').on('click',function(e){
var i=getcurimg();
canvas._aimages.splice(i,1);
canvas.renderall(true,true);
$('canvas_menu').style.display=none;
5 o1 u2 @1 d" @# w});
& O& e$ h. R* D8 G5 @) os('#photo_update').on('click',function(e){
/ c3 L1 ~$ k) i5 B. p$('test').click();
});
* T' V1 j4 g" a  J# As('#test').on('change',function(e){
& m5 t) S+ N) @& }var files = e.target.files || e.datatransfer.files;
0 Z6 x$ X5 h# I" H1 {' ~  p$ uvar reader = new filereader();
reader.onload = (function() {
1 v2 t3 W5 y; T4 Qreturn function(e) {
var dataurl = e.target.result, canvas1 = document.queryselector('#test_canvas'), ctx = canvas1.getcontext('2d'), img = new image();
img.onload = function(e) {
# L8 A; B) j/ [  ^3 J# aif(img.width>200||img.height>200){
var prop=math.min(200/img.width,200/img.height);
. @2 P: M$ o4 R2 B7 T% G/ Rimg.width=img.width*prop;
0 Z- n9 u  U! `8 t9 q! e" T, Gimg.height=img.height*prop;
}
  y8 l, q" k, G- @# O# Z4 O. |canvas1.width=img.width;
. _- y4 w4 j3 s& N; d8 F1 ^0 pcanvas1.height=img.height;
- o- N$ ?* R) T$ ictx.drawimage(img, 0, 0, img.width, img.height);
! |: b6 A& J) U3 e4 f; Ss('#canvid1').html(s('#canvid1').html()+<img src='+canvas1.todataurl(image/jpeg)+'/>);
1 _: \9 }! k) A; o6 U6 s% k  i- dvar t = window.settimeout(function() {
9 H. S1 ?, ]) _+ h- L" Fvar i=getcurimg(),target=canvas._prevtransform.target;
console.log(target);
canvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
/ n0 F# v% a! ^5 L: @/ n2 ~top:target.top,
left:target.left,
scalex:target.scalex,
scaley:target.scaley,
7 n2 N' \1 V+ cangle:canvas.curangle
8 {  a3 ~! j, |; Q1 ?});
% ?8 b& l1 d; O# M! f$ \canvas.rendertop();
1 J7 J6 A# P4 w7 o' L; h  A3 Zcleartimeout(t);
s('#canvid1 img').remove();
3 S8 t2 Y# N( \3 c9 u8 o; k; v},1000);
};
img.src = dataurl;
" g& f5 `& k! R/ {7 ]! D};
})();
4 _7 j* a  [) Y" j5 Oreader.readasdataurl(files[0]);
; l: d6 Y- T) v- e% I8 O});
s('#upload_btn').on('click',function(){
) l9 f  H' z% y  W+ e; Y& Xvar imgdata = canvas.canvasto('jpeg');
& Z0 h# a! q$ D2 v" v7 o# o( @var imgvalue = imgdata.substr(22);
s.ajax({
url : 'http://localhost/html5/upload1.php',
type : 'post',
data : {
+ d2 ~/ W+ U: c+ timgdata : imgvalue,
3 i4 _8 o4 _0 }" c' S0 C) t8 Zfile_name :'mix_img.jpeg'
+ c8 C$ @$ o2 B% _% N},
datatype : 'text',
8 S; m: e9 l1 U9 ~# |9 L) Q8 b) bsuccess : function(data) {
alert(s);
}
# H* i8 z- p3 @});
});
});
至于用html5 input读取图片，这很简单就不贴出来了。

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

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

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

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

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

疯了.........

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

一骂人就激动....

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