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.photoborder = true;
Canvas.Element.prototype.polaroid = false;
Canvas.Element.prototype._backgroundImg = null;
Canvas.Element.prototype._groupSelector = null;
Canvas.Element.prototype._aImages = null ;
Canvas.Element.prototype._oContext = null;
Canvas.Element.prototype._oElement = null;
Canvas.Element.prototype._oConfig = null;
Canvas.Element.prototype._currentTransform = null;
Canvas.Element.prototype._prevTransform = null;
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. _oElement = document.getElementById(el);
this._oContextTop = this._oElement.getContext('2d');
};
Canvas.Element.prototype._initCustomEvents = function() {
this.onRotateStart = new Canvas.CustomEvent('onRotateStart');
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.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';
};
Canvas.Element.prototype._initEvents = function() {
var _this=this;
S(this._oElement).on('mousedown',function(e){
_this.onMouseDown(e);
});
S(this._oElement).on( 'mouseup', function(e){
_this.onMouseUp(e);
});
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.style.height = this._oConfig.height 'px';
this._oContextContainer = oContainer.getContext('2d');
};
Canvas.Element.prototype._createCanvasBackground = function() {
var canvasEl = document.createElement('canvas');
canvasEl.id = this._oElement.id '-canvas -background';
var oBackground = this._oElement.parentNode.insertBefore(canvasEl, this._oElement);
oBackground.width = this._oConfig.width;
oBackground.height = this._oConfig.height ;
oBackground.style.width = this._oConfig.width 'px';
oBackground.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);
};
Canvas.Element.prototype.onMouseUp = function(e) {
if (this._aImages == null ) {
return;
}
if (this._currentTransform) {
this._currentTransform.target.setImageCoords();
}
if (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 mp = this.findMousePosition(e);
if (this._currentTransform != null || this._aImages == null) {
return;
}
var oImg = this.findTargetImage(mp, false);
if (!oImg) {
this._groupSelector = { ex: mp.ex, ey: mp.ey,
顶部: 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,
操作: 动作,
scalex: oImg.scalex,
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._groupSelector. 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);
}
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.scaley = curScaley;
}
};
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.target.theta*180 /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.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));
containerCanvas.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, 原始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() {
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) {
this._oContextTop.fillStyle = "rgba(0, 0, 200, 0.5)";
this. _oContextTop.fillRect(
this._groupSelector.ex - ((this._groupSelector.left > 0) ?
0 : - this._groupSelector.left),
this._groupSelector.ey - ((this ._groupSelector.top > 0) ?
0 : - this._groupSelector.top),
Math.abs(this._groupSelector.left),
Math.abs(this._groupSelector.top)
);
this._oContextTop.中风矩形(
this._groupSelector.ex - ((this._groupSelector.left > 0) ?
0 : Math.abs(this._groupSelector.left)),
this._groupSelector.ey - ((this._groupSelector.top > 0) ?
0 : Math.abs(this._groupSelector) .top)),
Math.abs(this._groupSelector.left),
Math.abs(this._groupSelector.top)
);
}
};
画布.Element.prototype.drawImageElement = function(context, oImg,allowCorners) {
oImg.cornervisibility=allowCorners;
var offsetY = oImg.height / 2;
var offsetX = oImg.width / 2;
context.save();
context.translate(oImg.left, 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;
context.drawImage(
oImg._oElement,
- 原始ImgSize.width/2,
((- 原始ImgSize.height)/2 - 宝丽来高度),
原始ImgSize.width,
原始ImgSize.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 (xpoints % 2 == 1 && xpoints != 0) {
var target = this._aImages[i];
if (!hovering) {
this._aImages.splice(i, 1);
this._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;
};
画布.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.clientYscrollTop -parentNode.offsetTop - safariOffsetTop,
screenX: e.screenX,
screenY: e.screenY
};
};
Canvas.Element.prototype.drawBorder = function(context, oImg, offsetX, offsetY) {
varoutlinewidth = 2;
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. 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);
context.fillRect(oImg.width - offsetX - oImg.cornersize, oImg.height - offsetY - oImg. cornersize, oImg.cornersize, oImg.cornersize);
};
Canvas.Element.prototype.clearCorners = function(context, oImg, offsetX, offsetY) {
context.clearRect(-offsetX, -offsetY) , oImg.cornersize, oImg.cornersize);
context.clearRect(oImg.width - offsetX - oImg.cornersize, -offsetY, oImg.cornersize, oImg.cornersize);
context.clearRect(-offsetX, oImg.height - offsetY - oImg.cornersize, oImg.cornersize, oImg.cornersize);
context.clearRect(oImg.width - offsetX - oImg.cornersize, oImg.height - offsetY - 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], offsetX, offsetY);
}
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();
};
画布。 Img.CSS_CANVAS = "canvas-img";
var DEFAULT_CONFIG = {
"TOP": {
key: "top",
value: 10
},
"LEFT ": {
键: "左",
值: 10
},
"角度": {
键: "角度",
值: 0
} ,
"THETA": {
键: "theta",
值: 0
},
"SCALE-X": {
键: "scalex",
值: 1
},
"SCALE-Y": {
键: "scaley",
值: 1
},
"CORNERSIZE": {
key: "cornersize",
value:10
},
"BORDERWIDTH": {
key: "borderwidth",
value: 10
},
"POLAROIDHEIGHT ": {
键: "拍立得高度",
值: 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;
Canvas.Img.prototype.angle = null;
画布.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.prototype.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[sKey].key;
if (!oConfig.hasOwnProperty(defaultKey) ) { // = !(oConfig 中的defaultKey)
this[defaultKey] = DEFAULT_CONFIG[sKey].value;
}
else {
this[defaultKey] = oConfig[defaultKey];
}
}
if (this.bordervisibility) {
this.currentBorder = this.borderwidth;
}
else {
this.currentBorder = 0;
}
var normalizedSize = this.getNormalizedSize(this._oElement, parseInt(oConfig.maxwidth), parseInt(oConfig.maxheight));
this._oElement.width = normalizedSize.width;
this._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 = 函数(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 (maxheight && ( (oImg.height == oImg.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 * maxwidth) / oImg.width);
标准化宽度 = 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.Img.prototype.setImageCoords = 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 / 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),
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 cosOffset = this.cornersize * this.scalex * Math.cos(theta);
var sinOffset = this.cornersize * this.scalex * Math.sin(theta);
coords.tl.corner = {
tl: {
x: coords.tl.x,
y: coords.tl.y
},
tr: {
x: coords.tl.x cosOffset,
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,
y : 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 : coords.bl.y - cosOffset
},
bl: {
x: coords.bl.x,
y: coords.bl.y
},
br: {
x: coords.bl.x cosOffset,
y: coords.bl.y sinOffset
}
};
coords.bl.corner.tr = {
x: coords.bl.corner.br.x sinOffset,
y: coords.bl.corner.br.y - cosOffset
};

coords.br.corner = {
tr: {
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);
});
},
editImages : function(fn) {
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[ 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);
S('#canvid1 img').remove();
},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',
type : 'POST ',
data : {
imgData : imgValue,
file_name :'mix_img.jpeg'
},
dataType : 'text',
success : function(data) {
alert("s");
}
});
});
});

至于用html5 input读取图片，这很简单就不贴出来了。

希望本文所述对大家的HTML5程序设计有所帮助。