html5版canvas自由拼图实例

本文实例讲述了html5版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下：
代码运行效果如下图所示：
2 T/ E  F  z/ p, h+ F% Z

. ^. s6 l5 Q' q& I7 E1 J                               
登录/注册后可看大图

7 J& }& w& X: o; P, d4 `7 dcanvaselement.js代码如下：
- z1 V* d; @# h! k8 v$ \; a复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
; X0 ~$ |( `  T# g" A* Q0 f(function () {
. d0 N  _4 w3 B2 Y7 O$ fcanvas.element = function() {};
+ {3 T5 ?$ o  f3 Zcanvas.element.prototype.fillbackground = true;
: w: o- z9 A0 z" V( Ncanvas.element.prototype.showcorners = false;
- N% P: G2 }; {( \4 H: ^3 M, ]2 Tcanvas.element.prototype.photoborder = true;
canvas.element.prototype.polaroid = false;
: v) d! J0 W+ p! Gcanvas.element.prototype._backgroundimg = null;
: e1 T! b9 h; h& V! y3 c9 z3 N8 Xcanvas.element.prototype._groupselector = null;
% Z/ {+ z/ a9 h( H/ c: x1 d% g4 Dcanvas.element.prototype._aimages = null;
( K$ r; _. w, q8 x: Wcanvas.element.prototype._ocontext = null;
canvas.element.prototype._oelement = null;
. k1 m4 l9 G, v# E# P" L3 _' w; ocanvas.element.prototype._oconfig = null;
canvas.element.prototype._currenttransform = null;
canvas.element.prototype._prevtransform = null;
; V8 ]. r2 O# U. T" I' Dcanvas.element.prototype.curangle = null;
canvas.element.prototype.init = function(el, oconfig) {
- Z: C/ ~( a" Y, v- I4 a) C6 `if (el == '') {
return;
}
this._initelement(el);
this._initconfig(oconfig);
) W* _- g- }, ^! _% othis._createcanvasbackground();
) i, B: i' H+ G1 w9 }this._createcontainer();
" ~- a# r. P- ^( x+ X- I7 ythis._initevents();
this._initcustomevents();
};
canvas.element.prototype._initelement = function(el) {
8 Q2 E+ l$ ~# y, R: wthis._oelement = document.getelementbyid(el);
this._ocontexttop = this._oelement.getcontext('2d');
8 u6 Q7 k* M3 x' w" x+ [2 ?};
/ i0 z* \; U# k  ~6 Q$ bcanvas.element.prototype._initcustomevents = function() {
- ]2 ^( S2 P; A' [! E6 ?. _this.onrotatestart = new canvas.customevent('onrotatestart');
this.onrotatemove = new canvas.customevent('onrotatemove');
+ W1 Y' C9 N+ S' z4 [! U  k4 wthis.onrotatecomplete = new canvas.customevent('onrotatecomplete');
this.ondragstart = new canvas.customevent('ondragstart');
this.ondragmove = new canvas.customevent('ondragmove');
this.ondragcomplete = new canvas.customevent('ondragcomplete');
+ P7 ]# \" d( S( q$ C};
canvas.element.prototype._initconfig = function(oconfig) {
2 R5 T5 F# }* x  u( H: jthis._oconfig = oconfig;
this._oelement.width = this._oconfig.width;
5 g! B" J" Y5 Sthis._oelement.height = this._oconfig.height;
this._oelement.style.width = this._oconfig.width + 'px';
this._oelement.style.height = this._oconfig.height + 'px';
};
canvas.element.prototype._initevents = function() {
var _this=this;
8 X) x! A! U# i. G0 ks(this._oelement).on('mousedown',function(e){
0 J) S0 O7 R' s1 K' F9 h# v& B( w_this.onmousedown(e);
});
% ~) i0 P9 l) P# d% o) S5 Es(this._oelement).on( 'mouseup', function(e){
_this.onmouseup(e);
5 G" X% c3 J' B});
" ?$ R6 v9 Z1 h. V6 ps(this._oelement).on('mousemove', function(e){
_this.onmousemove(e);
});
};
7 D' U& ^7 G$ F8 m$ ~) N5 ~. L$ Hcanvas.element.prototype._createcontainer = function() {
) a: E9 W  `# z: z6 mvar canvasel = document.createelement('canvas');
- Z& f  U) |2 O# y% V1 Wcanvasel.id = this._oelement.id + '-canvas-container';
3 N# C8 ?: \7 E* Jvar ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
ocontainer.width = this._oconfig.width;
ocontainer.height = this._oconfig.height;
ocontainer.style.width = this._oconfig.width + 'px';
ocontainer.style.height = this._oconfig.height + 'px';
this._ocontextcontainer = ocontainer.getcontext('2d');
};
canvas.element.prototype._createcanvasbackground = function() {
/ [) l/ S# ]- a9 s2 [# ^1 \. ]var canvasel = document.createelement('canvas');
" \2 n$ d! ~6 |& x+ _. @3 e) \canvasel.id = this._oelement.id + '-canvas-background';
var obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
obackground.width = this._oconfig.width;
7 ]+ f0 ]% _# w' T  H7 Q4 l! lobackground.height = this._oconfig.height;
obackground.style.width = this._oconfig.width + 'px';
7 O5 M" q! {+ p4 _obackground.style.height = this._oconfig.height + 'px';
" q* {& h& f! b8 Cthis._ocontextbackground = obackground.getcontext('2d');
};
! B& ~# P6 n; b) f9 ocanvas.element.prototype.setcanvasbackground = function(oimg) {
* G3 ^7 e! l/ `- O; q* y, sthis._backgroundimg = oimg;
" n( o5 o. g/ {6 N) Q3 W8 Nvar originalimgsize = oimg.getoriginalsize();
- ]- s9 t" H3 W8 L! wthis._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
* F! X- B( v9 R( |* r0 H5 f};
canvas.element.prototype.onmouseup = function(e) {
7 b  k0 E% X; G8 j; p2 h5 Rif (this._aimages == null) {
9 D' V) J( @3 A4 V+ [return;
}
& G4 l# b- f0 M; {2 Uif (this._currenttransform) {
7 f: x" m- a. _this._currenttransform.target.setimagecoords();
}
if (this._currenttransform != null && this._currenttransform.action == rotate) {
/ L4 c! m/ O) P" y2 d2 D( dthis.onrotatecomplete.fire(e);
$ ~; Q: `/ I7 F9 H! F2 K} else if (this._currenttransform != null && this._currenttransform.action == drag) {
this.ondragcomplete.fire(e);
}
this._currenttransform = null;
this._groupselector = null;
( i- b% R" v- T0 nthis.rendertop();
};
! U: \( o8 W( V  g- a  D" dcanvas.element.prototype.onmousedown = function(e) {
2 X2 y- R2 @1 z1 ~8 G: @var mp = this.findmouseposition(e);
if (this._currenttransform != null || this._aimages == null) {
! ?- T( s. e% Y7 Z% J3 @return;
. }& S$ \" O7 V7 n& ~0 e9 L}
8 t6 p* i* ]0 f; X7 ]4 j3 K6 `% Wvar oimg = this.findtargetimage(mp, false);
/ s9 P: t- S( z+ Yif (!oimg) {
this._groupselector = { ex: mp.ex, ey: mp.ey,
" ~! h" \' A4 u! Gtop: 0, left: 0 };
# U9 D: x  F6 X; ~" p}
else {
# G/ w3 B3 ]9 H0 V* x" n0 Uvar action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
if (action == rotate) {
this.onrotatemove.fire(e);
# U* J4 `) B- a3 g3 c- K* l6 K) Z: r} else if (action == drag) {
: Y. D1 x, I4 K( r( E. Gthis.ondragmove.fire(e);
}
this._prevtransform=this._currenttransform = {
( Q* [0 ]* k# l4 jtarget: oimg,
' m: i, h; \) y% L6 {5 p9 T# w3 caction: action,
. K1 a- a* D# Y0 iscalex: oimg.scalex,
' k9 |+ a7 _+ s0 l# s' @% N$ _offsetx: mp.ex - oimg.left,
: d5 H5 o9 e) a1 [offsety: mp.ey - oimg.top,
9 z4 D% w' q# |$ q( qex: mp.ex, ey: mp.ey,
1 _, K- ]- o. H3 C$ r$ }. ~/ Mleft: oimg.left, top: oimg.top,
theta: oimg.theta
% N) B: {/ f( r: i};
* v3 I+ y* H$ I/ O1 S$('canvas_menu').style.transform='rotate('+oimg.theta*180/3.14+'deg)';
$('canvas_menu').style.left=oimg.left+px;
! `( _3 I( F) A2 U) M" |$('canvas_menu').style.top=oimg.top+px;
: W3 J1 i% l5 L/ E! e4 U; S! e$('canvas_menu').style.display=block;
this.renderall(false,false);
6 _( G: Y3 ?0 C" p; w; M}
};
canvas.element.prototype.onmousemove = function(e) {
+ W' H8 T- a8 T$ W* l: |) c( Cvar mp = this.findmouseposition(e);
7 u6 X8 R7 c& `/ u, ^' I4 [if (this._aimages == null) {
return;
# a) a* M( j- K) l}
$ L% t) \- m1 u! D# ~if (this._groupselector != null) {
! Z& J; e* ]8 a, k9 Athis._groupselector.left = mp.ex - this._groupselector.ex;
% q; b; @1 Z. x8 n! C. \  s2 Jthis._groupselector.top = mp.ey - this._groupselector.ey;
5 v0 M7 P' x! A4 p. D5 y" |this.rendertop();
}
, J" g3 k; F' b% L& delse if (this._currenttransform == null) {
$ E) }5 B) g0 q! e% M# _var targetimg = this.findtargetimage(mp, true);
this.setcursor(mp, targetimg);
8 Z& ?; Y" w* d$ I  ?" P}
else {
if (this._currenttransform.action == 'rotate') {
this.rotateimage(mp);
this.scaleimage(mp);
this.onrotatemove.fire(e);
$ I) O1 L" g$ `: v}
( a' ?5 h6 \" L, Melse {
' J6 t4 C$ z. [) ]. P4 J. g2 vthis.translateimage(mp);
this.ondragmove.fire(e);
" x7 f' j7 T  b- t; o}
this.rendertop();
3 Z0 T* a$ w: I7 a& h9 k; x}
3 _( a4 U2 f* G};
canvas.element.prototype.translateimage = function(mp) {
this._currenttransform.target.left = mp.ex - this._currenttransform.offsetx;
this._currenttransform.target.top = mp.ey - this._currenttransform.offsety;
) Q' _% q, c6 U- q8 t( _1 n& _, x$('canvas_menu').style.left=this._currenttransform.target.left+px;
$('canvas_menu').style.top=this._currenttransform.target.top +px;
" ^) h! B) Q7 \' N};
* a3 X7 O8 X7 B4 X! \canvas.element.prototype.scaleimage = function(mp) {
var lastlen =
math.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
math.pow(this._currenttransform.ex - this._currenttransform.left, 2));
var curlen =
math.sqrt(math.pow(mp.ey - this._currenttransform.top, 2) +
8 w6 Q5 Y. }0 D, V7 p* z  [math.pow(mp.ex - this._currenttransform.left, 2));
. E: |- p/ g. V2 A/ D- {var curscalex= this._currenttransform.scalex * (curlen / lastlen);
var curscaley=this._currenttransform.target.scalex;
if(curscalex>0.7&&curscaley>0.7){
# S3 R: W* K1 }  W3 X6 l- d/ Kthis._currenttransform.target.scalex =curscalex;
' ]4 G" \; S1 T  b# ^6 }/ n2 Ethis._currenttransform.target.scaley = curscaley;
}
+ d0 w/ P! H6 r, U4 X* ^$ g4 t, v};
2 l1 N) ?' n- J1 {* x9 wcanvas.element.prototype.rotateimage = function(mp) {
var lastangle = math.atan2(
this._currenttransform.ey - this._currenttransform.top,
; n5 Z1 z: d; Nthis._currenttransform.ex - this._currenttransform.left
# `& P" t% O$ q6 c: W& G);
# \% C: P7 E4 S: V9 `var curangle = math.atan2(
mp.ey - this._currenttransform.top,
mp.ex - this._currenttransform.left
);
this._currenttransform.target.theta = (curangle - lastangle) + this._currenttransform.theta;
! F. O# `; w8 }5 e* i9 s' L( `2 Pthis.curangle=this._currenttransform.target.theta*180/3.14;
" ^' p9 y, @7 S) L6 Y- n$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
1 c& @* v/ {0 \8 m% J};
( ^3 Q5 }2 g5 R% m$ X" e2 Y0 T3 fcanvas.element.prototype.setcursor = function(mp, targetimg) {
) H( a: x5 y% R. s( X  nif (!targetimg) {
5 h& H9 [0 m& F. @) _$ Kthis._oelement.style.cursor = 'default';
. I: [" ]; g. s8 w+ m7 n! s7 \}
else {
- v0 d- l6 A0 O& {0 G4 Pvar corner = this.findtargetcorner(mp, targetimg);
: J1 h3 D8 C3 y2 Eif (!corner)
{
this._oelement.style.cursor = 'default';
/ j& {  f, u8 x}
7 p# e( d/ \" C4 k5 [7 Telse
{
7 v: K0 ?; K6 ]' ]8 Mif(corner == 'tr') {
3 d7 D7 Y: \" Q( [' `  B. G' Dthis._oelement.style.cursor = 'ne-resize';
/ H; d5 l. s+ h  e2 Q+ G' O}
else if(corner == 'br') {
this._oelement.style.cursor = 'se-resize';
}
else if(corner == 'bl') {
this._oelement.style.cursor = 'sw-resize';
}
else if(corner == 'tl') {
this._oelement.style.cursor = 'nw-resize';
4 y: R  X. B1 T- G}
  D( P# L' u  X. Velse {
5 s. i- g) D, E: ithis._oelement.style.cursor = 'default';
/ u) N0 [, L1 K}
' {/ m" b3 r' D, c0 j}
}
};
canvas.element.prototype.addimage = function(oimg) {
! s- Z. @" t! O) u% A$ Lif(s.isemptyobject(this._aimages)) {
* A+ `; L% A, e1 A* p/ W  Kthis._aimages = [];
}
this._aimages.push(oimg);
this.renderall(false,true);</p> <p> };
% b8 i; |5 [) _; H2 mcanvas.element.prototype.renderall = function(allontop,allowcorners) {
9 t  X8 S; p2 n2 V" W  ~) t& `var containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
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));
, C4 T! I; U% v& G' g& v( E7 [6 _if (allontop) {
var originalimgsize = this._backgroundimg.getoriginalsize();
this._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
}
for (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
this.drawimageelement(containercanvas, this._aimages,allowcorners);
$ x: p1 S  I% H, ^( J}
this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
};
$ X2 L$ D, V' K7 S! ^canvas.element.prototype.rendertop = function() {
( y$ r  k2 l, [' Y6 e5 ~  u! pthis._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
- P1 L1 J& \, r' \8 Q  Sthis.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],true);
if (this._groupselector != null) {
/ O& C1 C$ B7 ithis._ocontexttop.fillstyle = rgba(0, 0, 200, 0.5);
( m# i% C1 u# zthis._ocontexttop.fillrect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
/ P" _  Q, k5 g/ m3 E4 S1 \4 n4 m0 : - this._groupselector.left),
# S5 s' S) H9 l3 p5 dthis._groupselector.ey - ((this._groupselector.top > 0) ?
0 : - this._groupselector.top),
math.abs(this._groupselector.left),
math.abs(this._groupselector.top)
);
9 ?0 v5 u3 k) z/ ^, nthis._ocontexttop.strokerect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
0 : math.abs(this._groupselector.left)),
this._groupselector.ey - ((this._groupselector.top > 0) ?
0 : math.abs(this._groupselector.top)),
math.abs(this._groupselector.left),
math.abs(this._groupselector.top)
3 U# s: P" S/ ?& R" s& I4 E);
3 K5 _. [, ~, a9 {$ }}
};
canvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
oimg.cornervisibility=allowcorners;
var offsety = oimg.height / 2;
var offsetx = oimg.width / 2;
context.save();
9 ^' F3 Z: Z0 v+ a' k3 A2 Acontext.translate(oimg.left, oimg.top);
context.rotate(oimg.theta);
context.scale(oimg.scalex, oimg.scaley);
7 S) t6 A% _" }* qthis.drawborder(context, oimg, offsetx, offsety);
1 Q0 H  D) F0 E' K0 b- M) @$ I& g; Vvar originalimgsize = oimg.getoriginalsize();
, ]/ N$ B9 I6 q+ W0 Y8 W7 dvar polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
$ h- w- r- @0 D0 xcontext.drawimage(
! V* E' C8 i& Y& W* Voimg._oelement,
- originalimgsize.width/2,
; E& h' P8 F" q* }0 E, B5 g((- originalimgsize.height)/2 - polaroidheight),
  i$ U( S) B$ J+ q( V2 y% Eoriginalimgsize.width,
5 h* j4 O1 K' ?5 Goriginalimgsize.height
);
* }$ j) }! k8 q6 Cif (oimg.cornervisibility) {
this.drawcorners(context, oimg, offsetx, offsety);
}
context.restore();
8 `! G' J( \' e7 v) e0 p2 E};
% A+ I+ L& ]- [5 B/ Acanvas.element.prototype._getimagelines = function(ocoords) {
0 W9 ?$ t* Z7 ]& jreturn {
$ a& S7 v$ A' l( n. B* l' Ctopline: {
o: ocoords.tl,
d: ocoords.tr
: G5 I. q" ^6 w* A* ~! D},
rightline: {
o: ocoords.tr,
7 b1 K2 q6 p1 A: dd: ocoords.br
4 }5 X( w2 M2 J! ]6 l. E& N) ~},
# s% h: P1 Y8 |bottomline: {
o: ocoords.br,
( D7 l( C7 c8 w) j/ |d: ocoords.bl
7 d- h' C: J& T( l},
/ Y5 b3 N# @% [7 p. k. D+ p6 Zleftline: {
& o) [- R1 m0 B: \& j5 }4 zo: ocoords.bl,
! C  c- E3 \: u" j. A2 h( zd: ocoords.tl
8 f% i5 d2 E! l6 X7 ^}
# j, Y, I1 s8 A: b0 G};
};
canvas.element.prototype.findtargetimage = function(mp, hovering) {
for (var i = this._aimages.length-1; i >= 0; i -= 1) {
" Y  L5 F: M+ i- t, wvar ilines = this._getimagelines(this._aimages.ocoords);
var xpoints = this._findcrosspoints(mp, ilines);
if (xpoints % 2 == 1 && xpoints != 0) {
0 r% O# r3 L+ j9 _var target = this._aimages;
if (!hovering) {
this._aimages.splice(i, 1);
this._aimages.push(target);
0 m4 }: ]/ \9 k+ E, T4 @6 b}
/ G- G* n/ |+ L( U# ]9 h1 K6 D* |4 f' Mreturn target;
}
}
return false;
' W$ U1 T+ x9 }; S1 I0 _  C};
canvas.element.prototype._findcrosspoints = function(mp, ocoords) {
var b1, b2, a1, a2, xi, yi;
) ]' L( b/ f9 I" Q/ z! o0 {var xcount = 0;
- n- d1 r8 G( z& _2 nvar iline = null;
: f' X" |+ u; F- m$ M' t5 ifor (linekey in ocoords) {
iline = ocoords[linekey];
if ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
continue;
}
if ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
continue;
! q- x# A' L0 n& S}
0 B; ?& C+ r4 Y0 k! v6 M' }if ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
1 t7 |( }( |/ c9 D! wxi = iline.o.x;
yi = mp.ey;
}
else {
b1 = 0;
b2 = (iline.d.y-iline.o.y)/(iline.d.x-iline.o.x);
2 P6 W  z0 h7 E0 l9 s3 \# f& Na1 = mp.ey-b1*mp.ex;
a2 = iline.o.y-b2*iline.o.x;
% s+ z6 C# G; Exi = - (a1-a2)/(b1-b2);
9 C6 a" w+ u5 j- K) ?$ Xyi = a1+b1*xi;
}
, s0 s  C  {, C5 Fif (xi >= mp.ex) {
5 y; m+ S- r6 J% b7 Qxcount += 1;
}
if (xcount == 2) {
break;
}
# r2 N5 h$ {+ t( p- A7 ^}
3 V" s. i1 c/ j0 A4 V' ]1 L- Freturn xcount;
- m) H8 N) T9 Y8 |7 a/ l};
( m) o1 B7 E3 v) o. Hcanvas.element.prototype.findtargetcorner = function(mp, oimg) {
2 u3 K, \8 A6 u/ S! l% avar xpoints = null;
( [) f, F. c* q. |var corners = ['tl','tr','br','bl'];
* B: ^( C; g3 E* P7 V7 f2 Sfor (var i in oimg.ocoords) {
4 [- f8 B9 {; qxpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
if (xpoints % 2 == 1 && xpoints != 0) {
return i;
}
}
, U8 R% o3 q) v8 j3 G0 Wreturn false;
+ L9 w: b3 ]/ r; j};
1 [# o' H$ Y, E/ F1 V& pcanvas.element.prototype.findmouseposition = function(e) {
var parentnode = (e.srcelement) ? e.srcelement.parentnode : e.target.parentnode;
  q3 {+ V) {: t( s! m' w0 T- Nvar issafari2 = !s.support.ie&&!s.support.firefox;
) q/ n6 v( u5 [' f! j8 n6 D( kvar scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
var safarioffsetleft = (issafari2) ? e.target.ownerdocument.body.offsetleft + scrollleft : 0;
var safarioffsettop = (issafari2) ? e.target.ownerdocument.body.offsettop + scrolltop : 0;
return {
# z% o: e0 l$ r& B0 u& {' x8 [ex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
% Y& i/ o, Y5 Fey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
screenx: e.screenx,
screeny: e.screeny
# ]. z8 ~5 D" {7 W5 l};
# b  }  Q) w$ c9 F3 n6 v$ U5 ]};
canvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
5 l( E% J5 m" B8 l2 cvar outlinewidth = 2;
context.fillstyle = 'rgba(0, 0, 0, .3)';
5 Q+ x! G6 X3 a& i* Y  p+ Ncontext.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
context.fillstyle = '#fff';
context.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
};
canvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
context.fillstyle = rgba(0, 200, 50, 0.5);
context.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
; Q6 `. H: ]0 L/ Q% [context.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
4 }7 _0 K& T$ K8 a# G/ \+ Ucontext.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
};
canvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
' e( x( y5 G7 s% d* G/ fcontext.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
context.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.clearrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
3 v8 q; u/ Y! F  u$ f- ^; Ncontext.clearrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
) K  A- A8 z/ K1 Y8 E9 m* n. Vcontext.restore();
};
) p, p' j1 x% {: Ycanvas.element.prototype.canvasto = function(format) {
$ a- s# Q5 k1 ~this.renderall(true,false);
% e5 c" g3 Z' w1 Q- xvar containercanvas =this._ocontexttop;
7 W: w7 ]/ L# _  D* zfor (var i = 0, l = this._aimages.length; i < l; i += 1) {
7 a$ F* g( N2 n+ x9 g/ D* ], B( \var offsety = this._aimages.height / 2;
+ m" U& U4 [& x) u7 `var offsetx = this._aimages.width / 2;
this.clearcorners(containercanvas, this._aimages, offsetx, offsety);
}
  O+ \3 d% n( I7 ~0 N- g* [* m/ R# Tif (format == 'jpeg' || format == 'png') {
8 Z  b1 R! v  ], Z) p& freturn this._oelement.todataurl('image/'+format);
. B/ @$ T; [3 U0 f$ i, {}
};
canvas.customevent = function(type) {
! T7 b1 E2 K9 q, nthis.type = type;
) N- C; q! l" w) \this.scope = null;
$ D* E" I4 i8 s( H5 K2 i( Fthis.handler = null;
var self = this;
0 r; C; @! L8 y/ D  t2 othis.fire = function(e) {
if(this.handler != null) {
self.handler.call(self.scope, e);
}
' x4 ^1 ~5 o3 K! O( c3 O};
+ W7 [" x9 ^: P' o/ X};
}());
return canvas;
9 |" Q; r3 p2 Y});
canvasimg.js代码如下：
1 X! m$ y% `$ m3 f复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
(function () {
canvas.img = function(el, oconfig) {
this._initelement(el);
this._initconfig(oconfig);
' p8 A; ]1 }/ b. ?& Tthis.setimagecoords();
& o1 d! e$ _( l9 K' e  U% g};
canvas.img.css_canvas = canvas-img;
var default_config = {
top: {
key: top,
/ p0 R% ?9 S0 Y1 B- N. |5 Pvalue: 10
) j  M( d$ T' ?},
& x( {" R! c7 }' ~% ]6 ~0 z) `left: {
key: left,
% t( o8 q. M  r# R3 m9 I1 kvalue: 10
},
angle: {
2 d; R  @6 s- E- ykey: angle,
value: 0
& H$ @8 D7 n/ j3 O6 s/ l},
theta: {
  n$ K9 C" D" ^: a" ckey: theta,
: q: z9 [1 W( j! z0 c$ h# Evalue: 0
! ?! D, f; l# [: r},
2 L/ p0 t. Z* jscale-x: {
key: scalex,
value: 1
4 k; R+ b7 E& Y1 x},
scale-y: {
& S( n" P7 a. d5 N' @+ t7 X* Bkey: scaley,
value: 1
" O" @4 _- p: y% C# L},
cornersize: {
key: cornersize,
value:10
},
borderwidth: {
$ M8 I4 B2 j6 n7 Akey: borderwidth,
9 r: [9 y( ?1 S" q. Vvalue: 10
},
# j  `7 J5 J6 Q. c0 E+ {8 b' Fpolaroidheight: {
key: polaroidheight,
value: 40
},
randomposition: {
key: randomposition,
+ Y8 b: q! \2 g. s$ zvalue: true
7 m( [- b% W+ E3 g, C( t/ G1 k( k}
; y9 P2 {* b9 W, A0 w};
$ u& i: A& ~: G4 U5 Icanvas.img.prototype._oelement = null;
canvas.img.prototype.top = null;
, h/ `3 H! }! u2 X8 ?; tcanvas.img.prototype.left = null;
5 P; d! q8 b3 f' W, ccanvas.img.prototype.maxwidth = null;
( _! W$ ^! Q, q  ncanvas.img.prototype.maxheight = null;
canvas.img.prototype.ocoords = null;
canvas.img.prototype.angle = null;
* ?& N1 [' F+ Ncanvas.img.prototype.theta = null;
2 }1 j( _  G) F2 h+ C( Icanvas.img.prototype.scalex = null;
0 i3 }7 W! e$ L" ~- |. Vcanvas.img.prototype.scaley = null;
canvas.img.prototype.cornersize = null;
canvas.img.prototype.polaroidheight = null;
# ~! V- }; X5 D. ^7 m) p2 p. mcanvas.img.prototype.randomposition = null;
canvas.img.prototype.selected = false;
4 {0 L7 J' C9 B0 Y' N. d; v. {/ l  Zcanvas.img.prototype.bordervisibility = false;
canvas.img.prototype.cornervisibility = false;
canvas.img.prototype._initelement = function(el) {
this._oelement = el;
2 u+ g- S, p2 V2 Z4 p3 I};
% y) L8 b& c# ?canvas.img.prototype._initconfig = function(oconfig) {
var skey;
: S8 R5 G) ~1 Yfor (skey in default_config) {
var defaultkey = default_config[skey].key;
if (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
  {+ s3 u' T7 c# R4 f. pthis[defaultkey] = default_config[skey].value;
# x7 q% D+ b; D0 e* I}
( i3 R8 c3 {! R; x* h! f( R6 \3 relse {
this[defaultkey] = oconfig[defaultkey];
}
}
! }7 N. P# a' u# o9 x% zif (this.bordervisibility) {
this.currentborder = this.borderwidth;
}
else {
- s% U1 @2 f3 f: p# rthis.currentborder = 0;
}
var normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
) ~" }% h5 W* I7 j7 X( @this._oelement.width = normalizedsize.width;
* I( @! V* j' z5 a2 Uthis._oelement.height = normalizedsize.height;
% [. {, n0 {. g; o2 tthis.width = normalizedsize.width + (2 * this.currentborder);
( |5 h! S( b, w0 vthis.height = normalizedsize.height + (2 * this.currentborder);
/ k* {, W5 N1 ^% k$ T6 K" b1 T& U! ?if (this.randomposition) {
this._setrandomproperties(oconfig);
4 O& h1 H" P' z: \  ~: u$ I( U}
this.theta = this.angle * (math.pi/180);
$ ~- a- s+ q4 L) d1 D. s};
" u9 [( {0 M7 q0 E, l' Gcanvas.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);
$ D# A8 J. I" m, w. v0 F$ g6 P# wnormalizedheight = 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;
/ b  X8 D7 D' h& z6 |}
4 v. i0 Y2 k( d$ V/ |9 r# L9 B# zelse if (maxwidth && (maxwidth < oimg.width)){
' [' Y; E6 u7 ]1 M  Jnormalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
6 C. q  A/ d4 onormalizedwidth = maxwidth;
. d! b$ z# ~, r" M}
else {
normalizedwidth = oimg.width;
normalizedheight = oimg.height;
}
return { width: normalizedwidth, height: normalizedheight }
! w* ^0 t. ?5 i1 m' H},
canvas.img.prototype.getoriginalsize = function() {
return { width: this._oelement.width, height: this._oelement.height }
};
canvas.img.prototype._setrandomproperties = function(oconfig) {
1 J; }; E: o3 K  {) d6 wif (oconfig.angle == null) {
  y( r) d1 ?3 `- I% B% I9 r9 fthis.angle = (math.random() * 90);
- A# s8 E. E6 F/ l}
7 |" q  C" e  Z# z) y+ `7 pif (oconfig.top == null) {
this.top = this.height / 2 + math.random() * 450;
) |* l- O& g5 t/ e}
if (oconfig.left == null) {
this.left = this.width / 2 + math.random() * 600;
}
" o9 n7 ]2 C  V};
canvas.img.prototype.setcornersvisibility = function(visible) {
this.cornervisibility = visible;
1 \/ H2 {$ k$ }8 ^/ U0 a};
! b* u) i5 |; s! J6 xcanvas.img.prototype.setimagecoords = function() {
. ~4 D- o0 P3 v" Sthis.left = parseint(this.left);
this.top = parseint(this.top);
) n0 o5 f; ?$ m# P4 K9 fthis.currentwidth = parseint(this.width) * this.scalex;
- n$ I0 e* b' C2 W, N, k: Wthis.currentheight = parseint(this.height) * this.scalex;
8 J# |1 z" [& C5 ~/ A0 G, jthis._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;
" d- T# p2 j, g' ~2 p% fvar theta = this.theta;
. T- P+ U0 r1 I, H: B' |7 mvar sinth = math.sin(theta);
var costh = math.cos(theta);
: l0 G) M. Y/ Q% Hvar tl = {
x: this.left - offsetx,
y: this.top - offsety
) L$ Q( A$ n+ V4 _8 a- f5 e};
- b7 y9 ~/ p% Wvar tr = {
7 A; Y7 T2 {) H! C6 {7 g6 A, gx: tl.x + (this.currentwidth * costh),
& }7 g7 _/ y/ ]& q! E5 Z  gy: tl.y + (this.currentwidth * sinth)
};
var br = {
x: tr.x - (this.currentheight * sinth),
y: tr.y + (this.currentheight * costh)
8 H7 n$ ?4 N- n* u8 |};
9 ^) }' Q4 s6 y5 b! c2 f7 Rvar bl = {
  r# l+ E5 ^( ^! e5 q7 M) |/ b/ Dx: tl.x - (this.currentheight * sinth),
y: tl.y + (this.currentheight * costh)
$ h& O3 {' \2 _3 M& V, H8 ?" {8 [};
this.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
this.setcornercoords();
};
canvas.img.prototype.setcornercoords = function() {
var coords = this.ocoords;
var theta = this.theta;
& ~0 W3 T! z9 h5 l1 ~& Ivar cosoffset = this.cornersize * this.scalex * math.cos(theta);
var sinoffset = this.cornersize * this.scalex * math.sin(theta);
coords.tl.corner = {
9 e" @+ y) P5 I# Q& btl: {
x: coords.tl.x,
. {1 F) }, {+ L# b4 yy: coords.tl.y
) m1 _: L9 V/ i0 m},
tr: {
x: coords.tl.x + cosoffset,
9 M  u$ J8 u% u: q/ S; Jy: coords.tl.y + sinoffset
+ b( T. T0 ]6 F},
bl: {
x: coords.tl.x - sinoffset,
y: coords.tl.y + cosoffset
# p6 H! I0 `9 R. B}
};
) C- D/ H# b$ _: S0 }% n$ Tcoords.tl.corner.br = {
' J# K; x# c5 Y  Ox: coords.tl.corner.tr.x - sinoffset,
0 I+ a& A7 k" v4 ^5 C) k2 \y: coords.tl.corner.tr.y + cosoffset
};
coords.tr.corner = {
tl: {
x: coords.tr.x - cosoffset,
- Y4 ?5 \! |; v! ^" S3 vy: coords.tr.y - sinoffset
},
tr: {
x: coords.tr.x,
9 n5 j. J. ^* qy: coords.tr.y
8 {  j; N4 E# T, L2 p},
br: {
x: coords.tr.x - sinoffset,
$ A5 Z$ R) H8 O6 z  Y- @& ly: coords.tr.y + cosoffset
}
};
coords.tr.corner.bl = {
- w) Y- o9 N( Y: [x: coords.tr.corner.tl.x - sinoffset,
* I; ^. X8 w8 Xy: coords.tr.corner.tl.y + cosoffset
+ U' g$ I9 z$ S/ Z! S4 t8 c};
9 Q. h2 k* V- a( jcoords.bl.corner = {
tl: {
+ @8 y+ W! B+ R$ R0 {- |( ^x: coords.bl.x + sinoffset,
y: coords.bl.y - cosoffset
},
: q& e4 E. Y8 h* R( Fbl: {
x: coords.bl.x,
- F# i& Q; b2 ]- n, D7 z% Sy: coords.bl.y
},
br: {
x: coords.bl.x + cosoffset,
y: coords.bl.y + sinoffset
}
};
coords.bl.corner.tr = {
x: coords.bl.corner.br.x + sinoffset,
y: coords.bl.corner.br.y - cosoffset
};
coords.br.corner = {
tr: {
0 o( k$ t+ w1 T/ q) U$ ^x: coords.br.x + sinoffset,
& R1 F6 y. P8 Py: coords.br.y - cosoffset
},
bl: {
x: coords.br.x - cosoffset,
9 Z0 r  g" ~) b% Cy: coords.br.y - sinoffset
; e) i2 \( m8 T4 j: T3 @6 _" R4 u* Y},
, G# `# X5 s8 ~% |' Bbr: {
x: coords.br.x,
y: coords.br.y
+ G# P, a% E+ V}
};
coords.br.corner.tl = {
x: coords.br.corner.bl.x + sinoffset,
y: coords.br.corner.bl.y - cosoffset
! z9 T/ |/ c% t* b- s0 l};
};
}());
return canvas;
9 V3 Y& ~& ?, Z9 f2 ]# w3 Z& ~4 D});
9 Q4 w( T6 m" [( Q6 |puzzle.html代码如下：
; p; v( i9 K; S1 B复制代码代码如下:<!doctype html>
<html>
<head>
% o/ s  A+ R4 p1 j1 t$ a( N4 m) E<meta http-equiv=content-type content=text/html; charset=utf-8>
! d: ^; I5 W: G0 ~1 @<title>insert title here</title>
<link type=text/css href=html5_puzzle.css rel=stylesheet />
$ D4 e# k* A- n8 N2 F<script type=text/javascript src=../multi_upload/seed.js></script>
! D/ [/ V/ ^( Y0 |<script type=text/javascript src='html5_puzzle.js'></script>
</head>
<body>
, T  F9 N/ K8 ]1 s7 m5 |<div id='html5_puzzle'>
<div id='puzzle_left'>
<div class='puzzle_column'>
& l3 F# X  Y' N+ q<ul>
<li><img src='small_img/1.jpg' data-index='1' /></li>
<li><img src='small_img/2.jpg' data-index='2' /></li>
8 a8 O, A, |$ H<li><img src='small_img/3.jpg' data-index='3' /></li>
0 \+ ?, H9 W5 I8 y1 I<li><img src='small_img/4.jpg' data-index='4' /></li>
<li><img src='small_img/5.jpg' data-index='5' /></li>
</ul>
3 R8 {. I3 |* f  v8 ?' M</div>
<div class='puzzle_column'>
# u& T4 F* s6 X<ul>
4 x8 P2 z' J( N. q. f<li><img src='small_img/6.jpg' data-index='6' /></li>
<li><img src='small_img/7.jpg' data-index='7' /></li>
5 \& |7 O4 C( U+ T3 b' a, p% N$ c<li><img src='small_img/8.jpg' data-index='8' /></li>
<li><img src='small_img/9.jpg' data-index='9' /></li>
<li><img src='small_img/10.jpg' data-index='10' /></li>
' F$ h8 C7 O* o& S  [</ul>
* L( u& ^; {: Z$ n, q</div>
& [% y& H, z8 \' T! W; E. A</div>
" y* r1 c% h7 O<div id='puzzle_right'>
<div id='puzzle_canvas'>
<canvas id=canvid1></canvas>
<div id='canvas_menu'>
<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
href='javascript:void(0)' id='photo_update'>更改图片</a>
9 {2 l" W, e9 Y0 t; N</div>
, X; c' j( M' v) S: ], j</div>
0 B4 D5 ~8 Y0 t: a0 @0 x; X<img id=bg src=big_img/1.jpg width='600' height='450' />
</div>
" V2 u5 b9 I3 [4 D. w' u<div id='puzzle_bottom'>
<a href='javascript:void(0)' id='add_img'><span>添加图片</span><input
type=file multiple= id='fileimage'> </a> <a
7 D0 Q5 V( }' `$ L9 r6 i) `href='javascript:void(0)' id='upload_btn'>上传</a> <a>点击图片可以旋转，拖拽,
- K2 f0 t9 t" O( _' N缩放哦!</a>
' B) r5 H. ~# \0 l</div>
</div>
" x- q- O7 l, m# k<input type=file id='test'>
<canvas id='test_canvas'></canvas>
</body>
</html>
html5_puzzle.css代码如下：
复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
: s+ Y: L9 V2 K% M! G0 a) V8 Tfont-size: 0;
1 `' T6 m4 m8 C4 b+ f! E}</p> <p>canvas {
background-color: transparent;
& E, w8 E$ I: {* L) _) kleft: 0;
position: absolute;
: K6 b; C6 c: J! a0 {top: 0;
}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
display: inline-block;
}</p> <p>.puzzle_column li {
display: block;
margin: 5px;
) n. S' z, X9 @1 q' ]border: 1px solid #ffffff;
}</p> <p>.puzzle_column li:hover {
border: 1px solid #3b5998;
cursor: pointer;
0 Y6 l5 V% M8 _# _1 i4 V+ [}</p> <p>.puzzle_column {
font-size: 0;
}</p> <p>#puzzle_left,#puzzle_right {
border: 1px solid #3b5998;
! E8 _4 S, k4 t& K% `}</p> <p>#puzzle_right,#puzzle_bottom a {
* y0 J. z3 J( }font-size: 14px;
margin: 10px 0 0 10px;
8 V4 z3 o! a! d% y! ?: |7 V, ?7 v0 i0 j}</p> <p>#puzzle_bottom {
margin: 5px 0;
$ a5 P5 C. e/ A; N# W5 n7 u' E}</p> <p>#puzzle_canvas img {
4 U6 e7 a1 Q7 C. w3 d}</p> <p>#puzzle_canvas {
3 I: I# B# D  N& v. u7 goverflow: hidden;
/ ^5 G5 S5 W4 F3 V+ v' R2 z1 swidth: 600px;
height: 450px;
" Q; r8 ^0 a. dposition: relative;
}</p> <p>#add_img input {
, `5 z2 T) L8 sposition: absolute;
( R, {3 x. Q8 E* O/ v+ j) L" G* Hfont-size: 100px;
right: 0;
( n! K% ^5 e8 G! a( z/ R5 {* l" z- @top: 0;
opacity: 0;
}</p> <p>#add_img {
$ W& n6 w' M3 c! }1 N( c+ E1 l3 i, w* b8 Sposition: relative;
* r2 V; e5 q: w: A6 o& |display: inline-block;
( U9 h: H3 b& r6 P6 q- Ibackground: #3b5998;
' D) C/ c: e6 U8 z$ N! r& T3 \border-radius: 4px;
; H2 N# k8 q0 V( G) j' cpadding: 4px 12px;
% ~$ H4 u, O1 \overflow: hidden;
color: #ffffff;
}</p> <p>#bg,#show_list {
; L# F9 M/ k0 L/ Y. ?5 Y  e9 }: }display: none;
}</p> <p>#canvas_menu {
border: 1px solid red;
position: absolute;
5 f0 t# [" \- [5 p+ e4 Jz-index: 5;
top: 0;
, B; N  C+ `1 W* ^! X! \left: 0;
' E) k9 c! u8 \2 }; bdisplay: none;
) F! K' J0 r$ k( D}</p> <p>#canvas_menu a {
, k0 v1 X, J+ c5 Ydisplay: inline-block;
/ d: s1 I* y0 _0 E: V$ H3 N}</p> <p>#test_canvas {
/ w5 z7 F4 I( ]; G/ [8 f% e6 Btop: 700px;
}
6 C2 B1 X, [: J% B0 N8 a5 E" shtml5_puzzle.js代码如下：
. H, z# R% o) [) j1 g复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
s, canvasimg, canvaselement) {
9 p! H4 T  y( `var img=[];
var canvas = new canvaselement.element();
' T$ ]% g# v3 O' _( f  Z2 ?canvas.init('canvid1', {
width : 600,
height : 450
& d6 o+ {/ R% s5 @3 s});
6 `+ u' e/ x) @s('.puzzle_column img').on('click',function(e){
- X1 X! i. _5 [9 o& Bvar index=this.getattribute('data-index');
" |8 M+ f1 L, j. w+ I$('bg').onload = function() {
var ctx=$('canvid1-canvas-background').getcontext('2d');
ctx.clearrect(0, 0,600,450);
img[0]=new canvasimg.img($('bg'), {});
canvas.setcanvasbackground(img[0]);
};
$('bg').setattribute('src','medium_img/'+index+'.jpg');
! D4 C( Q' c  b  v" a1 \5 Qe.stoppropagation();
});
var canvasdemo = function() {
, L" B9 U" B4 Treturn {
7 D+ g& }& ?+ Ninit : function() {
. i( H0 V9 \7 {: hvar img_list=dom.query('#puzzle_canvas img');
; Y; J7 s9 @  simg[0]=new canvasimg.img($('bg'), {});
: G3 Z) a( ~" n7 p) ps.each(img_list,function(i,el){
el.setattribute('data-index',i);
img.push(new canvasimg.img(el, {}));
$ u! w2 U  w, z, S4 qcanvas.addimage(img[i+1]);
});
- d! L& T4 p) L1 U8 B# u$ p9 Rcanvas.setcanvasbackground(img[0]);
this.cornersvisible = (this.cornersvisible) ? false : true;
this.modifyimages(function(image) {
  R3 n* c% ]& K) ?: Mimage.setcornersvisibility(this.cornersvisible);
, q) C" ]8 u5 `% f- ]});
9 z. a( y( ]  f6 f! e& @9 n& y},
modifyimages : function(fn) {
for ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
5 m  u/ H9 y2 P; s2 J8 ~9 Mfn.call(this, canvas._aimages);
* t6 B1 z; @& B* J3 |' b+ Q}
; T4 V* u' L! ^( j/ W6 D& wcanvas.renderall(false,false);
s('#puzzle_canvas img').remove();
img = [];
$ a2 G  k6 x+ m7 C}
};
}();
2 l9 p$ R% t; [! b0 Z, y6 a4 J( N, W! afunction getcurimg(){
( ~2 t, c' ^! zvar oimg=canvas._prevtransform.target;
for(var i=0;i<canvas._aimages.length;i++){
$ p8 V: {3 J) {% N) |4 [$ m, Yif(canvas._aimages._oelement.src==oimg._oelement.src){
return i;
}
}
$ x( A$ O0 c3 h6 B! X' Q) k}
s('#photo_delete').on('click',function(e){
var i=getcurimg();
! Y) t5 T/ }. ?' ^4 {+ Gcanvas._aimages.splice(i,1);
canvas.renderall(true,true);
% R" Q) }7 g% V2 E" z/ F$('canvas_menu').style.display=none;
});
- w, Z) v1 R) Es('#photo_update').on('click',function(e){
1 f& C9 b* K# z/ O: ?$('test').click();
/ b3 ?$ A  t8 g, O" t) |$ p+ T! F});
s('#test').on('change',function(e){
# p# W6 S& p, `3 dvar 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();
3 ]( O& ~2 ~$ d) J4 A# b9 Q5 q4 vimg.onload = function(e) {
8 \" w% h2 ^( ?0 y$ D/ w5 Rif(img.width>200||img.height>200){
. `/ x8 s7 g( k6 fvar prop=math.min(200/img.width,200/img.height);
img.width=img.width*prop;
img.height=img.height*prop;
, U; j" |& ~" R! K7 ~}
3 m7 [% z% b+ p0 w* Q% Jcanvas1.width=img.width;
canvas1.height=img.height;
ctx.drawimage(img, 0, 0, img.width, img.height);
s('#canvid1').html(s('#canvid1').html()+<img src='+canvas1.todataurl(image/jpeg)+'/>);
var t = window.settimeout(function() {
var i=getcurimg(),target=canvas._prevtransform.target;
console.log(target);
canvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
top:target.top,
left:target.left,
5 X# `* d; X" A' h5 ^$ o4 `  Y( Bscalex:target.scalex,
scaley:target.scaley,
angle:canvas.curangle
4 }: \( s/ Q1 l/ o8 y});
canvas.rendertop();
0 z& P9 Y3 @; D) L/ L/ acleartimeout(t);
s('#canvid1 img').remove();
},1000);
2 u1 T3 k7 {8 h, D1 Q};
img.src = dataurl;
};
})();
reader.readasdataurl(files[0]);
});
' B$ `6 K( J$ G  W$ N) G2 V2 es('#upload_btn').on('click',function(){
7 i+ H9 s% p! Uvar imgdata = canvas.canvasto('jpeg');
1 Z+ q% Q" F: @0 `" j3 c& L9 t, Yvar imgvalue = imgdata.substr(22);
s.ajax({
; L6 Y1 g- I: S  v: F+ ~" `9 Durl : 'http://localhost/html5/upload1.php',
type : 'post',
2 f8 |. i1 s- Edata : {
imgdata : imgvalue,
file_name :'mix_img.jpeg'
2 w( k4 L3 p' i8 k},
! G. a7 N' Y  V5 c( O% a4 Ydatatype : 'text',
# i4 \9 ~, ?+ l* H8 Isuccess : function(data) {
" x% s% d6 i! z" ?alert(s);
}
7 K$ L  y- Q% R! O4 g9 n7 {  [9 K});
  y! V2 M1 }0 }2 x});
});
至于用html5 input读取图片，这很简单就不贴出来了。

1 c* F; E- Q( u  I, B  s更多网页制作信息请查看： 网页制作

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

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

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

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

疯了.........

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

一骂人就激动....

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