html5版canvas自由拼图实例

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

# i% v  d) A  Q2 n                               
登录/注册后可看大图

canvaselement.js代码如下：
; G; Z) M  V! F1 R6 G# H% G复制代码代码如下:define('canvaselement', [ '../multi_upload/core' ], function(s) {
var canvas = window.canvas || {};
(function () {
5 q- P& |! S4 T& rcanvas.element = function() {};
$ ~! i9 P" l( {' wcanvas.element.prototype.fillbackground = true;
canvas.element.prototype.showcorners = false;
; [: _/ G7 _" F& T1 e4 f* [canvas.element.prototype.photoborder = true;
canvas.element.prototype.polaroid = false;
  M& P7 A- B/ H/ U# g) K+ A% [% Icanvas.element.prototype._backgroundimg = null;
canvas.element.prototype._groupselector = null;
& \- Z  o# I1 Acanvas.element.prototype._aimages = null;
2 H; G) L' C5 t; ?7 n8 K6 T/ B/ dcanvas.element.prototype._ocontext = null;
canvas.element.prototype._oelement = null;
( V/ q/ D; q' p3 Z% u+ [4 Ocanvas.element.prototype._oconfig = null;
canvas.element.prototype._currenttransform = null;
* l3 v" z3 h5 Q3 }4 X; C. M- ucanvas.element.prototype._prevtransform = null;
) Y" u9 G; }' E1 `/ j; Fcanvas.element.prototype.curangle = null;
canvas.element.prototype.init = function(el, oconfig) {
5 {! C! G  H) O. c2 A- ~1 A2 ?+ W4 kif (el == '') {
1 |" \* Q9 S/ \return;
& r) F/ B2 }0 W& y: Q}
this._initelement(el);
this._initconfig(oconfig);
5 V! \( l) a, v. Uthis._createcanvasbackground();
this._createcontainer();
this._initevents();
9 P+ D2 ^5 i2 Q: u; _! P% [this._initcustomevents();
  d  T4 q4 M3 }; Q# N4 Z};
canvas.element.prototype._initelement = function(el) {
5 J( X* V  M7 m. Wthis._oelement = document.getelementbyid(el);
, O7 l7 n* f* V0 ethis._ocontexttop = this._oelement.getcontext('2d');
& b  h# J' C, J0 X* \* m& K, A};
canvas.element.prototype._initcustomevents = function() {
this.onrotatestart = new canvas.customevent('onrotatestart');
$ Q- [: \5 k1 R. S: fthis.onrotatemove = new canvas.customevent('onrotatemove');
this.onrotatecomplete = new canvas.customevent('onrotatecomplete');
this.ondragstart = new canvas.customevent('ondragstart');
# k+ J4 D. @3 _/ F1 Hthis.ondragmove = new canvas.customevent('ondragmove');
this.ondragcomplete = new canvas.customevent('ondragcomplete');
};
% o& H, u- \! K) lcanvas.element.prototype._initconfig = function(oconfig) {
this._oconfig = oconfig;
this._oelement.width = this._oconfig.width;
this._oelement.height = this._oconfig.height;
this._oelement.style.width = this._oconfig.width + 'px';
this._oelement.style.height = this._oconfig.height + 'px';
8 P" {- X% S* X  J7 n* q2 @};
/ L3 d1 Y$ u0 w6 b5 ]0 y" [: scanvas.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);
});
$ t! W+ j7 o' Q1 ms(this._oelement).on('mousemove', function(e){
* t3 E. i; M  q# E_this.onmousemove(e);
});
. a) I6 C4 p% q$ h4 |1 S% w2 N. {};
canvas.element.prototype._createcontainer = function() {
var canvasel = document.createelement('canvas');
canvasel.id = this._oelement.id + '-canvas-container';
/ G" g% G+ g0 Q* X: ], _4 E0 J5 Dvar ocontainer = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
ocontainer.width = this._oconfig.width;
; x/ d% W! F! x2 [  Cocontainer.height = this._oconfig.height;
6 o  g6 F( \% f5 e$ x& _ocontainer.style.width = this._oconfig.width + 'px';
ocontainer.style.height = this._oconfig.height + 'px';
this._ocontextcontainer = ocontainer.getcontext('2d');
};
9 x# D5 Y7 C6 X" scanvas.element.prototype._createcanvasbackground = function() {
9 {5 D* Q# d0 l8 Nvar canvasel = document.createelement('canvas');
3 _- `& W; F# X2 O( ^" s' Ccanvasel.id = this._oelement.id + '-canvas-background';
4 r( d) R5 B1 [5 {$ A1 H: Gvar obackground = this._oelement.parentnode.insertbefore(canvasel, this._oelement);
obackground.width = this._oconfig.width;
obackground.height = this._oconfig.height;
" K, f! t( e5 F4 uobackground.style.width = this._oconfig.width + 'px';
, y0 I9 I; e/ v9 v: J& {) }. kobackground.style.height = this._oconfig.height + 'px';
this._ocontextbackground = obackground.getcontext('2d');
};
canvas.element.prototype.setcanvasbackground = function(oimg) {
this._backgroundimg = oimg;
var originalimgsize = oimg.getoriginalsize();
this._ocontextbackground.drawimage(oimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
7 b9 |0 P3 q1 x% O, c};
canvas.element.prototype.onmouseup = function(e) {
+ F/ {4 h  x5 Cif (this._aimages == null) {
return;
}
& q4 n9 k+ a3 l0 L5 ]. Y# Zif (this._currenttransform) {
* [* v: I) l9 W5 D* R/ ]this._currenttransform.target.setimagecoords();
% u+ Z! y$ r  d- y: E}
3 o+ ~' J% ^. ~% Dif (this._currenttransform != null && this._currenttransform.action == rotate) {
this.onrotatecomplete.fire(e);
6 H3 G3 j* O# [. `8 F+ ]: Y5 z: m} else if (this._currenttransform != null && this._currenttransform.action == drag) {
this.ondragcomplete.fire(e);
4 K7 r+ w$ E1 \$ w6 b  p}
/ E1 n+ G5 a1 K9 I6 ~this._currenttransform = null;
this._groupselector = null;
- ^8 o4 ?5 |) {this.rendertop();
};
  x* E% T+ d+ v3 E  `1 T9 w7 ocanvas.element.prototype.onmousedown = function(e) {
* G2 u; c3 Y- V% avar mp = this.findmouseposition(e);
8 `. _) ?/ p8 D5 S/ ^( uif (this._currenttransform != null || this._aimages == null) {
return;
( W, r& V3 ?. u2 p( w3 M( c3 ~1 @}
% A9 P3 M& ^1 L& r" m. e; @  ?5 s& g  _var oimg = this.findtargetimage(mp, false);
6 y" D7 \- U, [if (!oimg) {
this._groupselector = { ex: mp.ex, ey: mp.ey,
" L+ R8 g/ U5 A1 g2 stop: 0, left: 0 };
}
5 H3 \, p5 e1 D$ selse {
var action = (!this.findtargetcorner(mp, oimg)) ? 'drag' : 'rotate';
6 t+ A( n5 s, Z2 V6 W4 @* Z- Bif (action == rotate) {
4 q% n9 C6 [3 d" A6 lthis.onrotatemove.fire(e);
; u  b' U2 K9 Q, K+ \7 [7 _} else if (action == drag) {
this.ondragmove.fire(e);
}
this._prevtransform=this._currenttransform = {
target: oimg,
action: action,
" l' \* f, I- m" \% G; l: tscalex: oimg.scalex,
offsetx: mp.ex - oimg.left,
offsety: mp.ey - oimg.top,
- A  W/ w3 G4 P2 N4 `# n& s# n$ Jex: mp.ex, ey: mp.ey,
; a  X2 r' r% A4 Z* ^left: oimg.left, top: oimg.top,
theta: oimg.theta
};
! _# |( {; g4 J6 V6 C7 E$('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;
$('canvas_menu').style.display=block;
this.renderall(false,false);
}
};
canvas.element.prototype.onmousemove = function(e) {
var mp = this.findmouseposition(e);
! j# ^* w3 C0 }- ^! d& nif (this._aimages == null) {
9 B/ R# Q5 Z- x% E+ Ireturn;
  l7 n" Y7 @: C2 [8 }* `3 O9 C}
if (this._groupselector != null) {
. l& u6 s3 Z$ g7 j" R5 J0 xthis._groupselector.left = mp.ex - this._groupselector.ex;
: L5 t2 N  r8 K& X: tthis._groupselector.top = mp.ey - this._groupselector.ey;
this.rendertop();
$ n! O& w& ^, N8 W% c0 O" p}
else if (this._currenttransform == null) {
0 B; m# U( g. w$ J6 i8 n7 Fvar targetimg = this.findtargetimage(mp, true);
this.setcursor(mp, targetimg);
}
else {
7 z' Z' P. J. Y& N6 c2 l3 Pif (this._currenttransform.action == 'rotate') {
$ B- d1 K$ {6 Q, d' f* _* Sthis.rotateimage(mp);
- g8 `; e1 _2 o. C0 rthis.scaleimage(mp);
this.onrotatemove.fire(e);
}
else {
, a5 S9 `; H0 P, J' xthis.translateimage(mp);
this.ondragmove.fire(e);
! c1 ^- B: P, N& I/ T/ w}
this.rendertop();
( G3 h, m8 H- S$ K! W" x  {}
  j4 @1 \: T4 `6 U% C- z};
( x! \6 K1 B8 I( W% y8 b# Ucanvas.element.prototype.translateimage = function(mp) {
this._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;
$('canvas_menu').style.top=this._currenttransform.target.top +px;
' M5 V1 Y# [) r/ k4 w+ F0 E};
canvas.element.prototype.scaleimage = function(mp) {
var lastlen =
math.sqrt(math.pow(this._currenttransform.ey - this._currenttransform.top, 2) +
! ~& m- x# g  Y$ Emath.pow(this._currenttransform.ex - this._currenttransform.left, 2));
5 p2 I7 @- w* y' F# Z& \+ fvar curlen =
) P9 V* D& ?6 @+ C8 z+ Rmath.sqrt(math.pow(mp.ey - this._currenttransform.top, 2) +
math.pow(mp.ex - this._currenttransform.left, 2));
) b6 `( g/ u+ c5 V) H: |var curscalex= this._currenttransform.scalex * (curlen / lastlen);
var curscaley=this._currenttransform.target.scalex;
if(curscalex>0.7&&curscaley>0.7){
* I, I( \$ t2 l0 n/ fthis._currenttransform.target.scalex =curscalex;
this._currenttransform.target.scaley = curscaley;
}
};
canvas.element.prototype.rotateimage = function(mp) {
. v5 O4 g, L$ W! a, h, p0 @5 S9 evar lastangle = math.atan2(
$ O; s  ]3 Q% Q- Rthis._currenttransform.ey - this._currenttransform.top,
this._currenttransform.ex - this._currenttransform.left
);
( z' W* a: }$ M% P9 T# Ivar curangle = math.atan2(
" R4 H0 e. w8 ~) M! y; ~# rmp.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;
$('canvas_menu').style.transform='rotate('+this.curangle+'deg)';
4 n& ]9 b4 }( N4 ^7 |};
! D5 s& H3 C! Icanvas.element.prototype.setcursor = function(mp, targetimg) {
/ }- C/ _, `) y% \if (!targetimg) {
this._oelement.style.cursor = 'default';
/ X$ N9 d8 B5 Z}
4 v0 r% C& a2 L3 n5 \else {
var corner = this.findtargetcorner(mp, targetimg);
7 |- Q* N+ g' Z0 W2 R8 ~- Z+ Sif (!corner)
{
this._oelement.style.cursor = 'default';
}
else
{
# D; ?) C8 v+ dif(corner == 'tr') {
. N  a' N) }% N- k1 V% l: ~this._oelement.style.cursor = 'ne-resize';
& ]+ Y: }3 w9 s( s% a}
+ A: e9 H' ?( x  E! W/ O$ Qelse if(corner == 'br') {
! T7 ?) h7 c& Z  D7 Jthis._oelement.style.cursor = 'se-resize';
+ q, I) k$ H. a& \+ n1 R7 `}
else if(corner == 'bl') {
this._oelement.style.cursor = 'sw-resize';
}
0 S. T/ f& d: g7 o: Nelse if(corner == 'tl') {
6 [# _* {5 H0 b8 H) g: j+ Hthis._oelement.style.cursor = 'nw-resize';
}
else {
this._oelement.style.cursor = 'default';
* K0 I9 @, U) p% j, n' n}
}
}
8 K7 V" U* b- W- [; \% s};
canvas.element.prototype.addimage = function(oimg) {
  T; a' }  p5 g6 Cif(s.isemptyobject(this._aimages)) {
this._aimages = [];
7 B2 H8 Z5 I  ]* ^* r' {2 d}
1 j* i, t7 j# T6 T9 s6 cthis._aimages.push(oimg);
this.renderall(false,true);</p> <p> };
canvas.element.prototype.renderall = function(allontop,allowcorners) {
) ]$ o) g  _( n4 |- \" C# fvar containercanvas = (allontop) ? this._ocontexttop : this._ocontextcontainer;
this._ocontexttop.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
& i2 @; q, p7 Ncontainercanvas.clearrect(0,0,parseint(this._oconfig.width), parseint(this._oconfig.height));
if (allontop) {
var originalimgsize = this._backgroundimg.getoriginalsize();
this._ocontexttop.drawimage(this._backgroundimg._oelement, 0, 0, originalimgsize.width, originalimgsize.height);
( _( Z+ v9 Y) I( Q$ f}
for (var i = 0, l = this._aimages.length-1; i < l; i += 1) {
this.drawimageelement(containercanvas, this._aimages,allowcorners);
}
% f2 K- A* Z. _( W0 Ethis.drawimageelement(this._ocontexttop, this._aimages[this._aimages.length-1],allowcorners);
};
canvas.element.prototype.rendertop = function() {
this._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) {
# C& [( Y5 v. P) f' m# R9 Ethis._ocontexttop.fillstyle = rgba(0, 0, 200, 0.5);
this._ocontexttop.fillrect(
) k3 P$ z" Y6 H. \this._groupselector.ex - ((this._groupselector.left > 0) ?
: A, u! h5 A) Z0 : - this._groupselector.left),
this._groupselector.ey - ((this._groupselector.top > 0) ?
; j& f5 O& x3 `6 X; c6 q2 r0 : - this._groupselector.top),
+ U  c- \% |; B7 t( S5 N! T0 Kmath.abs(this._groupselector.left),
, G' G% p% d# C. I: Fmath.abs(this._groupselector.top)
. F. ^9 g, ]* M2 r' b2 ]+ J);
, w; {! \3 P" [this._ocontexttop.strokerect(
this._groupselector.ex - ((this._groupselector.left > 0) ?
0 : math.abs(this._groupselector.left)),
$ O# v  `* n& J/ b7 W; q( @! \: Ithis._groupselector.ey - ((this._groupselector.top > 0) ?
0 : math.abs(this._groupselector.top)),
math.abs(this._groupselector.left),
' r3 n3 ?9 ?& o9 u& z2 ]- R9 j2 _' jmath.abs(this._groupselector.top)
: ~% G) X# r) x);
6 h5 G; x1 q: f. S  A1 Q5 ~}
3 E0 G3 X$ F$ ?+ W};
canvas.element.prototype.drawimageelement = function(context, oimg,allowcorners) {
- P$ t7 U5 p# z( |' |8 n; `( `oimg.cornervisibility=allowcorners;
var offsety = oimg.height / 2;
var offsetx = oimg.width / 2;
5 M$ c% n! x% b, b0 Y5 Vcontext.save();
context.translate(oimg.left, oimg.top);
context.rotate(oimg.theta);
! h! S+ g0 h3 P+ q" scontext.scale(oimg.scalex, oimg.scaley);
  n0 r( I" W: Gthis.drawborder(context, oimg, offsetx, offsety);
var originalimgsize = oimg.getoriginalsize();
var polaroidheight = ((oimg.height - originalimgsize.height) - (oimg.width - originalimgsize.width))/2;
! ], M6 o) Q7 \" D# l! `context.drawimage(
4 D5 {9 g/ _. Z" g6 K8 b# K6 loimg._oelement,
- originalimgsize.width/2,
, x: P. t5 X: f8 o/ t* U+ S((- originalimgsize.height)/2 - polaroidheight),
originalimgsize.width,
$ D# `4 v" v: z& toriginalimgsize.height
# [0 C; a" |) f0 U);
if (oimg.cornervisibility) {
# \- S  n' Z1 vthis.drawcorners(context, oimg, offsetx, offsety);
}
) t. R9 {8 G8 l& k, `) Icontext.restore();
};
canvas.element.prototype._getimagelines = function(ocoords) {
9 y: D3 N0 X) k, _return {
# p/ D! A0 _% D" rtopline: {
o: ocoords.tl,
1 r' d8 H8 j4 ~' T7 Md: ocoords.tr
},
rightline: {
o: ocoords.tr,
1 Y) V2 z+ c& `9 c; [$ Sd: ocoords.br
; S0 l2 M# n5 v- Y3 C; `% j) B},
bottomline: {
o: ocoords.br,
d: ocoords.bl
$ q! e+ |/ m/ b& ]6 L},
% M+ v6 Q6 \2 e! p3 z$ z9 rleftline: {
: t" j" {* Q2 U7 wo: ocoords.bl,
4 @1 q! d2 w8 U) Q: l% Bd: ocoords.tl
}
};
# W, v; R8 B( H4 `};
canvas.element.prototype.findtargetimage = function(mp, hovering) {
for (var i = this._aimages.length-1; i >= 0; i -= 1) {
" V: F( j0 r5 u% m7 jvar ilines = this._getimagelines(this._aimages.ocoords);
var xpoints = this._findcrosspoints(mp, ilines);
if (xpoints % 2 == 1 && xpoints != 0) {
var target = this._aimages;
if (!hovering) {
4 T$ m+ L) v; T2 R2 D$ ?this._aimages.splice(i, 1);
this._aimages.push(target);
}
9 g4 R+ x9 m  ~# wreturn target;
, h1 h3 n/ z7 O" l1 `9 L}
# P8 k* q2 U2 j4 ?' K, R* s}
6 r# k! r. A9 x0 l. v6 ireturn false;
};
# Z* _1 q# W* D7 J! c7 |% }canvas.element.prototype._findcrosspoints = function(mp, ocoords) {
var b1, b2, a1, a2, xi, yi;
8 f, b+ S3 A- r  ~! b3 Ovar xcount = 0;
6 h* G% p: T7 c% Hvar iline = null;
for (linekey in ocoords) {
: ^. O1 }# k+ x( j7 {' H1 Y: @iline = ocoords[linekey];
9 i; m! n$ H4 R' Cif ((iline.o.y < mp.ey) && (iline.d.y < mp.ey)) {
continue;
$ u3 G: L5 Z8 r/ [; S' R}
$ ?6 [9 L4 g+ B5 ~if ((iline.o.y >= mp.ey) && (iline.d.y >= mp.ey)) {
) g8 Z$ W0 c* U8 ]3 y% k6 ucontinue;
}
& d- z6 s3 b. o7 lif ((iline.o.x == iline.d.x) && (iline.o.x >= mp.ex)) {
( K8 T! d4 K4 o  _xi = iline.o.x;
( }- w/ E4 ~' L- D: m1 k6 Iyi = mp.ey;
}
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;
xi = - (a1-a2)/(b1-b2);
4 W% \2 _% w. H) A  Myi = a1+b1*xi;
}
/ R: G1 e* j8 ^( t7 Vif (xi >= mp.ex) {
- O" R0 U2 ?3 c9 N' Hxcount += 1;
}
if (xcount == 2) {
8 U8 A+ }) {% V- H: g: a9 Z. o. dbreak;
}
* O  U; h" A5 J% A4 Z}
return xcount;
9 t7 |8 X# ?3 h  Z& C5 K};
0 W3 i3 o9 e4 W8 A6 u. Rcanvas.element.prototype.findtargetcorner = function(mp, oimg) {
  I' T+ H3 l4 x# p  L/ `var xpoints = null;
1 q% x% ?+ \8 pvar corners = ['tl','tr','br','bl'];
for (var i in oimg.ocoords) {
xpoints = this._findcrosspoints(mp, this._getimagelines(oimg.ocoords.corner));
: A4 U5 `; _$ vif (xpoints % 2 == 1 && xpoints != 0) {
return i;
}
& W6 Q& H+ V2 p/ y+ M# n}
return false;
1 K* Q2 n' l8 b# K0 m};
canvas.element.prototype.findmouseposition = function(e) {
( I( G" I0 \' _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;
( }& t0 @( o, E* Y( l3 K% Lvar scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
# L* E) }9 {5 l7 W' tvar safarioffsetleft = (issafari2) ? e.target.ownerdocument.body.offsetleft + scrollleft : 0;
1 n" A( e: W5 J+ I4 u9 n, tvar safarioffsettop = (issafari2) ? e.target.ownerdocument.body.offsettop + scrolltop : 0;
return {
. X: n  `; z0 V" n! J. _ex: e.clientx + scrollleft - parentnode.offsetleft - safarioffsetleft,
ey: e.clienty + scrolltop - parentnode.offsettop - safarioffsettop,
+ B* O; i6 t. V) _2 t1 x) a3 ascreenx: e.screenx,
9 u/ p* N7 w# l1 p1 b$ iscreeny: e.screeny
* o% c2 w# c7 g, k( i& }6 v};
2 i, X0 m# h3 e. n9 Z7 \0 {0 C6 d  ~};
- e' s4 t, D# y6 w. O: @8 h. Wcanvas.element.prototype.drawborder = function(context, oimg, offsetx, offsety) {
var outlinewidth = 2;
- c7 U; k$ X! [context.fillstyle = 'rgba(0, 0, 0, .3)';
( e- C; m# @8 g: fcontext.fillrect(-2 - offsetx, -2 - offsety, oimg.width + (2 * outlinewidth), oimg.height + (2 * outlinewidth));
context.fillstyle = '#fff';
context.fillrect(-offsetx, -offsety, oimg.width, oimg.height);
# e- ?3 {) c& c- S: n. t};
canvas.element.prototype.drawcorners = function(context, oimg, offsetx, offsety) {
6 W& @8 d7 U; a; Mcontext.fillstyle = rgba(0, 200, 50, 0.5);
* b# X- d: u; r' n* Z( ucontext.fillrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.fillrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
$ ~! f- ?, O9 ?5 f, Kcontext.fillrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
! A  Z( Z# K. t% J7 _( q};
$ w. L4 _' v% x7 [( xcanvas.element.prototype.clearcorners = function(context, oimg, offsetx, offsety) {
6 i. U9 C, W1 H, K: Dcontext.clearrect(-offsetx, -offsety, oimg.cornersize, oimg.cornersize);
5 L0 A8 q3 f; v5 O- v' Ncontext.clearrect(oimg.width - offsetx - oimg.cornersize, -offsety, oimg.cornersize, oimg.cornersize);
context.clearrect(-offsetx, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
2 n; U' F, P( {6 `& qcontext.clearrect(oimg.width - offsetx - oimg.cornersize, oimg.height - offsety - oimg.cornersize, oimg.cornersize, oimg.cornersize);
context.restore();
: P( j# T( h+ x5 V; D- @& i4 L};
canvas.element.prototype.canvasto = function(format) {
! x7 a6 S$ C. |9 J; Lthis.renderall(true,false);
var containercanvas =this._ocontexttop;
for (var i = 0, l = this._aimages.length; i < l; i += 1) {
. U1 o0 ?! B" r, T3 Z: kvar offsety = this._aimages.height / 2;
4 y% J9 Q5 y1 N7 f" P0 i/ rvar offsetx = this._aimages.width / 2;
this.clearcorners(containercanvas, this._aimages, offsetx, offsety);
}
if (format == 'jpeg' || format == 'png') {
9 S% H7 n: D% [" Q, `) O  Y1 t+ ?return this._oelement.todataurl('image/'+format);
6 l+ t, ?& j2 P}
' s+ a* |2 k" F, I' }0 E};
; C0 g& p  g, a, @2 q, j# Y6 Ycanvas.customevent = function(type) {
5 V( u$ G, N4 ]; F9 }: uthis.type = type;
9 r7 g3 p$ G2 Tthis.scope = null;
6 w5 I- M* \! a/ Hthis.handler = null;
$ h0 q2 V! a3 _  ^' nvar self = this;
( v% C# t' ^; Kthis.fire = function(e) {
if(this.handler != null) {
self.handler.call(self.scope, e);
$ c1 ~4 k* [, X, R1 s}
};
};
+ e# _+ g) ?0 G3 M}());
; h- {, A9 }. S7 sreturn canvas;
});
- e# v5 v1 x8 ]2 Dcanvasimg.js代码如下：
复制代码代码如下:define('canvasimg', [ '../multi_upload/core' ], function(s) {
) s; ]8 h! P; p! Q4 pvar canvas = window.canvas || {};
(function () {
canvas.img = function(el, oconfig) {
7 [. U) \& m0 Q4 a% S# M( othis._initelement(el);
this._initconfig(oconfig);
this.setimagecoords();
/ T5 M. D. p' l0 n};
canvas.img.css_canvas = canvas-img;
var default_config = {
top: {
% K3 \  Q9 \; f  t: \# ~- ~key: top,
# n3 \( x5 p) w/ lvalue: 10
},
1 j4 {7 M; s/ F+ B0 g% A: gleft: {
7 ?, {) }- c! b1 e0 H: vkey: left,
value: 10
},
angle: {
key: angle,
value: 0
},
theta: {
( `% G5 |  s$ \5 F2 M' {# E) B7 ckey: theta,
value: 0
},
' p; \" ]! c" P; E/ bscale-x: {
/ n( s, P- X3 k% F5 d  skey: scalex,
value: 1
},
scale-y: {
& C* [$ c; e9 i1 t/ r+ y2 hkey: scaley,
, p) ~& u: [0 P' C# a2 d  o+ Pvalue: 1
},
cornersize: {
' e$ g: M( N+ V" O3 }key: cornersize,
* v3 O$ f8 w, i8 Z. \( x# p0 i5 Jvalue:10
2 @" G* w) x; u# e},
: _0 b( M/ A1 y* {2 Eborderwidth: {
9 k8 c$ `0 k0 Q' w* R# pkey: borderwidth,
value: 10
},
9 u1 m: o( B: s6 A4 Zpolaroidheight: {
key: polaroidheight,
value: 40
},
randomposition: {
key: randomposition,
! m( [- `3 q- N, r5 v. w1 x# N; jvalue: true
: r5 ?% |4 H$ }}
};
canvas.img.prototype._oelement = null;
0 f5 R7 R% g0 [- p1 Y% g/ _& Mcanvas.img.prototype.top = null;
& }  j0 @, O# B( p/ y% Lcanvas.img.prototype.left = null;
canvas.img.prototype.maxwidth = null;
canvas.img.prototype.maxheight = null;
0 W/ d) E# K2 P! W4 f. D3 b# Jcanvas.img.prototype.ocoords = null;
/ Y% I8 n- M- K7 d; @. S: Bcanvas.img.prototype.angle = null;
/ T' U! P' T/ J( X% xcanvas.img.prototype.theta = null;
canvas.img.prototype.scalex = null;
5 {! i( j  h6 D' o4 f- ]' {canvas.img.prototype.scaley = null;
canvas.img.prototype.cornersize = null;
* N3 y7 C5 W+ U0 Z+ Z1 Ocanvas.img.prototype.polaroidheight = null;
canvas.img.prototype.randomposition = null;
! F. c' W; }  q& c2 n; D+ i" }canvas.img.prototype.selected = false;
canvas.img.prototype.bordervisibility = false;
canvas.img.prototype.cornervisibility = false;
canvas.img.prototype._initelement = function(el) {
this._oelement = el;
7 h( ]3 l- d+ `) V. [+ C2 q& Q; f- r};
canvas.img.prototype._initconfig = function(oconfig) {
var skey;
; v' F$ ]* ?% d* Y. \for (skey in default_config) {
var defaultkey = default_config[skey].key;
5 L" b3 o+ o1 u/ f4 tif (!oconfig.hasownproperty(defaultkey)) { // = !(defaultkey in oconfig)
/ \! b, @) Q$ y0 P1 a; Sthis[defaultkey] = default_config[skey].value;
5 e0 ^' i, M! }8 w0 c}
else {
! c4 h& U: |" r+ [. {1 `5 Ithis[defaultkey] = oconfig[defaultkey];
  e* Y; K8 n& L6 |% c* m) w0 b}
, C7 W* c: K. j! ?3 _1 n}
if (this.bordervisibility) {
this.currentborder = this.borderwidth;
/ k3 J  N9 J! h: i}
else {
  k- i# k& O1 L' `this.currentborder = 0;
4 b) l+ q7 w8 _/ {) j}
' S2 S' {- C7 [9 X+ l' Ivar normalizedsize = this.getnormalizedsize(this._oelement, parseint(oconfig.maxwidth), parseint(oconfig.maxheight));
this._oelement.width = normalizedsize.width;
* e/ ]% o7 Y9 Fthis._oelement.height = normalizedsize.height;
this.width = normalizedsize.width + (2 * this.currentborder);
this.height = normalizedsize.height + (2 * this.currentborder);
if (this.randomposition) {
this._setrandomproperties(oconfig);
}
this.theta = this.angle * (math.pi/180);
};
canvas.img.prototype.getnormalizedsize = function(oimg, maxwidth, maxheight) {
& [' r# t+ h& {; ]if (maxheight && maxwidth && (oimg.width > oimg.height && (oimg.width / oimg.height) < (maxwidth / maxheight))) {
normalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
normalizedheight = maxheight;
3 G1 P8 W% Z* k& q8 Z}
else if (maxheight && ((oimg.height == oimg.width) || (oimg.height > oimg.width) || (oimg.height > maxheight))) {
$ B5 ~& D7 B/ z) ^$ fnormalizedwidth = math.floor((oimg.width * maxheight) / oimg.height);
normalizedheight = maxheight;
8 C; I0 k# g2 U+ i* X" J  R}
+ B7 l1 U& N3 K7 w/ O, {. q9 |else if (maxwidth && (maxwidth < oimg.width)){
& A* t9 Q" m9 k! _% ~$ unormalizedheight = math.floor((oimg.height * maxwidth) / oimg.width);
- S: y& M& ]" t, w  snormalizedwidth = maxwidth;
# s2 q# S: L: A# _}
else {
normalizedwidth = oimg.width;
normalizedheight = oimg.height;
}
return { width: normalizedwidth, height: normalizedheight }
},
canvas.img.prototype.getoriginalsize = function() {
% N9 h' U+ U8 N) n# K, B  d6 n$ Oreturn { width: this._oelement.width, height: this._oelement.height }
' o! h% [7 a7 Q5 U; D};
canvas.img.prototype._setrandomproperties = function(oconfig) {
1 @( w+ K$ O% d. G+ B  ?4 v2 Wif (oconfig.angle == null) {
2 O" p9 V) X/ j* R$ Ithis.angle = (math.random() * 90);
}
if (oconfig.top == null) {
this.top = this.height / 2 + math.random() * 450;
}
if (oconfig.left == null) {
9 A7 n  O9 }1 s* u& @4 r7 D% }3 Lthis.left = this.width / 2 + math.random() * 600;
}
  ^1 E: B7 h& a- D* F  E+ s' q};
! j* C) s) f) Q6 X0 U  w1 `, Zcanvas.img.prototype.setcornersvisibility = function(visible) {
8 J8 z/ V( [+ }) P6 _( W' f% @this.cornervisibility = visible;
1 B, p$ c2 }: }# d- e/ Z: B8 f& U3 q, \};
canvas.img.prototype.setimagecoords = function() {
this.left = parseint(this.left);
2 _/ x; \) T3 |: T+ Z( N# Vthis.top = parseint(this.top);
this.currentwidth = parseint(this.width) * this.scalex;
# C! A6 _; @1 P) l) f- }- Ethis.currentheight = parseint(this.height) * this.scalex;
$ y: {" N, x, s  Y3 f- `) c1 kthis._hypotenuse = math.sqrt(math.pow(this.currentwidth / 2, 2) + math.pow(this.currentheight / 2, 2));
5 p, J) v! F$ K! i* athis._angle = math.atan(this.currentheight / this.currentwidth);
; C# _* t) r4 o3 l$ avar offsetx = math.cos(this._angle + this.theta) * this._hypotenuse;
var offsety = math.sin(this._angle + this.theta) * this._hypotenuse;
var theta = this.theta;
3 S" L3 d7 V$ ?: h( r! [2 T! vvar sinth = math.sin(theta);
var costh = math.cos(theta);
var tl = {
  t5 K6 W& C! h- j- {1 rx: this.left - offsetx,
' @! Z- O8 W2 o5 X# V- Ny: this.top - offsety
7 y# b: n* w  j3 k! h};
var tr = {
x: tl.x + (this.currentwidth * costh),
4 g) n0 ^  y- L8 [& uy: tl.y + (this.currentwidth * sinth)
# q/ I3 C7 N# K};
var br = {
8 ^, ~4 b; g1 x8 [x: tr.x - (this.currentheight * sinth),
y: tr.y + (this.currentheight * costh)
/ d3 `; y# j" ?6 C1 n};
var bl = {
- L% `' C5 L  }- lx: tl.x - (this.currentheight * sinth),
y: tl.y + (this.currentheight * costh)
& h" ^" e# k. M: Z$ m};
this.ocoords = { tl: tl, tr: tr, br: br, bl: bl };
this.setcornercoords();
};
2 r3 H8 j* M9 k+ X# _canvas.img.prototype.setcornercoords = function() {
% S' M  g% p1 q0 C0 c7 Svar coords = this.ocoords;
( j, E* _* a" V4 Mvar theta = this.theta;
var cosoffset = this.cornersize * this.scalex * math.cos(theta);
/ a& c2 h+ O2 P  ^" Z4 Y' X  i) r8 lvar sinoffset = this.cornersize * this.scalex * math.sin(theta);
coords.tl.corner = {
tl: {
0 P8 N" ]* G' W( `, \  p& w2 V8 M( G9 fx: coords.tl.x,
y: coords.tl.y
$ {9 S& E+ B0 o1 ?( S},
tr: {
8 Z3 R# m( f: y! |, p. l( w- Ex: coords.tl.x + cosoffset,
3 \6 M2 l% I" ~; ]. I: S5 my: coords.tl.y + sinoffset
( R- C: z/ b: T},
% _& C. F4 q& w! h4 ebl: {
- q: r' D% _# Xx: coords.tl.x - sinoffset,
9 i% l  ~* H7 B' e& Ky: coords.tl.y + cosoffset
}
};
coords.tl.corner.br = {
x: coords.tl.corner.tr.x - sinoffset,
! |# D$ ~: r# Q' s, L9 sy: coords.tl.corner.tr.y + cosoffset
( D& }$ b, Z/ k& H2 h9 }. V( V};
coords.tr.corner = {
tl: {
x: coords.tr.x - cosoffset,
y: coords.tr.y - sinoffset
0 h4 ^$ c* a* p+ @! H},
tr: {
x: coords.tr.x,
6 z$ o3 F3 w* i" C4 {% w: my: coords.tr.y
},
+ m: O+ E7 E. sbr: {
) S, `3 e0 r0 Z5 ]6 y8 K* ~x: coords.tr.x - sinoffset,
y: coords.tr.y + cosoffset
}
};
* y9 F4 q2 L0 ?0 o  Q& Z7 ocoords.tr.corner.bl = {
$ h8 D/ A3 w* S' g9 fx: coords.tr.corner.tl.x - sinoffset,
) `6 b& M- t, a1 t9 G+ Cy: coords.tr.corner.tl.y + cosoffset
4 C' ~( q; F: L/ J};
7 ^- _9 Y1 u& Q" e( p2 P4 t% Ycoords.bl.corner = {
  b) l- J: L0 T1 u- Btl: {
# I# [4 v. a0 Gx: coords.bl.x + sinoffset,
7 F. g8 S9 V  o* D. @8 F5 cy: coords.bl.y - cosoffset
},
1 A$ \7 l# P* y+ H2 abl: {
x: coords.bl.x,
! r& n" E. A$ b7 T. ~" Ey: coords.bl.y
},
2 w. t* t4 @$ P+ u1 {3 j. h- \br: {
x: coords.bl.x + cosoffset,
y: coords.bl.y + sinoffset
}
: e5 ^& d- |7 f5 S5 ~+ [1 j};
  a" n+ D+ K9 ~! M9 d: j' Qcoords.bl.corner.tr = {
x: coords.bl.corner.br.x + sinoffset,
0 U/ ], V  O0 xy: coords.bl.corner.br.y - cosoffset
};
, l7 o( T; O! @% p8 t5 V, {coords.br.corner = {
) ~& A. I) e' B9 e  V; H2 J- Itr: {
x: coords.br.x + sinoffset,
y: coords.br.y - cosoffset
},
/ Y. w$ B& x) }6 L( j# vbl: {
* B5 }. s4 F) d* f7 [x: coords.br.x - cosoffset,
y: coords.br.y - sinoffset
9 q" y, Y: a- [},
br: {
+ X/ h7 C' G" f% {6 d* qx: coords.br.x,
, m' i, V( ?6 e) By: coords.br.y
}
};
; V% g& E8 T/ rcoords.br.corner.tl = {
x: coords.br.corner.bl.x + sinoffset,
. j0 J, V% [6 l5 p8 Ky: coords.br.corner.bl.y - cosoffset
};
};
}());
return canvas;
});
0 Y; ^/ O9 \7 c1 D8 u) I  ]puzzle.html代码如下：
复制代码代码如下:<!doctype html>
<html>
7 T4 t1 j- S% D5 t<head>
<meta http-equiv=content-type content=text/html; charset=utf-8>
% q3 d7 \: Y1 {3 _<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>
<body>
3 J5 U$ D" I, G0 j! _<div id='html5_puzzle'>
$ C* X& T: B/ v5 i- h<div id='puzzle_left'>
<div class='puzzle_column'>
<ul>
3 Z8 H) v) n2 x$ v( @<li><img src='small_img/1.jpg' data-index='1' /></li>
<li><img src='small_img/2.jpg' data-index='2' /></li>
<li><img src='small_img/3.jpg' data-index='3' /></li>
<li><img src='small_img/4.jpg' data-index='4' /></li>
<li><img src='small_img/5.jpg' data-index='5' /></li>
7 t+ o: }3 y1 V% ?9 B( Z4 h</ul>
+ h6 x  s% I3 S1 U& x5 ~, A</div>
, \6 X: G: z8 v0 P+ {<div class='puzzle_column'>
<ul>
<li><img src='small_img/6.jpg' data-index='6' /></li>
1 v' }; w8 i' |& n* n<li><img src='small_img/7.jpg' data-index='7' /></li>
<li><img src='small_img/8.jpg' data-index='8' /></li>
6 T0 N! E' O6 a$ N8 ^<li><img src='small_img/9.jpg' data-index='9' /></li>
6 K9 Z( u: t+ I: V' n& A+ I6 a" I<li><img src='small_img/10.jpg' data-index='10' /></li>
</ul>
) F4 _7 c5 C/ L! X; }+ y+ ~& P</div>
</div>
5 q" @- P/ w4 |8 L, h+ t<div id='puzzle_right'>
<div id='puzzle_canvas'>
<canvas id=canvid1></canvas>
% y: u' Z, L; ?, R" x<div id='canvas_menu'>
0 M8 K& \; \6 q( f0 p<a href='javascript:void(0)' id='photo_delete'>删除</a> <a
href='javascript:void(0)' id='photo_update'>更改图片</a>
% T; g; q$ L% }# F</div>
2 Y% h  r/ h, F, n$ u! ~</div>
<img id=bg src=big_img/1.jpg width='600' height='450' />
: }( I: K, B- @) R# S# k$ p/ ]</div>
9 m$ M9 o, J1 T! j6 B<div id='puzzle_bottom'>
<a href='javascript:void(0)' id='add_img'><span>添加图片</span><input
type=file multiple= id='fileimage'> </a> <a
3 {4 |. X3 H4 I) R1 K2 g3 f, ihref='javascript:void(0)' id='upload_btn'>上传</a> <a>点击图片可以旋转，拖拽,
缩放哦!</a>
</div>
</div>
<input type=file id='test'>
% @) ~6 g6 V# ]/ m<canvas id='test_canvas'></canvas>
( a' }* W: W2 E2 j+ j</body>
$ F' J( V; ^5 A" W9 t3 b( f</html>
7 h8 w4 ?5 e; ~, Z% Q4 _html5_puzzle.css代码如下：
复制代码代码如下:@charset utf-8;</p> <p>#html5_puzzle {
font-size: 0;
}</p> <p>canvas {
" G, R! t. J6 d. U$ ^background-color: transparent;
left: 0;
position: absolute;
8 m, T" [" Y, z# ^: T- `# z0 Q" Ftop: 0;
+ {9 q( {: Q" z5 p}</p> <p>.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
. j) |" G5 C8 ?# T* F3 sdisplay: inline-block;
}</p> <p>.puzzle_column li {
display: block;
' A6 v6 U, V/ j' B) x6 z. hmargin: 5px;
$ X) M( h+ ]! z1 j, N  Hborder: 1px solid #ffffff;
, K$ h& O, Q3 N% O3 T3 N- {% Z: c% E}</p> <p>.puzzle_column li:hover {
border: 1px solid #3b5998;
( y% Y/ M0 L/ @0 m  Wcursor: pointer;
# n0 |2 A6 Y# E2 k1 b}</p> <p>.puzzle_column {
  E% X  G& Y/ i& D+ F1 @font-size: 0;
, d8 U+ k/ O" c+ B9 q}</p> <p>#puzzle_left,#puzzle_right {
) f/ U! T: |- P5 }# }, m) }border: 1px solid #3b5998;
}</p> <p>#puzzle_right,#puzzle_bottom a {
font-size: 14px;
margin: 10px 0 0 10px;
6 g- p$ R1 U; x# ^  O}</p> <p>#puzzle_bottom {
, w' d' p) L( \" z6 I6 smargin: 5px 0;
; B! f1 Q' \; T  ?}</p> <p>#puzzle_canvas img {
# C' ^' s, B+ u$ }+ f}</p> <p>#puzzle_canvas {
overflow: hidden;
width: 600px;
5 u/ o3 |$ C5 x- h; N% |0 Jheight: 450px;
2 @: _+ d7 w; }- X7 ~4 y& c+ n9 |& Rposition: relative;
}</p> <p>#add_img input {
; f4 O: Q1 |' }9 U& Yposition: absolute;
( ^1 U( `' D  @7 B8 H4 _- Zfont-size: 100px;
- G1 Y" S* Z' b+ r0 \( E$ Zright: 0;
top: 0;
opacity: 0;
5 |# C5 j* I. O/ v6 I9 \- \- P}</p> <p>#add_img {
position: relative;
6 ]3 h& U3 p; p) m" t9 Q2 bdisplay: inline-block;
: E. l$ F/ K2 r# n/ ibackground: #3b5998;
border-radius: 4px;
" _- O: W% p4 J' s. cpadding: 4px 12px;
overflow: hidden;
color: #ffffff;
}</p> <p>#bg,#show_list {
display: none;
}</p> <p>#canvas_menu {
border: 1px solid red;
position: absolute;
" y" X2 t5 E! X: O: ez-index: 5;
! D' B& Y4 H4 htop: 0;
left: 0;
, R4 Z2 N, R; n( Tdisplay: none;
}</p> <p>#canvas_menu a {
display: inline-block;
}</p> <p>#test_canvas {
, q0 u& m+ U7 S0 wtop: 700px;
* i5 h1 v$ q. r. `3 q}
( m' M8 q( \# `html5_puzzle.js代码如下：
* A  I3 q+ G. [6 ]( p复制代码代码如下:require([ 'img_upload', '../puzzle/canvasimg', '../puzzle/canvaselement' ], function(
1 [4 q2 v& T" L% I# X* k; H3 Ns, canvasimg, canvaselement) {
var img=[];
var canvas = new canvaselement.element();
canvas.init('canvid1', {
width : 600,
height : 450
});
s('.puzzle_column img').on('click',function(e){
var index=this.getattribute('data-index');
* {/ M; @0 P% e; p$('bg').onload = function() {
var ctx=$('canvid1-canvas-background').getcontext('2d');
ctx.clearrect(0, 0,600,450);
% ]( ^  x7 U9 K8 kimg[0]=new canvasimg.img($('bg'), {});
) q2 p# W( Z: x: Q! V- wcanvas.setcanvasbackground(img[0]);
};
- z" r9 j! l/ n; `$('bg').setattribute('src','medium_img/'+index+'.jpg');
e.stoppropagation();
! d$ A9 n! F" t4 B});
8 h& C- Q0 J4 D( F. S4 I( f7 F# T) s1 Evar canvasdemo = function() {
9 Z) j1 h2 M3 y& \2 Dreturn {
4 C! }3 M& W/ C% Rinit : function() {
var img_list=dom.query('#puzzle_canvas img');
img[0]=new canvasimg.img($('bg'), {});
" V, e6 g# s0 o( i: Y3 |s.each(img_list,function(i,el){
el.setattribute('data-index',i);
img.push(new canvasimg.img(el, {}));
7 n& I) g6 R) D! Ncanvas.addimage(img[i+1]);
});
; x. g. N4 [4 W" Ncanvas.setcanvasbackground(img[0]);
this.cornersvisible = (this.cornersvisible) ? false : true;
- Z* }! X7 L& N% Z5 j' b2 |7 `. E7 Xthis.modifyimages(function(image) {
" t: X8 L! G2 {; o# Mimage.setcornersvisibility(this.cornersvisible);
});
/ \" g/ D# y% b' q},
* {5 l4 b# G8 c  hmodifyimages : function(fn) {
for ( var i =0, l = canvas._aimages.length; i < l; i += 1) {
# C$ F) s- z: s* }fn.call(this, canvas._aimages);
}
- K% R$ H, D' R2 \( Tcanvas.renderall(false,false);
s('#puzzle_canvas img').remove();
, e2 o% s$ n; |img = [];
3 ]. p; W3 Y9 T% }: t}
};
}();
function getcurimg(){
var oimg=canvas._prevtransform.target;
8 X9 N1 B4 d# E- V1 f6 D2 Afor(var i=0;i<canvas._aimages.length;i++){
7 v* {) U8 a: \+ I) B& P, |6 jif(canvas._aimages._oelement.src==oimg._oelement.src){
# B0 m( \: E7 q9 mreturn i;
( ~1 o) Q# _% H7 [: m}
}
1 S$ r% d8 q: H  M; r6 b  W}
, ^, k* E! x$ _- `0 E% J9 ys('#photo_delete').on('click',function(e){
; @0 w5 `- k  r& s; ?var i=getcurimg();
canvas._aimages.splice(i,1);
canvas.renderall(true,true);
$('canvas_menu').style.display=none;
});
) S8 V) p( r. @8 L9 P' ns('#photo_update').on('click',function(e){
( z) q, a5 J1 H$('test').click();
, ~; x  Q. C0 X- F8 Q});
s('#test').on('change',function(e){
var files = e.target.files || e.datatransfer.files;
6 e" t! c$ {. m1 f. ~var reader = new filereader();
reader.onload = (function() {
return function(e) {
. S$ F" n5 Q8 S3 c% @- tvar dataurl = e.target.result, canvas1 = document.queryselector('#test_canvas'), ctx = canvas1.getcontext('2d'), img = new image();
img.onload = function(e) {
# u- i  _7 u1 B1 iif(img.width>200||img.height>200){
- O7 s& F1 X; Q2 f$ m8 |& V, j& Fvar prop=math.min(200/img.width,200/img.height);
img.width=img.width*prop;
  [6 E9 D$ a; f! O; Timg.height=img.height*prop;
# j& Y7 E; I; Z: {+ T; M% @}
# h$ c# K" ]& B9 O/ x" u$ tcanvas1.width=img.width;
& x8 c+ Y- J; v. Ncanvas1.height=img.height;
3 o9 }8 t+ l- n8 A! G8 Jctx.drawimage(img, 0, 0, img.width, img.height);
s('#canvid1').html(s('#canvid1').html()+<img src='+canvas1.todataurl(image/jpeg)+'/>);
8 \) p7 b2 h; T  C: m$ Mvar t = window.settimeout(function() {
var i=getcurimg(),target=canvas._prevtransform.target;
console.log(target);
: A( S& q2 A1 u9 ]9 x7 v  x3 `canvas._aimages=new canvasimg.img(dom.query('#canvid1 img')[0], {
top:target.top,
& ?- `6 f( v0 q: p0 aleft:target.left,
: S% @9 Z7 {6 ]7 T& fscalex:target.scalex,
scaley:target.scaley,
1 _- a7 E$ t$ e# @( D( Q( ~angle:canvas.curangle
});
canvas.rendertop();
8 J# ~+ T2 o8 I3 i3 Ucleartimeout(t);
& }% T, }9 e! s7 ?s('#canvid1 img').remove();
},1000);
};
img.src = dataurl;
6 k9 D1 A; y, ?7 k, g$ [5 E3 v};
+ F) H) y: a# t7 }9 S' A})();
reader.readasdataurl(files[0]);
. |4 U8 [$ a& T) u! C& ^: j4 O});
4 X* t6 @3 v5 z1 I; H! Z( gs('#upload_btn').on('click',function(){
9 e6 F9 x( a7 {2 o7 R1 m/ @var imgdata = canvas.canvasto('jpeg');
4 M+ ~4 w, S" Q  {* hvar imgvalue = imgdata.substr(22);
s.ajax({
url : 'http://localhost/html5/upload1.php',
type : 'post',
* b) P/ l) q* k! X7 a/ \& sdata : {
imgdata : imgvalue,
" ?- s- ~( ?+ k/ Ifile_name :'mix_img.jpeg'
},
- Z, U" v/ a$ w- X# mdatatype : 'text',
% O" V; L1 e+ L  P# @+ x# b0 _) csuccess : function(data) {
# }$ v6 G  ]* n8 D0 r4 ~% zalert(s);
2 _. Q6 F2 j- d5 w3 U  h: G' N}
) Y% ^, X+ B# l3 L% k! z5 c});
7 F9 G) a1 R2 K. H2 u});
});
至于用html5 input读取图片，这很简单就不贴出来了。

5 N8 `; Z3 p  a) |/ q更多网页制作信息请查看： 网页制作

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

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

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

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

疯了.........

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

一骂人就激动....

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