html5版canvas自由拼圖實例_html5教學技巧

本文實例講述了html5版canvas自由拼圖的實作方法。分享給大家供大家參考。具體方法如下：

程式碼運作效果如下圖：

 

canvasElement.js程式碼如下：

複製程式碼

程式碼如下:

define('canvasElement', [ '../multi_upload/core' ], function(S) {
var Canvas = window.Canvas || {};
(function () {
Canvas.Element = function() {};
Canvas.Element.prototype.fillBackground = true;
Canvas.Element.prototype.showcorners = false;
Canvas.Element.prototype.photoorder = true; Canvas.Element.prototype.photoorder = true;
Canvas.Element.prototype.polaroid = false;
Canvas.Element.prototype._backgroundImg = null;
Canvas.Element.prototype._SelectSelector = null;
Canvas.Element.prototype. ;
Canvas.Element.prototype._oContext = null;
Canvas.Element.prototype._oElement = null;
Canvas.Element.prototype._oConfig = null;
Canvas_Element.prototype. = null;
Canvas.Element.prototype._prevTransform = null;
Canvas.Element.prototype.curAngle = null;
Canvas.Element.prototype.init = function(el, oConfig) {
if (el == '') {
return;
}
this._initElement(el);
this._initConfig(oConfig);
this._createCanvasBackground();
this._createContainer();
this._initEvents();
this._initCustomEvents();
};
Canvas.Element.prototype._initElement = function(el) { this.Element. _oElement = document.getElementById(el);
this._oContextTop = this._oElement.getContext('2d');
};
Canvas.Element.prototype._initCustomEvents = function(> Canvas.Element.prototype._initCustomEvents = function() this.onRotateMove = new Canvas.CustomEvent('onRotateMove');
this.onRotateComplete = new Canvas.CustomEvent('onRotateComplete');
this.onDragStart = new Canvas.CustomEvent('onDragStart');
this.onDragMove = new Canvas.CustomEvent('onDragMove');
this.onDragComplete = new Canvas.CustomEvent('onDragComplete');
};
Canvas.Element.to function(oConfig) {
this._oConfig = oConfig;
this._oElement.width = this._oConfig.width;
this._oElement.height = this._oConfig.height . .style.width = this._oConfig.width 'px';
this._oElement.style.height = this._oConfig.height 'px';
};
Canvas.Element.prototype._initEvents =totype._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);
});
S(this._oElement).on('mousemove ', function(e){
_this.onMouseMove(e);
});
};
Canvas.Element.prototype._createContainer = function() {
var canvasEl = document .createElement('canvas');
canvasEl.id = this._oElement.id '-canvas-container';
var 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.="this._oConfig.height"> this._oContextContainer = oContainer.getContext('2d');
};
Canvas.Element.prototype._createCanvasBackground = function() {
var canvasEl = document.createElement('canvas');
canvasEl.id = this._vasoElement.id'-canvasoElement.id'-canvasoElement.id'-canvasoElement.id'-canvasoper. -background';
var oBackground = this._oElement.parentNode.insertBefore(canvasEl, this._oElement);
oBackground.width = this._oConfig.width;
oBackground.width = this._oConfig.width;
oBackground.height.Background.o. ;
oBackground.style.width = this._oConfig.width 'px';
oBackground.style.height = this._oConfig.height 'px';
this._oContextBackground oBack.Context ');
};
Canvas.Element.prototype.setCanvasBackground = function(oImg) {
this._backgroundImg = oImg;
var originalImgSize = oImg.get oImg;
var originalImgSize = oImg.get oImgSize(); _oContextBackground.drawImage (oImg._oElement, 0, 0,originalImgSize.width,originalImgSize.height);
};
Canvas.Element.prototype.onMouseUp = function(e) { return;
}
if (this._currentTransform) {
this._currentTransform.target.setImageCoords();
}
target.setImageCoords();
}
ifif (this._currentTransform = null && this._currentTransform.action == "旋轉") {
this.onRotateComplete.fire(e);
} else if (this._currentTransform != null && this._currentTransform.action == "拖曳動") {
this.onDragComplete.fire(e);
}
this._currentTransform = null;
this._groupSelector = null;
this.renderTop();
};
Canvas.Element.prototype.onMouseDown = function(e) {
var mptotype.onMouseDown = function(e) {
var mp = this.findMousePosition(e);
if (this._currentTransform != null || this._aImages == null) {
return;
}
var oImg = this.findTargetImage(thismp. false);
if (!oImg) {
this._groupSelector = { ex: mp.ex, ey: mp.ey,
上: 0, 左邊: 0 };
}
上: 0, 左邊: 0 };
}
else {
var action = (!this.findTargetCorner(mp, oImg)) ? '拖曳' : '旋轉';
if (action == "旋轉") {
this.onRotateMove.fire(e);
} else if (action == "拖曳") {
this.onDragMove.fire(e);
}
this._prevTransform=this._currentTransform = {
目標: oImg,
操作: 動作,
scalcalc. ,
offsetX: mp.ex - oImg.left,
offsetY: mp.ey - oImg.top,
ex: mp.ex, ey: mp.ey,
left: oImg.left , top : oImg.top,
theta: oImg.theta
};
$('canvas_menu').style.transform='旋轉(' 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);
if (this._aImages == null) {
return;
}
if (this._groupSelector != null) {
this.this. left = mp.ex - this._groupSelector.ex;
this._groupSelector.top = mp.ey - this._groupSelector.ey;
this.renderTop();
}
else if ( this._currentTransform == null) {
var targetImg = this.findTargetImage(mp, true);
this.setCursor(mp, targetImg);
}
else { if(this. ._currentTransform.action == '旋轉') {
this.rotateImage(mp);
this.scaleImage(mp);
this.onRotateMove.fire(e);
}
this.onRotateMove.fire(e);
}
else {
this.translateImage(mp);
this.onDragMove.fire(e);
}
this.renderTop();
}
}
. 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";
};
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)
Math.pow(mp.ex - this._currentTransform.left, 2));
var curScalex= this._currentTransform.scalex * (curLen / lastLen);
var curScaley=this._currentTransform.target.scalex;
if(curScalex>0.7&&curScaley>0.7){
this._currentTransform.target.scalex =curScalex;
this._currentTransform.target.scalex =curScalex;
this.current.F.
}
};
Canvas.Element.prototype.rotateImage = function(mp) {
var lastAngle = Math.atan2(
this._currentTransform.ey - this._currentTransform.top,
this._currentTransform.ex - this._currentTransform.left
);

var curAngle = Math.atan2(
mp.ey - this._currentTransform.top, mp. ex - this._currentTransform.left
);
this._currentTransform.target.theta = (curAngle - lastAngle) this._currentTransform.theta;
this.curAngle=this._currentTransform. /3.14;
$('canvas_menu').style.transform='rotate(' this.curAngle 'deg)';
};
Canvas.Element.prototype.setCursor = function(mp, targetImg ) ) ) {
if (!targetImg) {
this._oElement.style.cursor = 'default';
} else { varcorner = this.findTargetCorner(mp, targetImg) ; if (!corner) {
this._oElement.style.cursor = 'default';
}
else
{
if(corner == 'tr') {
this._oElement.style.物件= 'ne-resize';
}
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';
}
else {
this._oElement.style.cursor = 'default';
}
}
}
};
Canvas.Element.prototype.addImage = function(oImg) {
if(S.isEmptyObject(this._aImages)) {
this._aImages = [];
}
this._aImages = [];
}
}
this._aImages.push(oImg);
this.renderAll(false,true);

};
Canvas.Element.prototype.renderAll = function(allOnTop,allowCorners) {
var containerCanvas = (allOnTop) ? this._oContextTop : this._oContextContainer;
this._oContextTop.clearRect(0,0,parseInt(this._oConfig.width), parseInt(this._oConfig.height)); if (allOnTop) {
var originalImgSize = this._backgroundImg.getOriginalSize(M未來); (this._backgroundImg._oElement, 0, 0, 原始ImgSize.width, 原始ImgSize.height);
}
for (var i = 0, l = this._aImages.length-1; i this.drawImageElement(containerCanvas, this._aImages[i],allowCorners);
}
this.drawImageElement(this._oContextTop, this._aImages[this._aImages.length-1],allowCorners);
};
Canvas.Element.prototype.renderTop = function(render). {
this._oContextTop.clearRect(0,0,parseInt(this._oConfig.width), parseInt(this._oConfig.height));
this.drawImageElement(this._oContextTop,this._aIb. _aImages.length-1],true);
if (this._groupSelector != null) {
this._oContextTop.fillStyle = "rgba(0, 0, 200, 0.5)";
this. _oContextTop.fillRect(
this._groupSelector.ex - ((this._groupSelector.left > 0) ?
0 : - this._groupor.left),
this._groupSelector.ey - ((this . _groupSelector.top > 0) ?
0 : - this._groupSelector.top),
Math.abs(this._groupSelector.left),
Math.abs(this._groupor.top)
);
this._oContextTop.中風幾何(
this._groupSelector.ex - ((this._groupSelector.left > 0) ?
0 : Math.abs(this._groupSelector.left)),
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)
);
}
};
勞動力.Element.prototype.drawImageElement = function(context, oImg,allowCorners) {
oImg.cornervisibility=allowCorners;
var offsetY = oImg.height / 2;
var offsetX = oImg.width / 2;
context.save();
conmg.translate(o. , oImg.top);
context.rotate(oImg.theta);
context.scale(oImg.scalex, oImg.scaley );
this.drawBorder(context, oImg, offsetX, offsetY);
var originalImgSize = oImg.getOriginalSize();
var PolaroidHeight = ((oImg.height - OriginalImgSize.height) - (oImg.寬度- 原始ImgSize.width))/2; oImg._oElement,
- 原始ImgSize.width/2,
((- 原始ImgSize.height)/2 - 寶麗來高度),
原始ImgSize.width,
原始ImgSmgSize.width,
原始ImgSmgSize。 height
);
if (oImg.cornervisibility) {
this.drawCorners(context, oImg, offsetX, offsetY);
}
context.restore();
Canvas.Element.prototype._getImageLines = function(oCoords) {
return {
頂線: {
o: oCoords.tl,
d: oCoords.tr
},
右線: {
o: oCoords.tr,
d: oCoords.br
},
底線: { o: oCoords.br,
d: oCoords.bl
},
leftline: {
o: oCoords.bl,
d: oCoords.tl
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
} ;
};
Canvas.Element.prototype.findTargetImage = function(mp, 懸停) {
for (var i = this._aImages.length-1; i >= 0; i -= 1 ) {
var iLines = this._getImageLines(this._aImages[i].oCoords);
var xpoints = this._findCrossPoints(mp, iLines);
if (xthis._findCrossPoints(mp, iLines);
if (x==s. != 0) {
var target = this._aImages[i];
if (!hovering) {
this._aImages.splice(i, 1);
this._aImages.push(aImages.push(aImages.push(aImages.push(目標);
}
回傳目標;
}
}
回傳false;
};
Canvas.Element.prototype._findCrossPoints = function(mp, oCoords) {
var b1, b2, a1, a2, xi, yi;
var xcount = 0;
var iLine = null;
for (lineKey in oCoords) {
iLine = oCoords[lineKey];
if ((iLine.o.y 繼續;
}
if ((iLine.o.y >= mp.ey) && (iLine.d.y >= mp.ey)) {
繼續;
}
if ((iLine.. o.x == iLine.d.x) && (iLine.o.x >= mp.ex)) {
xi = iLine.o.x;
yi = mp.ey;
}
否則{
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);
yi = a1 b1*xi;
}
if (xi >= mp.ex) {
xcount = 1;
}
if (xcount == 2) {
break;
}
}
return xcount;
};
Canvas.Element.prototype.findTargetCorner = function(mp, oImg) {
var xpoints = null;
varcorns = ['tl' ,' tr','br','bl'];
for (var i in oImg.oCoords) {
xpoints = this._findCrossPoints(mp, this._getImageLines(oImg.oCoords[i].corner) ) );
if (xpoints % 2 == 1 && xpoints != 0) {
return i;
}
}
return false;
};
}
return false;
};
}
return false;
}; } return false; }; } return false; }; } return false; }; } return false; }; } return false; }; } return 錯誤> 最後。 Element.prototype.findMousePosition = function(e) { varparentNode = (e.srcElement) ? e.srcElement.parentNode : e.target.parentNode; var isSafari2 = !S.support.ie&&!S.support.firefox; varscrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; varscrollTop = document.documentElement.scrollTop || document.body.scrollTop; var safariOffsetLeft = (isSafari2) ? e.target.ownerDocument.body.offsetLeft scrollLeft : 0; var safariOffsetTop = (isSafari2) ? e.target.ownerDocument.body.offsetTopscrollTop : 0; return { ex: e.clientXscrollLeft - ParentNode.offsetLeft - safariOffsetLeft, ey: e.opclissroll. screenX: e.screenX, screenY: e.screenY }; }; Canvas.Element.prototype.drawBorder = function(context, oImg, offsetX, offsetY) { context.fillStyle = 'rgba(0, 0, 0, .3)'; context.fillRect(-2 - offsetX, -2 - offsetY, oImg.width (2 *outlinewidth), oImg.height (2 *outlinewidth)); context.fillStyle = '#fff'; context.fillRect(-offsetX, -offsetY, oImg.width, oImg.height); }; 🎜> Canvas.Element.prototype.drawCorners = function(context, oImg, offsetX, offsetY) { context.fillStyle = "rgba(0, 200, 50, 0.5)"; context context. fillRect(-offsetX, -offsetY, oImg.cornersize, oImg.cornersize); context.fillRect(oImg.width - offsetX - oImg.cornersize, -offsetY, oImg.cornersize, oxImg.corsize, o); .fillRect(-offsetX, oImg.height - offsetY - oImg.cornersize, oImg.cornersize, oImg.cornersize); context.fillRect(oImg.width - offsetX - oImg o.corsize, omg. cornersize, oImg.cornersize, oImg.cornersize); }; Canvas.Element.prototype.clearCorners = function(context, oImg, offsetX, offsetY) { context.clearRect(-setoffsetX. ) ) , 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);
context.clearRect(oImg.cornersize, oImg.cornersize);
context.clearRect(oImg.width - offsetX - oImg. .cornersize, oImg.cornersize, oImg.cornersize);
context.restore();
};
Canvas.Element.prototype.canvasTo = function(format) {
this.renderAll(true. ,false);
var containerCanvas =this._oContextTop;
for (var i = 0, l = this._aImages.length; i var offsetY = this. _aImages[i].height / 2;
var offsetX = this._aImages[i].width / 2;
this.clearCorners(containerCanvas, this._aImages[i], this.clearCorners(containerCanvas, this._aImages[i], this.clearCorners(containerCanvas, this._aImages[i], this.clearCorners(containerCanvas, this._aImages[i], this.clearCorners(containerCanvas, this._aImages[i], this.clearCorners(containerCanvas, this._aImages[i], this.clearCorners(containerCanvas, this._aImages[i], this.clearCorners(containerCanvas, this._aImages[i], this.． }
if (format == 'jpeg' || format == 'png') {
return this._oElement.toDataURL('image/' format);
}
};
Canvas.CustomEvent = function(type) {
this.type = type;
this.scope = null;
this.handler = null;
var self = this
;
; this.fire = function(e) {
if(this.handler != null) {
self.handler.call(self.scope, e);
}
};
};
}());
回傳;

});

canvasImg.js程式碼如下：

複製程式碼

程式碼如下：

define('canvasImg', [ '../multi_upload/core' ], function(S) {
var Canvas = window.Canvas || {};
(function () {
Canvas.Img = function(el, oConfig) {
this._initElement(el);
this._initConfig(oConfig);
this.setImageCoords();
};
this.setImageCoords();
};
畫布。 Img.CSS_CANVAS = "canvas-img";
var DEFAULT_CONFIG = {
"TOP": {
key: "top",
value: 10
},
},
"LEFTFT ": {
鍵: "左",
值: 10
},
"角度": {
鍵: "角度",
值: 0
} ,
"THETA": {
鍵: "theta",
值: 0
},
"SCALE-X": {
鍵: "scalex",
值: 1
},
"SCALE-Y": {
鍵: "scaley",
值: 1
},
"CORNERSIZE": {
key: "cornersize",
value:10
},
"BORDERWIDTH": {
key: "borderwidth",
value: 10
} 鍵: "拍立得高度",
值: 40
},
"隨機位置": {
鍵: "隨機位置",
值: true
}
};
Canvas.Img.prototype._oElement = null;
Canvas.Img.prototype.top = null;
Canvas.Img.prototype.left = null;
Canvas.Img .prototype.maxwidth = null;
Canvas.Img.prototype.maxheight = null;
Canvas.Img.prototype.oCoords = null;
CanvasImg.prototype.Img.prototype.le> ;
畫布.Img.prototype.theta = null;
Canvas.Img.prototype.scalex = null;
Canvas.Img.prototype.scaley = null;
Canvas.Img.prototype.cornersize = null;
Canvas.Img.prototype.polaroidheight = null;
Canvas.Img.prototype.randomposition = null;
Canvas.Img.prototype.selected = false; Canvas.Img.totype .bordervisibility = false;
Canvas.Img.prototype.cornervisibility = false;
Canvas.Img.prototype._initElement = function(el) {
this._oElement = el; Canvas.Img. prototype._initConfig = function(oConfig) {
var sKey;
for (sKey in DEFAULT_CONFIG) {
var defaultKey = DEFAULT_CONFIG[sKeyd; .hasOwnProperty(defaultKey) ) { // = !(oConfig 中的defaultKey)
this[defaultKey] = DEFAULT_CONFIG[sKey].value;
}
else {
this[ [defaultKey];
}
}
if (this.bordervisibility) {
this.currentBorder = this.borderwidth;
}
else { this.currentB ;
}
var normalizedSize = this.getNormalizedSize(this._oElement, parseInt(oConfig.maxwidth), parseInt(oConfig.maxheight));
this._oElement.wid); this._oElement.height = normalizedSize.height;
this.width = normalizedSize.width (2 * this.currentBorder);
this.height = normalizedSize.height (2 * this.currentBorder (this.randomposition) {
this._setRandomProperties(oConfig);
}
this.theta = this.angle * (Math.PI/180);
};
CanvasImgImg .prototype.getNormalizedSize = 函數(oImg, maxwidth, maxheight) {
if (maxheight && maxwidth && (oImg.width >; oImg.height && (oImg.width / oImg.height) normalizedWidth = Math.floor((oImg.width * maxheight) / oImg.height);
normalizedHeight = maxheight;
}
else if (Fmaxheight &ight; .width) || (oImg.height > oImg.width) || (oImg.height > maxheight))) {
標準化寬度= Math.floor((oImg.width * maxheight) ) / oImg.height);
normalizedHeight = maxheight;
}
else if (maxwidth && (maxwidth normalizedHeight = Math.floor(oImg.height);Imgwid.
標準化寬度= maxwidth;
}
else {
標準化寬度= oImg.width;
標準化高度= oImg.height;
}
return { 寬度：標準化寬度，高度：標準化高度}
},
Canvas.Img.prototype.getOriginalSize = function() {
return { 寬度：this._oElement.width,高度： this._oElement.height }
};
Canvas.Img.prototype._setRandomProperties = function(oConfig) {
if (oConfig.angle == null) {
this.angle = (Math.random() * 90);
}
if (oConfig.top == null) {
this.top = this.height / 2 Math.random() * 450;
}
if (oConfig.left == null) {
this.left = this.width / 2 Math.random() * 600 ;
}
};
Canvas.Img.prototype.setCornersVisibility = function(visible) {
this.cornervisibility = 可見;
};
Canvas.cornervisibility = 可見;
};
Canvas.Img.prototypeIm. = function() {
this.left = parseInt(this.left);
this.top = parseInt(this.top);
this.currentWidth = parseInt(this.width) * this.scalex ;
this.currentHeight = parseInt(this.height) * this.scalex;
this._hypotenuse = Math.sqrt(Math.pow(this.currentWidth / 2, 2) Math.pow(this.currentHeight /currentHeight 2, 2));
this._angle = Math.atan(this.currentHeight / this.currentWidth);
var offsetX = Math.cos(this._angle this.theta) * this._hypotenuse;
var offsetY = Math.sin(this._angle this.theta) * this._hypotenuse;
var theta = this.theta;
var sinTh = Math.sin(theta);
var cosTh = Math .cos(theta);
var tl = {
x: this.left - offsetX,
y: this.top - offsetY
};
var tr = {
x : tl.x (this.currentWidth * cosTh),
y: tl.y (this.currentWidth * sinTh)
};
var br = {
x: tr.x - (this .currentHeight * sinTh),
y: tr.y (this.currentHeight * cosTh)
};
var bl = {
x: tl.x - (this.currentHeight * sinTh),
x: tl.x - (this.currentHeight * sinTh),
y: tl.y (this.currentHeight * cosTh)
};
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;
var cosOffsize * this.scalex * Math.cos(theta);
var sinOffset = this.cornersize * this.scalex * Math.sin(theta);
coords.tl.corner = {
tl: {
coords.tl.corner = {
tl: {
x: coords.tl.x,
y: coords.tl.y
},
tr: {
x: coords.tl.x cosOffset,
y: coords.tl .y sinOffset
},
bl: {
x: coords.tl.x - sinOffset,
y: coords.tl.y cosOffset
}
}; coords.tl.corner.br = {
x: coords.tl.corner.tr.x - sinOffset,
y: coords.tl.corner.tr.y cosOffset
};

coords.tr.corner = {
tl: {
x: coords.tr.x - cosOffset,
y: coords.tr.y - sinOffset
},
tr: {
x: coords.tr.x,
y: coords.tr.y
},
br: {
x: coords.tr.x - sinOffset,
yy : coords.tr.y cosOffset
}
};
coords.tr.corner.bl = {
x: coords.tr.corner.tl.x - sinOffset,
y: coords.tr.corner.tl.y cosOffset
};

coords.bl.corner = {
tl: {
x: coords.bl.x sinOffset,
y },
bl: {
x: coords.bl.x,
y: coords.bl.y
},
br: {
x: coords.bl.x cosOffset,
y: coords.bl.y sinOffset
}
};
coords.bl.corner.tr = {
};
coords.bl.corner.tr = {
x: coords.bl.corner.br.x sinOffset,
y: coords.bl.corner.br.y - cosOffset
};

coords.br.corner = {
tr: {
x: coords.br.x sinOffset,
y: coords.br.y - cosOffset
},
bl: {
x: coords.br.x - cosOffset,
y: coords.br.y - sinOffset
},
br: {
x: coords.br.x,
y: coords.br.y
}
};
coords.br.corner.tl = {
x: coords.br.corner.bl.x sinOffset,

y: coords.br.corner.bl.y - cosOffset } ;

};

}());

回勞動;
});

puzzle.html程式碼如下：

複製程式碼程式碼如下：

在此插入標題

• 


• 


• 
;

• 

;

• 


• 


• 


• 


• 

刪除; href='javascript:void(0)' id='photo_update'>更改圖片

新增圖片 type="file" multiple="" id ='檔案圖片'> href='javascript:void(0)' id='upload_btn'>上傳; 點選圖片可以旋轉，拖曳，
噢縮放！

html5_puzzle.css程式碼如下：

複製程式碼

程式碼如下：

@CHARSET "UTF-8";

#html5_puzzle {
字體大小: 0;
}

畫布{
背景顏色：透明；
左：0；
位置：絕對；
頂部：0；
}

.puzzle_column,#puzzle_left,#puzzle_right,#add_img {
顯示：內聯區塊;
}

.puzzle_column li {
顯示：區塊;
邊距：5px;
邊框：1px實體#ffffff;
}

.puzzle_column li:hover {
邊框：1px實體#3B5998;
遊標：指標;
}

.puzzle_column {
字體大小：0;
}

;

#puzzle_left,#puzzle_right {
邊框：1px實體#3B5998;
}

