html5版canvas自由拼图实例

本文实例讲述了html5版canvas自由拼图的实现方法。分享给大家供大家参考。具体方法如下：
代码运行效果如下图所示：
& ^+ r9 ~4 Z/ T& U& K& g7 @

                               
登录/注册后可看大图

canvaselement.js代码如下：
3 I# \; o- A! s复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
(function () {
canvas.element = function() {};
9 b3 X) k6 F' c2 |' a1 e& xcanvas.element.prototype.fillbackground = true;
canvas.element.prototype.showcorners = false;
canvas.element.prototype.photoborder = true;
canvas.element.prototype.polaroid = false;
- j# R4 }$ {$ w! r  b3 rcanvas.element.prototype._backgroundimg = null;
canvas.element.prototype._groupselector = null;
canvas.element.prototype._aimages = null;
! F/ `3 b& Y8 j7 E) x3 Xcanvas.element.prototype._ocontext = null;
$ P: S) K* K4 ]$ }& R% p% Z" Xcanvas.element.prototype._oelement = null;
canvas.element.prototype._oconfig = null;
canvas.element.prototype._currenttransform = null;
canvas.element.prototype._prevtransform = null;
1 @! p+ O4 a* y6 O9 ocanvas.element.prototype.curangle = null;
canvas.element.prototype.init = function(el, oconfig) {
if (el == '') {
/ G/ L' R1 g5 k3 }2 V6 d2 Creturn;
}
this._initelement(el);
' r7 k, ^+ Y' v  p: ]( othis._initconfig(oconfig);
( y$ B# o1 y% w: @+ d% F7 Nthis._createcanvasbackground();
this._createcontainer();
- x" E2 ]+ i/ V% ethis._initevents();
: Q1 k& B* y, uthis._initcustomevents();
};
canvas.element.prototype._initelement = function(el) {
this._oelement = document.getelementbyid(el);
$ @( V1 S  a1 X4 p. r% q2 B$ [this._ocontexttop = this._oelement.getcontext('2d');
5 O. N% e  ?' _$ ~- a' d. g* G};
canvas.element.prototype._initcustomevents = function() {
this.onrotatestart = new canvas.customevent('onrotatestart');
this.onrotatemove = new canvas.customevent('onrotatemove');
6 h: ~; O* i: q  O+ qthis.onrotatecomplete = new canvas.customevent('onrotatecomplete');
3 N/ d! k) ^( i, \0 G9 N0 e# K6 Xthis.ondragstart = new canvas.customevent('ondragstart');
this.ondragmove = new canvas.customevent('ondragmove');
this.ondragcomplete = new canvas.customevent('ondragcomplete');
- f7 }7 e2 C6 J/ h& L};
canvas.element.prototype._initconfig = function(oconfig) {
) `7 D" V1 B; T4 J* wthis._oconfig = oconfig;
7 \7 Y" a( P# b9 }) i1 A' Nthis._oelement.width = this._oconfig.width;
) M1 S9 l* m+ z1 u3 nthis._oelement.height = this._oconfig.height;
$ n9 y4 \: o$ ]8 k" }- tthis._oelement.style.width = this._oconfig.width + 'px';
this._oelement.style.height = this._oconfig.height + 'px';
& U" J8 ]* r% W' ?8 j};
canvas.element.prototype._initevents = function() {
var _this=this;
s(this._oelement).on('mousedown',function(e){
_this.onmousedown(e);
});
9 Q. q, a' d. W6 s, \+ ns(this._oelement).on( 'mouseup', function(e){
3 F% j' k0 m! f4 r_this.onmouseup(e);
});
s(this._oelement).on('mousemove', function(e){
  t( l* ^3 ?& E* G2 j8 ?" ~1 u_this.onmousemove(e);
});
5 }( G0 E" g) z7 r7 L. e};
5 l7 ?0 s3 N3 m1 x. Q9 z% Hcanvas.element.prototype._createcontainer = function() {
* A2 e$ K+ U$ A3 w) _" k4 Ovar canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-container';
var ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
) S; t4 P0 ~( K6 g# N  Focontainer.width = this._oconfig.width;
ocontainer.height = this._oconfig.height;
4 w4 S8 F* C. ^' }0 |ocontainer.style.width = this._oconfig.width + 'px';
ocontainer.style.height = this._oconfig.height + 'px';
+ k' ?' P) T; Y, ~this._ocontextcontainer = ocontainer.getcontext('2d');
};
canvas.element.prototype._createcanvasbackground = function() {
% U" J) _, I5 }$ t2 Q* K% f' Qvar canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-background';
; W: A: v( @9 ]/ ?2 Yvar obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
obackground.width = this._oconfig.width;
9 L( e5 C0 L; |obackground.height = this._oconfig.height;
obackground.style.width = this._oconfig.width + 'px';
: Y) u( o( y/ Q, }obackground.style.height = this._oconfig.height + 'px';
this._ocontextbackground = obackground.getcontext('2d');
};
# H9 N% O# f' l# E) ncanvas.element.prototype.setcanvasbackground = function(oimg) {
this._backgroundimg = oimg;
var originalimgsize = oimg.getoriginalsize();
this._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
};
canvas.element.prototype.onmouseup = function(e) {
if (this._aimages == null) {
# Q/ A7 |/ E4 c5 T7 u4 G" qreturn;
}
if (this._currenttransform) {
this._currenttransform.target.setimagecoords();
, {( o% i( }; k; o: P}
- Y" \8 ]' H6 X! oif (this._currenttransform != null && this._currenttransform.action == rotate) {
. W4 O! T6 ]- j" e+ a& tthis.onrotatecomplete.fire(e);
} else if (this._currenttransform != null && this._currenttransform.action == drag) {
+ G5 y3 H! T* A5 b1 e/ _this.ondragcomplete.fire(e);
}
& f; ^: N$ R: @% R+ X, H5 ]this._currenttransform = null;
this._groupselector = null;
! z/ P/ B/ g' m- Z: @' [5 ?4 H: Pthis.rendertop();
% O$ {" ]3 g2 n; j/ \1 g, H* M};
. F3 {- ^2 l& n  n2 [canvas.element.prototype.onmousedown = function(e) {
* S8 K9 A+ ?( X, _) zvar mp = this.findmouseposition(e);
if (this._currenttransform != null || this._aimages == null) {
8 I+ ]& P3 n2 U8 M6 x( Dreturn;
# @6 t( U" w! [5 V9 s/ F}
var oimg = this.findtargetimage(mp, false);
& J& F! [! ], X% f- ]& cif (!oimg) {
this._groupselector = { ex: mp.ex, ey: mp.ey,
top: 0, left: 0 };
}
) i% N, d' p* ]! C: u) _, welse {
var action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
if (action == rotate) {
- i, M! @5 j3 S+ M* O) sthis.onrotatemove.fire(e);
4 i. D9 r$ L* T3 T& ?} else if (action == drag) {
this.ondragmove.fire(e);
}
this._prevtransform=this._currenttransform = {
target: oimg,
/ F9 a- R) Y8 M9 s2 q; maction: action,
' a# s4 o* R0 G. q/ U9 D' Mscalex: oimg.scalex,
# O+ [- \8 J* U5 u/ T6 K* p6 N. Zoffsetx: mp.ex - oimg.left,
offsety: mp.ey - oimg.top,
, M4 E2 u4 S. T8 l' eex: mp.ex, ey: mp.ey,
left: oimg.left, top: oimg.top,
8 C6 i' r- ?' T5 W/ {; A6 E: s9 ntheta: oimg.theta
};
- v9 T4 B0 R" ]4 h: o/ v$('canvas_menu').style.transform='rotate('+oimg.theta*180/3.14+'deg)';
$('canvas_menu').style.left=oimg.left+px;
$('canvas_menu').style.top=oimg.top+px;
/ E2 \# A& [) w- H% j/ ^; R7 p3 Z$('canvas_menu').style.display=block;
this.renderall(false,false);
}
* ]: ~* N% Y3 v/ y2 Z- a};
canvas.element.prototype.onmousemove = function(e) {
var mp = this.findmouseposition(e);
  f% j5 `) ^/ X% c4 Dif (this._aimages == null) {
return;
% r! X. A7 _" t}
if (this._groupselector != null) {
this._groupselector.left = mp.ex - this._groupselector.ex;
this._groupselector.top = mp.ey - this._groupselector.ey;
this.rendertop();
1 M; n) R8 {: w3 `5 R+ R/ K}
% N* |$ `7 I" V/ Q4 D. e" Z1 Delse if (this._currenttransform == null) {
var targetimg = this.findtargetimage(mp, true);
this.setcursor(mp, targetimg);
* @! q: _0 H  ^/ ]0 |: o}
$ q0 `9 v/ D. d2 z3 j1 C3 Q3 Belse {
# n$ ?  b! V# Xif (this._currenttransform.action == 'rotate') {
this.rotateimage(mp);
7 T! l9 c9 Z( xthis.scaleimage(mp);
4 F7 z0 c, t& e% m1 tthis.onrotatemove.fire(e);
0 P5 |; S) G9 t) h: y! Z}
else {
& Z1 B' |) |( K* i) M' K( T. B5 Pthis.translateimage(mp);
4 D8 f! R2 X6 r: k9 I. Z! fthis.ondragmove.fire(e);
}
this.rendertop();
: f! f8 ]+ @/ U8 x}
};
canvas.element.prototype.translateimage = function(mp) {
5 ?, ^# \8 ?5 y+ u# Nthis._currenttransform.target.left = mp.ex - this._currenttransform.offsetx;
this._currenttransform.target.top = mp.ey - this._currenttransform.offsety;
$('canvas_menu').style.left=this._currenttransform.target.left+px;
9 p" f0 Y% M% T. B$('canvas_menu').style.top=this._currenttransform.target.top +px;
% w7 C: \" x% i};
  E$ I' \. n0 h9 Bcanvas.element.prototype.scaleimage = function(mp) {
var lastlen =
& x4 w( x* d% `* ]/ B7 \3 qmath.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
8 q+ I3 d- X$ Qmath.pow(this._currenttransform.ex - this._currenttransform.left, 2));
var curlen =
8 V+ o: q; N$ s9 rmath.sqrt(math.pow(mp.ey - this._currenttransform.top, 2) +
/ L- m$ o% M5 c1 |math.pow(mp.ex - this._currenttransform.left, 2));
: ?1 s6 I2 L" b% V2 Mvar curscalex= this._currenttransform.scalex * (curlen / lastlen);
var curscaley=this._currenttransform.target.scalex;
if(curscalex>0.7&&curscaley>0.7){
( |6 l  P( S( K9 Ethis._currenttransform.target.scalex =curscalex;
9 `+ F. j, i& Q: Y) Pthis._currenttransform.target.scaley = curscaley;
}
; y1 ]0 W4 |: U8 ]5 v};
canvas.element.prototype.rotateimage = function(mp) {
% X& {, M. _& c" xvar lastangle = math.atan2(
this._currenttransform.ey - this._currenttransform.top,
) L  y' I& t5 u6 k4 n: h% Lthis._currenttransform.ex - this._currenttransform.left
);
var curangle = math.atan2(
. [5 z5 J+ H& H/ kmp.ey - this._currenttransform.top,
mp.ex - this._currenttransform.left
; |" V; t7 ]8 A2 e. @9 I);
this._currenttransform.target.theta = (curangle - lastangle) + this._currenttransform.theta;
this.curangle=this._currenttransform.target.theta*180/3.14;
! g; S5 J- u7 H' {% E9 n$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
) c! S6 m! Y) L};
+ |6 A3 Y8 f/ M1 C; ?3 i/ ]* Zcanvas.element.prototype.setcursor = function(mp, targetimg) {
8 X  h' B3 c3 v, `- P5 Cif (!targetimg) {
this._oelement.style.cursor = 'default';
}
( G/ j- i' |! ielse {
6 h8 Y8 ?3 d' `- _var corner = this.findtargetcorner(mp, targetimg);
if (!corner)
: Q1 n7 e' h6 |3 w0 |{
this._oelement.style.cursor = 'default';
}
else
0 I# h  x5 z1 \+ [- ]. H{
5 v+ @# q% l2 ?  l3 x) Hif(corner == 'tr') {
3 O9 q" Z: W8 dthis._oelement.style.cursor = 'ne-resize';
}
  B$ w0 Y$ L) j$ z. \& j1 }. `2 {else if(corner == 'br') {
% U% h5 V0 v, l4 U' i  `9 fthis._oelement.style.cursor = 'se-resize';
+ x( R4 z) V% u4 O' S}
- e$ n0 C5 @/ B) Kelse if(corner == 'bl') {
this._oelement.style.cursor = 'sw-resize';
}
else if(corner == 'tl') {
this._oelement.style.cursor = 'nw-resize';
* C* m* R& S) w6 K}
- Z: K7 U, N! k% melse {
$ v4 ?) P$ e$ Q; J6 F- L8 X3 d- Q2 Cthis._oelement.style.cursor = 'default';
! R: j% I  l7 z}
}
}
' \3 W" _/ B2 b+ r- s8 J! S};
( J* E' W: n. R# M# g+ K8 Rcanvas.element.prototype.addimage = function(oimg) {
, M" d/ Z" g* cif(s.isemptyobject(this._aimages)) {
this._aimages = [];
. ]- w0 C# A1 }- o" b}
5 ^- |7 S5 \! p" H- j6 kthis._aimages.push(oimg);
this.renderall(false,true);</p> <p> };
canvas.element.prototype.renderall = function(allontop,allowcorners) {
7 D  n2 N  W4 V1 T7 Gvar containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
$ _% U  ]- @: Gthis._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
containercanvas.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
5 c( z$ ?/ `0 k5 X' Cif (allontop) {
var originalimgsize = this._backgroundimg.getoriginalsize();
. s( I! O& l& S- ^; j7 Rthis._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
- J% r7 k5 Y  b* ^, K9 j( @1 [}
for (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
this.drawimageelement(containercanvas, this._aimages,allowcorners);
/ G! A- H6 F( ~; P; p% t, B}
this.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
3 r% O9 J, D5 P3 }% Z* c! c: K6 e3 p};
canvas.element.prototype.rendertop = function() {
this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
, F- A. M0 t) ?; n* bthis.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],true);
& C* ?8 X9 F' J- y. ~/ Aif (this._groupselector != null) {
this._ocontexttop.fillstyle = rgba(0, 0, 200, 0.5);
9 V* N% n! \( l2 ^/ T0 C  J- pthis._ocontexttop.fillrect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
! H9 u8 X2 h8 m% Z$ y/ L( `3 p; U0 : - this._groupselector.left),
6 t, G( ]! U( W: L3 E8 Zthis._groupselector.ey - ((this._groupselector.top > 0) ?
: e3 T& S$ c4 C0 : - this._groupselector.top),
% W+ }! P& m& n; u1 n; T8 L$ ]2 Imath.abs(this._groupselector.left),
& k1 a+ v6 x' \& jmath.abs(this._groupselector.top)
);
this._ocontexttop.strokerect(
1 v# a# ^( X8 x- Ethis._groupselector.ex - ((this._groupselector.left > 0) ?
3 f6 L0 B. s5 l: F" w8 o$ f5 K" L0 : 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)
);
}
0 V! d/ r2 k( X9 H4 E+ ~};
6 r9 D; ~4 {8 R. k3 m& ?6 b" Bcanvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
oimg.cornervisibility=allowcorners;
var offsety = oimg.height / 2;
% F6 g' ^" {8 M( e% q. O2 z/ S/ z& ~var offsetx = oimg.width / 2;
. Q+ Q  ~) }8 x: D! ~5 t2 f1 ccontext.save();
( G+ F" f: T7 i3 hcontext.translate(oimg.left, oimg.top);
' Q& j  U, W3 e) Xcontext.rotate(oimg.theta);
context.scale(oimg.scalex, oimg.scaley);
this.drawborder(context, oimg, offsetx, offsety);
/ G) e8 B  r$ G. I: G1 n4 Pvar originalimgsize = oimg.getoriginalsize();
var polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
6 a! b6 n" `$ a- z% G1 @$ x: o& \1 Tcontext.drawimage(
oimg._oelement,
5 k  i, y1 ^. {; H- originalimgsize.width/2,
((- originalimgsize.height)/2 - polaroidheight),
+ Q0 T! G# N/ w0 g, E4 z3 loriginalimgsize.width,
originalimgsize.height
5 T3 \& ]) w9 V: X# T5 c# q);
if (oimg.cornervisibility) {
this.drawcorners(context, oimg, offsetx, offsety);
; `: y6 P& z; p" M, }; Z$ Q}
% a  U1 s4 l2 Z# B2 Q; kcontext.restore();
5 p3 a+ M! ^$ n8 O1 {};
! t3 N) b- D3 @canvas.element.prototype._getimagelines = function(ocoords) {
9 s1 ~" ?' t+ O. e3 hreturn {
topline: {
) ]( D2 m& v$ A: x" S' Eo: ocoords.tl,
8 w! O! a5 _, L1 pd: ocoords.tr
( F; Z; _0 X! a5 P},
3 s8 w5 B, v) ~) }rightline: {
: D; a$ L$ U2 @o: ocoords.tr,
( I4 F' Q" R  t+ ^5 U9 E* Pd: ocoords.br
},
bottomline: {
9 m# ?1 B* |+ r/ o! o3 uo: ocoords.br,
d: ocoords.bl
3 ^, {9 S5 O( q8 V0 q},
leftline: {
- f8 R4 x/ e" D; |o: ocoords.bl,
d: ocoords.tl
4 b) v' Z4 J7 H4 T4 o}
$ _' I: O3 k3 G+ M};
4 ?& Y9 L" _( u% x$ `; ]};
canvas.element.prototype.findtargetimage = function(mp, hovering) {
. b* g5 }% W2 v0 v0 |for (var i = this._aimages.length-1; i >= 0; i -= 1) {
var ilines = this._getimagelines(this._aimages.ocoords);
var xpoints = this._findcrosspoints(mp, ilines);
4 G5 b: x/ ?' c8 N2 C- Q; t- I5 X0 r" \if (xpoints % 2 == 1 && xpoints != 0) {
/ Q+ ~/ E$ Y( h% l+ E& L& |) Dvar target = this._aimages;
if (!hovering) {
this._aimages.splice(i, 1);
this._aimages.push(target);
2 v% C0 ^* f; I- Z8 g}
return target;
( _0 y" H7 \: R4 L3 ]3 D}
' ~; {% D- I) m" t9 F7 T( B}
return false;
$ y- a6 X; \( C. t, o};
4 h! c4 l3 O8 d$ a$ h  x5 E( dcanvas.element.prototype._findcrosspoints = function(mp, ocoords) {
var b1, b2, a1, a2, xi, yi;
2 z0 \9 o( y  Tvar xcount = 0;
( Z" Q9 Q) O; evar iline = null;
% T3 L4 z& E, x9 t4 |6 }9 {; i) Ffor (linekey in ocoords) {
5 f' e/ M9 I# j* Diline = ocoords[linekey];
if ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
% W) N$ ~$ x  [! l; R) `& g- Vcontinue;
. Y( s7 k2 W* f' E" O9 Y2 @}
if ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
- l+ v* H$ [. V5 t% A; Icontinue;
! O% T) X2 M4 G, ]5 Q9 s5 \8 w}
' k# j  W9 V# l& |6 `6 Aif ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
+ F  b& [' l  \* vxi = iline.o.x;
yi = mp.ey;
8 G. q# `4 z9 T4 P8 E; Y4 E}
else {
b1 = 0;
! K) [: H9 P5 l% V6 ^2 o4 r8 _b2 = (iline.d.y-iline.o.y)/(iline.d.x-iline.o.x);
a1 = mp.ey-b1*mp.ex;
a2 = iline.o.y-b2*iline.o.x;
xi = - (a1-a2)/(b1-b2);
. G: Z; a2 `7 \, J, Y* ^! myi = a1+b1*xi;
/ b3 {! G0 M& j  h2 `}
if (xi >= mp.ex) {
xcount += 1;
3 S  u1 S+ i, ~, L5 }& H$ J& b}
if (xcount == 2) {
6 H; X3 |7 d% W' p+ d- B( M$ b. @4 bbreak;
% M3 e8 W9 ?7 G+ g4 m}
. X$ q: o5 i* C0 X" A! t}
* @* Y' o3 h- R# B; _% q$ x/ [* |# zreturn xcount;
2 h7 ^9 M* g2 Z4 L};
5 L1 R5 I& s3 ?1 vcanvas.element.prototype.findtargetcorner = function(mp, oimg) {
7 y/ }: X0 b0 X: s% s7 {var xpoints = null;
var corners = ['tl','tr','br','bl'];
for (var i in oimg.ocoords) {
xpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
if (xpoints % 2 == 1 && xpoints != 0) {
. E2 F# q4 w( ?. V5 Wreturn i;
}
}
6 X, U" R) J' V6 m) y7 areturn 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;
var scrollleft = document.documentelement.scrollleft || document.body.scrollleft;
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
: e, ^$ y1 U9 P" X5 h, Xvar safarioffsetleft = (issafari2) ? e.target.ownerdocument.body.offsetleft + scrollleft : 0;
var safarioffsettop = (issafari2) ? e.target.ownerdocument.body.offsettop + scrolltop : 0;
: X) h- ?9 R0 K; Preturn {
2 {8 u" m# }; u( k+ Zex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
ey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
screenx: e.screenx,
) e! m, E% [  q7 P. {. n# `7 Z/ pscreeny: e.screeny
. J5 L* ]9 E  m! E};
};
canvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
  H/ H6 B' G" O) H4 e" Kvar outlinewidth = 2;
context.fillstyle = 'rgba(0, 0, 0, .3)';
context.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
* u- j, R  q+ o. k8 E. F( Y1 jcontext.fillstyle = '#fff';
4 W, V" H' C  [1 M! ~context.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
9 L+ ]1 B" L7 J! e};
; u$ q0 d2 q6 A$ [canvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
context.fillstyle = rgba(0, 200, 50, 0.5);
0 L" ^) E, c$ v( o/ Wcontext.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
) r9 M& N+ w, g+ g0 E( j1 rcontext.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
" f& t7 q1 V9 V: T# dcontext.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
2 b4 ^# i4 g4 ]( H# g};
canvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
context.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
* k2 N& ~8 I" j8 X( ^, k3 Rcontext.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
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);
$ c$ q; a. O) O! r3 z1 Jcontext.restore();
};
canvas.element.prototype.canvasto = function(format) {
this.renderall(true,false);
. ]$ K, v6 l& T5 Y  ^5 N8 Zvar containercanvas =this._ocontexttop;
. x* u8 ~9 c! F/ D! Mfor (var i = 0, l = this._aimages.length; i < l; i += 1) {
var offsety = this._aimages.height / 2;
5 e5 c( W+ @; T! }var offsetx = this._aimages.width / 2;
0 @+ o3 d/ u. Y. [7 \this.clearcorners(containercanvas, this._aimages, offsetx, offsety);
}
if (format == 'jpeg' || format == 'png') {
return this._oelement.todataurl('image/'+format);
8 F" H# y1 f5 S1 m* d) u1 S) S}
2 T4 [% M5 u' U1 A2 _! I; L3 s};
canvas.customevent = function(type) {
( c+ l4 k; g# T0 o5 h- k2 f: X5 Pthis.type = type;
this.scope = null;
this.handler = null;
. Z4 o& |9 m& F& W- Jvar self = this;
this.fire = function(e) {
if(this.handler != null) {
4 T" A& [8 p5 ]8 nself.handler.call(self.scope, e);
}
};
};
}());
return canvas;
  Y; d5 m8 p+ K0 W/ h( P* G0 P3 V7 Y8 Q});
* h1 y, U4 P1 r! p9 mcanvasimg.js代码如下：
复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
& V' [2 l9 G/ L! Z  k- Y9 Qvar canvas = window.canvas || {};
(function () {
0 b0 }% j1 y# I$ y% t9 N0 icanvas.img = function(el, oconfig) {
  N. A' ~) l6 }" ^* z% k4 Kthis._initelement(el);
! p5 G9 D1 v+ s. Q) S  l5 o9 x# Dthis._initconfig(oconfig);
this.setimagecoords();
};
canvas.img.css_canvas = canvas-img;
3 B8 D$ h/ [) }9 M( Jvar default_config = {
top: {
key: top,
8 L5 ]7 Z$ {: {' n, @value: 10
9 B& k/ [. F- b. v, b},
left: {
! l. o( X6 k  P) u+ Fkey: left,
( k0 G, G) n$ k- ]1 mvalue: 10
},
" }! X2 Y. [; R* Tangle: {
* z% K$ M& D& I+ @; Okey: angle,
value: 0
},
theta: {
key: theta,
value: 0
/ s' z* O& p& P9 z2 i' q- t' v* b  }},
scale-x: {
) [/ z& D- Q; ^  b  hkey: scalex,
9 X. G( w# C! l5 z9 A% ]" Nvalue: 1
},
scale-y: {
key: scaley,
value: 1
},
cornersize: {
; K' i8 z; {) @key: cornersize,
value:10
},
borderwidth: {
7 v( N/ i, `  J; k5 dkey: borderwidth,
value: 10
3 l& A5 ], [" a+ L},
polaroidheight: {
key: polaroidheight,
value: 40
},
randomposition: {
* j3 ?% s5 \$ f2 ?7 fkey: randomposition,
( t/ E0 l; N$ y5 K: E& u6 Ovalue: true
}
( v8 X7 y% Y" h% h/ K# w};
0 e( }' `* {+ _  E0 W2 Qcanvas.img.prototype._oelement = null;
* C. ~+ ~) n: v3 g9 Q* S- \( v3 vcanvas.img.prototype.top = null;
canvas.img.prototype.left = null;
canvas.img.prototype.maxwidth = null;
canvas.img.prototype.maxheight = null;
- y% S' N$ C) S$ F. e5 T! ocanvas.img.prototype.ocoords = null;
canvas.img.prototype.angle = null;
# O, m3 Y* L* O* ?8 q; p7 e1 kcanvas.img.prototype.theta = null;
canvas.img.prototype.scalex = null;
& w( ]) T- D9 Qcanvas.img.prototype.scaley = null;
canvas.img.prototype.cornersize = null;
canvas.img.prototype.polaroidheight = null;
canvas.img.prototype.randomposition = null;
. V, i$ j2 H. t/ \+ s. t1 Gcanvas.img.prototype.selected = false;
, ?, `' F/ T& _4 Vcanvas.img.prototype.bordervisibility = false;
4 Z& `/ v" j1 ~! t) q' Wcanvas.img.prototype.cornervisibility = false;
$ `, J& }) i& K" ]9 h4 R  A1 ^canvas.img.prototype._initelement = function(el) {
this._oelement = el;
/ o. r  ?" d& |& S};
0 u+ d) A& u! K- s4 u, ?( k% ^canvas.img.prototype._initconfig = function(oconfig) {
var skey;
7 y9 s6 ?7 b: @% Ffor (skey in default_config) {
var defaultkey = default_config[skey].key;
/ P  [) n- P: G6 |if (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
; q, H; u* {# }' S0 l& \$ j* `" ~this[defaultkey] = default_config[skey].value;
}
else {
this[defaultkey] = oconfig[defaultkey];
}
3 [# ]" W- N: I' L}
if (this.bordervisibility) {
* c" }& _' r$ |this.currentborder = this.borderwidth;
}
else {
this.currentborder = 0;
}
var normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
8 j* z' x! q4 H: p1 K# H$ f; @9 qthis._oelement.width = normalizedsize.width;
this._oelement.height = normalizedsize.height;
this.width = normalizedsize.width + (2 * this.currentborder);
this.height = normalizedsize.height + (2 * this.currentborder);
4 M4 X6 X, a, w) V1 [/ oif (this.randomposition) {
* {9 N$ P- s; @3 H, nthis._setrandomproperties(oconfig);
}
7 r1 `- u. h/ z* y* Ethis.theta = this.angle * (math.pi/180);
3 t' ?# B* J3 t8 W: C};
canvas.img.prototype.getnormalizedsize = function(oimg, maxwidth, maxheight) {
if (maxheight && maxwidth && (oimg.width > oimg.height && (oimg.width / oimg.height) < (maxwidth / maxheight))) {
7 Y, }% D/ p$ t9 h  c$ Qnormalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
% L: n) Z2 y! M4 gnormalizedheight = maxheight;
- F2 `8 S2 a% A( ]7 k+ P}
else if (maxheight && ((oimg.height == oimg.width) || (oimg.height > oimg.width) || (oimg.height > maxheight))) {
% i" F& f0 C6 v1 \normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
/ P  x+ H) Q* A" U/ j2 O9 _/ lnormalizedheight = maxheight;
}
else if (maxwidth && (maxwidth < oimg.width)){
- b% d, l- ~! ]# x0 }6 ~1 Dnormalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
$ o3 t0 i- Z% [! j3 x$ |4 Fnormalizedwidth = maxwidth;
7 X1 W0 \$ P( S# u( c0 l2 `}
. i4 O/ b/ O& P9 K8 P1 Z" Pelse {
normalizedwidth = oimg.width;
normalizedheight = oimg.height;
}
* y9 O1 _5 i; d: Mreturn { width: normalizedwidth, height: normalizedheight }
},
canvas.img.prototype.getoriginalsize = function() {
, N# m1 u% y$ Jreturn { width: this._oelement.width, height: this._oelement.height }
};
5 T: ]3 p: Z6 m: x$ @canvas.img.prototype._setrandomproperties = function(oconfig) {
/ ?1 S0 O/ H8 q: a; l3 l/ a% ]if (oconfig.angle == null) {
8 c3 T" T& Q/ J0 {% o1 n3 Athis.angle = (math.random() * 90);
, Y3 m5 T( S7 X+ @}
" i+ v# a" F. Z8 X, Hif (oconfig.top == null) {
this.top = this.height / 2 + math.random() * 450;
2 C+ ]+ G: @- F/ l" }0 A. S- w}
; x6 K+ ?% ?( D  ~. uif (oconfig.left == null) {
* W" p. {3 A! c$ k" d, ?this.left = this.width / 2 + math.random() * 600;
0 A3 p+ ^  `. i1 u: f; v' Z$ r}
4 [4 |7 n; t! ~! V};
canvas.img.prototype.setcornersvisibility = function(visible) {
* X" _& g9 V. k: M; wthis.cornervisibility = visible;
# ]& L+ D2 C3 _: L# |  _" e};
canvas.img.prototype.setimagecoords = function() {
; c8 w" Q# N% M4 I& L8 Y# W: D! rthis.left = parseint(this.left);
this.top = parseint(this.top);
this.currentwidth = parseint(this.width) * this.scalex;
* d# n: L: G, r; G2 x' Lthis.currentheight = parseint(this.height) * this.scalex;
0 {9 H9 C" N# cthis._hypotenuse = math.sqrt(math.pow(this.currentwidth / 2, 2) + math.pow(this.currentheight / 2, 2));
* T0 g2 u7 H- A. w0 ?" D: ~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;
6 n* s, v4 L" `var theta = this.theta;
var sinth = math.sin(theta);
var costh = math.cos(theta);
( U7 P2 h4 q( o4 Z6 {. Ivar tl = {
x: this.left - offsetx,
$ K) s4 E+ [3 @, G' S. X8 `y: this.top - offsety
};
var tr = {
. z. K9 l# A3 ~+ U# \% h, V: f% nx: tl.x + (this.currentwidth * costh),
- {% J$ x' n# n0 w& Fy: tl.y + (this.currentwidth * sinth)
};
1 H& O  `! v/ ]  h1 I) Dvar br = {
x: tr.x - (this.currentheight * sinth),
6 z$ \! _7 a* A. ^y: tr.y + (this.currentheight * costh)
};
  o7 @9 j2 |8 }6 o* cvar bl = {
4 i6 t7 ^& ]8 T$ U' Rx: tl.x - (this.currentheight * sinth),
y: tl.y + (this.currentheight * costh)
" Q4 a# a% {% V7 Z3 }; T7 ^};
7 f$ Q6 u( R& B: Vthis.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
this.setcornercoords();
6 }! t: M" ~% w4 ?$ {+ b( M6 H};
" ?! J4 y1 z8 l( Vcanvas.img.prototype.setcornercoords = function() {
0 E2 ~! T/ f/ ]7 n  @' v9 ]var coords = this.ocoords;
. T( F, `( C  W* p7 y9 F" n1 nvar theta = this.theta;
& S0 D" a% }' r5 `4 q8 vvar cosoffset = this.cornersize * this.scalex * math.cos(theta);
, h. A9 `" M; H+ b) u4 |' z* M' ]var sinoffset = this.cornersize * this.scalex * math.sin(theta);
coords.tl.corner = {
1 L* `+ i; @/ |7 X" d3 Q$ n3 ftl: {
x: coords.tl.x,
y: coords.tl.y
},
tr: {
x: coords.tl.x + cosoffset,
y: coords.tl.y + sinoffset
},
! G' y0 p; d$ fbl: {
6 u+ }& w; q. @  Bx: coords.tl.x - sinoffset,
7 I! }( E7 y. cy: coords.tl.y + cosoffset
}
1 J$ E+ |1 l4 l( N6 B& K};
coords.tl.corner.br = {
- C! m; j" h. j. f/ H4 @x: coords.tl.corner.tr.x - sinoffset,
y: coords.tl.corner.tr.y + cosoffset
4 p+ u5 V( G. j9 A% q9 C5 f; l};
coords.tr.corner = {
5 f, Z4 \) N& \1 \0 m1 W6 Dtl: {
x: coords.tr.x - cosoffset,
y: coords.tr.y - sinoffset
2 ]* a, g. O. m* ?},
tr: {
x: coords.tr.x,
9 Q3 j9 U, d! J- ]6 t2 Py: coords.tr.y
' {6 z$ F. a% r) ^3 ^},
br: {
x: coords.tr.x - sinoffset,
y: coords.tr.y + cosoffset
}
};
, m* v3 W( v& i: s# W: [/ k4 wcoords.tr.corner.bl = {
1 Q3 c- E0 z  I1 r1 X0 f+ Vx: coords.tr.corner.tl.x - sinoffset,
9 G7 x5 \2 F+ w- a+ Cy: coords.tr.corner.tl.y + cosoffset
};
coords.bl.corner = {
2 {% i& S! d. k: Q; K1 V8 p2 }tl: {
x: coords.bl.x + sinoffset,
2 Y$ ?1 Z- q/ Dy: coords.bl.y - cosoffset
},
bl: {
x: coords.bl.x,
y: coords.bl.y
},
8 r& H5 S) s( I6 H5 k# v0 Nbr: {
x: coords.bl.x + cosoffset,
/ H3 ~, D* K( @5 t! b& \' H6 ^# ey: coords.bl.y + sinoffset
}
+ J( q# M5 J4 s8 N" E/ T7 W};
coords.bl.corner.tr = {
" `2 n# u! ~" t2 L1 v& f0 q4 T2 `) Vx: coords.bl.corner.br.x + sinoffset,
2 m% V/ w3 w1 _4 P( f# z+ h9 yy: coords.bl.corner.br.y - cosoffset
};
! ~; y1 M6 h% w: H0 ], e7 acoords.br.corner = {
tr: {
x: coords.br.x + sinoffset,
3 S, _8 U" S( @5 |1 i! }+ X" `y: coords.br.y - cosoffset
; ^8 ^6 K6 j1 ~9 Q, [9 V9 ]* i},
: A6 K$ `/ N! H" [- Abl: {
x: coords.br.x - cosoffset,
1 A& S/ o4 Z; h3 by: coords.br.y - sinoffset
},
br: {
x: coords.br.x,
2 C0 Q& m; S5 A! W/ W/ X5 M. D: O& v$ [y: coords.br.y
7 Y9 O* ^- J, y  W/ R}
: x3 j* ^% C8 J  f. }};
* D# Y' u! W8 mcoords.br.corner.tl = {
( j+ {' j# _# jx: coords.br.corner.bl.x + sinoffset,
y: coords.br.corner.bl.y - cosoffset
};
};
, B0 L7 J* y5 t$ r: a/ B}());
8 P* D( y# C. M/ N2 L* Xreturn canvas;
! r8 T' S7 Q4 r, F, J9 O% ]6 _});
puzzle.html代码如下：
, ^9 [/ t2 A' t" o* _1 l* ^2 E复制代码代码如下:<!doctype html>
<html>
! W/ c. ~$ X0 m<head>
<meta http-equiv=content-type content=text/html; charset=utf-8>
<title>insert title here</title>
<link type=text/css href=html5_puzzle.css rel=stylesheet />
<script type=text/javascript src=../multi_upload/seed.js></script>
<script type=text/javascript src='html5_puzzle.js'></script>
</head>
4 P) _8 o! F4 E" y8 t4 a1 s% ~! f<body>
- b5 a, r+ R  S  B" @7 z<div id='html5_puzzle'>
' D$ d$ L" y. x  ~! D- d( }1 V<div id='puzzle_left'>
8 ]2 e) z5 q, V" T6 H1 ]/ p5 z' c<div class='puzzle_column'>
<ul>
<li><img src='small_img/1.jpg' data-index='1' /></li>
6 c/ _" i6 e# Q3 R, o<li><img src='small_img/2.jpg' data-index='2' /></li>
( c! [! H6 _  ]' S<li><img src='small_img/3.jpg' data-index='3' /></li>
; c+ B( M& V) H<li><img src='small_img/4.jpg' data-index='4' /></li>
<li><img src='small_img/5.jpg' data-index='5' /></li>
</ul>
" m; p3 Q$ f" M, N( P4 y</div>
# {$ L1 ~4 `/ M6 U& j( Z4 Z' j<div class='puzzle_column'>
<ul>
<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>
<li><img src='small_img/9.jpg' data-index='9' /></li>
% l% q5 I. V$ ]1 w* f3 N& f<li><img src='small_img/10.jpg' data-index='10' /></li>
</ul>
- V. C, J% M/ a4 r</div>
* [6 O0 v, H, S7 Z</div>
<div id='puzzle_right'>
<div id='puzzle_canvas'>
<canvas id=canvid1></canvas>
! u; k+ k8 ]- i8 ^4 ~! I<div id='canvas_menu'>
<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
href='javascript:void(0)' id='photo_update'>更改图片</a>
</div>
</div>
7 }3 d+ a" N& K, d* L# X<img id=bg src=big_img/1.jpg width='600' height='450' />
</div>
. ]/ O! E) d! K6 R: f# w% V' N# u<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>点击图片可以旋转，拖拽,
/ ^& ?. I& P/ @缩放哦!</a>
</div>
</div>
<input type=file id='test'>
% J7 a  ]" _" u# ~" ~9 _* }<canvas id='test_canvas'></canvas>
</body>
</html>
html5_puzzle.css代码如下：
复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
font-size: 0;
}</p> <p>canvas {
background-color: transparent;
3 p. U1 L( f: Cleft: 0;
8 n4 _4 \. e& \. vposition: absolute;
top: 0;
7 E; ^: D; q# d2 [9 t! C: g( E' W}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
display: inline-block;
! B4 ]/ O- i8 d}</p> <p>.puzzle_column li {
display: block;
& F7 i  A3 h" {( vmargin: 5px;
4 g8 u. N6 j, w6 t( A- J8 }border: 1px solid #ffffff;
4 G5 H3 T. w6 N8 B# _}</p> <p>.puzzle_column li:hover {
9 x' j- V# ^* ~* W- B& _3 ]border: 1px solid #3b5998;
  E" ?- g, e% F; _+ Gcursor: pointer;
}</p> <p>.puzzle_column {
font-size: 0;
) m8 t' E6 K8 _/ t3 K- x( H: P9 }}</p> <p>#puzzle_left,#puzzle_right {
! g0 l' s0 D8 o9 J2 q, F  yborder: 1px solid #3b5998;
}</p> <p>#puzzle_right,#puzzle_bottom a {
font-size: 14px;
! @! Q. N6 p! L/ |& mmargin: 10px 0 0 10px;
. ~! R; \5 u* N  o}</p> <p>#puzzle_bottom {
margin: 5px 0;
}</p> <p>#puzzle_canvas img {
}</p> <p>#puzzle_canvas {
% M2 m! n: E$ @+ b, j# O7 J3 `( q$ j- woverflow: hidden;
width: 600px;
0 u9 ^# \9 V4 T5 F5 Y! Theight: 450px;
" b/ I/ O' `" T7 w- K& [position: relative;
4 z+ @- [8 l6 F, h  G}</p> <p>#add_img input {
- H/ m: E+ l: O6 r2 [' }3 C. iposition: absolute;
font-size: 100px;
$ T4 z1 ~! ^7 V6 m; a0 tright: 0;
, d5 b6 _4 Z* Z% Stop: 0;
/ m+ p. }- j0 b3 Y- s* s& b$ `) b* Topacity: 0;
}</p> <p>#add_img {
! v, |2 Y" t1 y6 X0 B+ J8 k3 nposition: relative;
display: inline-block;
background: #3b5998;
. o7 G4 t7 H# h: B- }border-radius: 4px;
$ W0 e* v8 O( S2 w& a  C/ O/ Xpadding: 4px 12px;
# t2 G- y: h7 O# loverflow: hidden;
color: #ffffff;
3 T$ n7 V- s6 h8 H/ T' d}</p> <p>#bg,#show_list {
display: none;
7 W, y7 ^: `5 i7 C0 u' }4 P  j}</p> <p>#canvas_menu {
3 I* J* x& o  O% q. h/ j6 G% O  Vborder: 1px solid red;
position: absolute;
z-index: 5;
+ u4 C+ X- S: W8 V" @/ p* _7 a3 Ltop: 0;
, @& v! S* F6 c+ d2 l* Bleft: 0;
display: none;
9 J2 y/ n7 |: U; I6 j}</p> <p>#canvas_menu a {
display: inline-block;
, j1 P" D/ ]7 s+ ~" [1 Y' Z9 j6 Q}</p> <p>#test_canvas {
top: 700px;
0 v5 F9 a7 l7 v/ f: I}
html5_puzzle.js代码如下：
# K) K. ~1 U1 M4 [2 ]复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
; K; V& t$ A3 e2 _/ o1 ss, canvasimg, canvaselement) {
1 t* c% t0 a7 l3 t4 L* ivar img=[];
var canvas = new canvaselement.element();
" W6 Y* G* z' ^canvas.init('canvid1', {
width : 600,
height : 450
});
s('.puzzle_column img').on('click',function(e){
6 K7 z5 O. `- q& \- ivar index=this.getattribute('data-index');
$('bg').onload = function() {
- C# x& t' X5 {( h" Fvar ctx=$('canvid1-canvas-background').getcontext('2d');
ctx.clearrect(0, 0,600,450);
/ W2 M: f- \' x' Y, q0 V6 himg[0]=new canvasimg.img($('bg'), {});
canvas.setcanvasbackground(img[0]);
};
$('bg').setattribute('src','medium_img/'+index+'.jpg');
e.stoppropagation();
* H8 U; q# @/ ~3 O});
var canvasdemo = function() {
return {
init : function() {
; s; Y+ m3 g# U0 [1 xvar img_list=dom.query('#puzzle_canvas img');
, p$ }! i& T: ^5 h% K7 z9 dimg[0]=new canvasimg.img($('bg'), {});
: {' V$ N: o% E/ qs.each(img_list,function(i,el){
( H% Z& t8 r8 g( E  g4 _el.setattribute('data-index',i);
img.push(new canvasimg.img(el, {}));
9 D! T0 c: L* _" I4 Vcanvas.addimage(img[i+1]);
});
canvas.setcanvasbackground(img[0]);
; m' n/ [8 z! b8 d& Pthis.cornersvisible = (this.cornersvisible) ? false : true;
this.modifyimages(function(image) {
image.setcornersvisibility(this.cornersvisible);
5 r2 y3 ]1 I( S});
* ^( o, k# ], v' k1 E},
modifyimages : function(fn) {
: S- P# m! S( D* B" }$ _) g% Ifor ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
" }8 n) d6 h! xfn.call(this, canvas._aimages);
}
canvas.renderall(false,false);
s('#puzzle_canvas img').remove();
img = [];
}
% \+ t6 h/ M( |9 P7 ]8 p2 P8 i1 ?+ c};
}();
function getcurimg(){
3 I& U3 c$ Y- w3 Wvar oimg=canvas._prevtransform.target;
( B3 a& d/ M  k6 ^* D: Kfor(var i=0;i<canvas._aimages.length;i++){
if(canvas._aimages._oelement.src==oimg._oelement.src){
return i;
% \5 ^2 V8 x: T2 h}
( m7 o: |- {" G}
}
s('#photo_delete').on('click',function(e){
7 }5 Z, b* d: p" H- rvar i=getcurimg();
canvas._aimages.splice(i,1);
canvas.renderall(true,true);
9 y) o% d6 S# E4 I$('canvas_menu').style.display=none;
  G4 X5 Q- Y" f" k});
% [" k) R2 i" U1 A& _s('#photo_update').on('click',function(e){
. Z$ U$ S0 M( ~( N# T7 F  I$('test').click();
& N2 |) p1 U* A4 @5 d});
7 o2 y2 ^: O1 e: T: w6 i1 ns('#test').on('change',function(e){
+ ~+ ^, S9 G; v; t2 I5 d4 g2 Wvar files = e.target.files || e.datatransfer.files;
var reader = new filereader();
reader.onload = (function() {
8 B' o+ ]! Y7 p7 _- N& L* t  w6 x( `- Areturn function(e) {
var dataurl = e.target.result, canvas1 = document.queryselector('#test_canvas'), ctx = canvas1.getcontext('2d'), img = new image();
img.onload = function(e) {
" ^4 d7 ~1 |& e# \! [# ]! T) N) q( oif(img.width>200||img.height>200){
, p- G" R5 Z3 {1 a, b7 D! C: v  Zvar prop=math.min(200/img.width,200/img.height);
img.width=img.width*prop;
( M# W* Q' J# A  n- timg.height=img.height*prop;
% u$ g! K# c, M) [}
canvas1.width=img.width;
8 x- x  C1 p. m6 H3 }- Pcanvas1.height=img.height;
4 ]+ R! J8 W' Z1 ?, ?9 ^1 O  Actx.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() {
8 r) L$ a# P# W( }# H7 q8 Pvar i=getcurimg(),target=canvas._prevtransform.target;
console.log(target);
- V; j) K7 f' C- Zcanvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
top:target.top,
. m( v% Y, s% s+ q% Tleft:target.left,
; ?  k3 \6 p# R4 Y/ I) U* sscalex:target.scalex,
scaley:target.scaley,
) }0 v& n9 d7 ~7 hangle:canvas.curangle
7 F/ g2 t2 f9 y% c$ I* h});
. [: \1 T) @4 t+ s0 ]canvas.rendertop();
: I/ j4 A! F' R' y, |6 Kcleartimeout(t);
2 c" p1 ^* J  C& @; O" {( _s('#canvid1 img').remove();
},1000);
};
img.src = dataurl;
5 Z& X- ]8 k4 r4 F; R" Z: a};
})();
- s$ l" M6 P1 [1 [( `: V" f' h# zreader.readasdataurl(files[0]);
});
s('#upload_btn').on('click',function(){
1 w0 I, m/ |( ^* j; K* K- Mvar imgdata = canvas.canvasto('jpeg');
6 }( \1 X4 ^0 l  Y. Dvar imgvalue = imgdata.substr(22);
; u+ @; w' ], O2 a- fs.ajax({
: N$ F+ n& ?" }4 w  Yurl : 'http://localhost/html5/upload1.php',
- C9 u0 ]9 Q; N5 E1 k1 {0 ^% y, V6 rtype : 'post',
data : {
. c/ c& \# C5 S  A0 T: r# D, t" R3 Bimgdata : imgvalue,
file_name :'mix_img.jpeg'
},
datatype : 'text',
success : function(data) {
alert(s);
}
: A% m& ^' @$ g$ v});
});
});
  {5 e& P1 k. @# D至于用html5 input读取图片，这很简单就不贴出来了。
9 C1 ^, j1 N$ \6 a3 v$ f
2 V6 @* `2 |4 Z, W更多网页制作信息请查看： 网页制作

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

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

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

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

疯了.........

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

一骂人就激动....

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