#puzzle_right,#puzzle_bottom a {
字體大小: 14px;
邊距: 10px 0 0 10px;
}

#puzzle_bottom {
邊距: 5px 0;
}

#puzzle_canvas img {

}

#puzzle_canvas {
溢出：隱藏；
寬度：600px；
高度：450px；
位置：相對；
}

#add_img input {
位置：絕對;
字體大小：100px;
右：0;
上：0;
不透明度：0；
}< ; /p>

#add_img {
位置：相對；
顯示：內聯塊；
背景：#3B5998；
邊框半徑：4px；
填充：4px 12px；
溢出：隱藏；
顏色：#ffffff;
}

#bg,#show_list {
顯示：無;
}

#canvas_menu {
邊框：1px純紅色；
位置：絕對；
z索引：5；
頂部：0；
左：0；
顯示：無;
}

#canvas_menu a {
display: inline-block;
}

#test_canvas {
上：700px;
}

html5_puzzle.js程式碼如下：

複製程式碼

程式碼如下：

require([ 'img_upload', '../puzzle/canvasImg', '../puzzle/canvasElement' ], function(
S, canvasImg, canvasElement) {
var img=[];
var canvas = new canvasElement.Element();
canvas.init('canvid1', {
寬度: 600,
高度: 450
});
S(' .puzzle_column img').on('click',function(e){
var index=this.getAttribute('data-index');
$('bg').onload = function() {
var ctx=$('canvid1-canvas-background').getContext('2d');
ctx.clearRect(0, 0,600,450);
img[0]=new canvasImg.Img($ ('bg'), {});
canvas.setCanvasBackground(img[0]);
};
$('bg').setAttribute('src','medium_img/'索引 ' .jpg');
e.stopPropagation();
});
var CanvasDemo = function() {
return {
init : function() {
var img_list= dom.query('#puzzle_canvas img');
img[0]=new canvasImg.Img($('bg'), {});
S.each(img_list,function(i,el) {
el.setAttribute('data-index',i);
img.push(new canvasImg.Img(el, {}));
canvas.addImage(img[i 1]);
});
canvas.setCanvasBackground(img[0]);
this.cornersvisible = (this.cornersvisible) ? false : true;
this.modifyImages(function(image) {
image.setCornersVisibility(this.cornersvisible);
});
fn,
editImages : function },
for ( var i =0, l = canvas._aImages.length; i fn.call(this, canvas._aImages[i]);
}
canvas.renderAll(false,false);
S('#puzzle_canvas img').remove();
img = [];
}
};
}();
function getCurImg(){
var oImg=canvas._prevTransform.target;
for(var i=0;i if(canvas._aImages.length;i ){
if(canvas._aImages. i]._oElement.src==oImg._oElement.src){
return i;
}
}
}
S('#photo_delete').on('click', function(e){
var i=getCurImg();
canvas._aImages.splice(i,1);
canvas.renderAll(true,true);
$('canvas_menu') .style.display="none";
});
S('#photo_update').on('click',function(e){
$('test').click() ;
});
S('#test').on('change',function(e){
var files = e.target.files || e.dataTransfer.files;
var reader = new FileReader();
reader.onload = (function() {
return function(e) {
var dataURL = e.target.result, canvas1 = document.querySelector('# test_canvas'), ctx = canvas1.getContext('2d'), img = new Image();
img.onload = function(e) {
if(img.width> ;200||img.height >200){
var prop=Math.min(200/img.width,200/img.height);
img.width=img.width*prop;
img.height=img.height *prop;
}
canvas1.width=img.width;
canvas1.height=img.height;
ctx.drawImage(img, 0, 0, img .width, img.height) ;
S('#canvid1').html(S('#canvid1').html() "");
var t = window.setTimeout(function() {
var i=getCurImg(),target=canvas._prevTransform.target;
console.log(target);
canvas._aImages[i]=new canvasImg.Img(dom.query('#canvid1 img')[0], {
top:target.top,
left:target.left,
scalex:target.scalex,
scaley:target.scaley,
angle:canvas.curAngle
});
canvas.renderTop();
clearTimeout(t);
;
;
;
;
;
;
;
;
;
;
;
;
;
; },1000);
};
img.src = dataURL;
};
})();
reader.readAsDataURL(files[0]);
});
S('#upload_btn').on('click',function(){
var imgData = canvas.canvasTo('jpeg ) ) '); var imgValue = imgData.substr(22); S.ajax({ url : 'http://localhost/html5/upload1.php', 類型: ' POST ', data : { imgData : imgValue, file_name :'mix_img.jpeg' }, dataType : 'text', success : function(pccess) { 警報("s"); } });});
});

至於用html5 input讀取圖片，很簡單就不貼出來了。

希望本文所述對大家的HTML5程式設計有所幫助。