自在拼图?
自在拼图是美图秀秀中的一个功用，它能够让用户在背景图片上插进去本身的图片，并能够对插进去图片扭转，拖拽，缩放。固然，假如用户对插进去的图片不满意，能够用另一张图片替代选中的图片，或许删除选中图片。
结果
本屌之前用actionscript完成过，拜见仿美图秀秀的自在拼图（注重内里基本上没代码申明）.
这里用html5的canvas完成。
这个是本屌博客园客岁一篇文章的结果，内容也是说的这个，不过很无耻的只贴了代码，没有任何申明。
下面的是录制的结果视频
http://v.youku.com/v_show/id_XMTM3MTgzMzIyOA==.html
规划
<div id='html5_puzzle' ms-controller='html5_puzzle' class='ms-controller'>
<div id='puzzle_model'>
<ul>
<li>
<img src='imgs/small_img/1.jpg'>
...
</li>
</ul>
</div
><div id='puzzle_canvas'>
<div id='canvas_inner'>
<canvas id="main_canvas"></canvas>
<img class='middleware_img'>
<img class='middleware_img'>
...
<div id='canvas_menu'>
<a href='javascript:void(0)' id='puzzle_delete'>删除</a>
<a href='javascript:void(0)' id='puzzle_update'>变动图片</a>
</div>
<img id="puzzle_bg" src="imgs/1.jpg" width='548' height='411'/>
<canvas id='canvas_middleware'></canvas>
</div>
</div>
<div id='puzzle_control'>
<a href="javascript:;" id="puzzle_add">
<span>增加</span>
<input type="file" multiple="" id='puzzle_add_input'>
</a
><a id='puzzle_upload'>上传</a>
</div>
</div>#main_canvas是主要的事情地区.middleware_img是多少<img>,<input>读取从表面选中的多少图片数据，将数据以Base64编码，顺次写入<img>的src属性。这些<img>背面将会被看成参数，传给canvas#canvas_middleware是代办。<input>读取的数据由#canvas_middleware挪用toDataURL()要领编码成Base64情势#puzzle_bg和.middleware_img作用差不多，只不过这里是将背景图片的src传给它。它会将背景图片数据传给canvas
读取选中图片
var img_upload_instance=new img_upload({
add_btn:'puzzle_add',
onSelect:onSelect//读取图片回调
});define("html5_imgupload",["avalon-min"], function(avalon){
var html5_img_upload=function(options){
this.init(options);
}
html5_img_upload.prototype = {
init : function(options) {
//假如有自定义属性，掩盖默许属性
avalon.mix(html5_img_upload.prototype,options);
this.init_events();
},
init_events : function() {
var _this=this;
avalon.bind($(this.add_btn),'change',function(e) {
_this.get_files(e);
});
},
file_filter:[],
ori_images:[],
add_btn:null,
upload_btn:null,
max_upload_num:9,
onSelect:function(file_filter){},
_start:0,//已读取图片数目
filter:function(files) {
var arrFiles=[];
for (var i=0,file;file=files[i];i++){
if(this._start+i<this.max_upload_num){
if(file.type.indexOf("image")==0||(!file.type&&/\.(?:jpg|png|gif)$/.
test(file.name)))
arrFiles.push(file);
else {
alert('文件'+file.name+'不是图片');
}
}else{
alert('一次最多能上传'+this.max_upload_num+'张图片');
break;
}
}
return arrFiles;
},
get_files:function(e) {
var files=e.target.files||e.dataTransfer.files;
this.file_filter=this.file_filter.concat(this.filter(files));
this.onSelect(this.file_filter);
},
destroy_hook:function(){},
_destroy:function(){
this.file_filter=[];
$(this.add_btn).value='';
this.ori_images=[];
this._start=0;
this.destroy_hook();
},
upload:function(i,file_filter){}
};
return html5_img_upload;
});自定义图片拔取回调
<div id='puzzle_canvas'>
<div id='canvas_inner'>
<canvas id="main_canvas"></canvas>
<img ms-repeat='middleware_list' ms-attr-src='el' class='middleware_img'>
...
</div>
</div> function onSelect(file_filter){
for(var i=this._start,len=file_filter.length;i<len;i++) {//遍历选中图片
var reader=new FileReader();
reader.onload=(function(i){//图片读取的回调
return function(e){
var dataURL=e.target.result,canvas_middleware=$('canvas_middleware'),
ctx=canvas_middleware.getContext('2d'),img=new Image();
img.onload = function() {//图片加载的回调
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;
}
//设置中转canvas尺寸
canvas_middleware.width=img.width;
canvas_middleware.height=img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
//将读取图片转换成base64,写入.middleware_list的src
html5_puzzle.middleware_list.push(canvas_middleware.
toDataURL("image/jpeg"));
if(!file_filter[i+1]){
//图片耽误加载到canvas,由于canvas有个读取历程，然则没有回调
var t = window.setTimeout(function() {
canvas_puzzle.init();
clearTimeout(t);
}, 1000);
}
};
img.src = dataURL;
};
delete reader;
})(i);
reader.readAsDataURL(file_filter[i]);//最先读取图片
}
this._start=0;
img_upload_instance._destroy();
}canvas初始化
var canvas = new canvasElement.Element();
canvas.init('main_canvas', {
width : canvas_w,
height : canvas_h
}); 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;
avalon.bind(this._oElement,'mousedown',function(e){
_this.onMouseDown(e);
});
avalon.bind(this._oElement,'mouseup',function(e){
_this.onMouseUp(e);
});
avalon.bind(this._oElement,'mousemove',function(e){
_this.onMouseMove(e);
});
};
Canvas.Element.prototype._createContainer = function() {
var canvasEl = document.createElement('canvas');
canvasEl.id = this._oElement.id + '-canvas-container';
...
this._oContextContainer = oContainer.getContext('2d');
};
Canvas.Element.prototype._createCanvasBackground = function() {
var canvasEl = document.createElement('canvas');
canvasEl.id = this._oElement.id + '-canvas-background';
...
this._oContextBackground = oBackground.getContext('2d');
};能够看到初始化历程当中屡次建立<canvas>
main_canvas-background-canvas绘制背景图片main_canvas-container-canvas绘制除当前操纵的图片外的其他图片main_canvas绘制当前操纵的图片
从上到下：main_canvas->main_canvas-container-canvas->main_canvas-background-canvas
canvas context:
main_canvas->_oContextTopmain_canvas-container-canvas->_oContextContainermain_canvas-background-canvas->_oContextBackground
这下就看到canvas自在拼图的原理了，原来是3个canvas高低堆叠起来，操纵的时刻对差别的canvas举行差别目标的绘制。
canvas绘制图片
接着图片拔取完成后canvas_puzzle.init()
var canvas_img=[];
...
var canvas_puzzle= function() {
return {
init : function() {
var img_list=document.querySelectorAll('.middleware_img');
//第一张作为背景图片
canvas_img[0]=new canvasImg.Img($('puzzle_bg'), {});
avalon.each(img_list,function(i,el){
canvas_img.push(new canvasImg.Img(el, {}));
canvas.addImage(canvas_img[i+1]);
});
canvas.setCanvasBackground(canvas_img[0]);
...
}
};
}();canvasImg.Img是canvas对图片的封装.第一个参数是<img>,前面提到的#puzzle_bg和.middleware_img就是作为第一个参数传入canvasImg.Img.第二个参数用来自定义图片的一些属性，比方边框宽度，4个角的大小等，假如定义的话会掩盖默许值。canvasImg.Img封装图片后的结果
canvas.addImage(canvas_img[i+1])将canvas对除背景图片外的图片的封装绘制到canvas上
Canvas.Element.prototype.addImage = function(oImg) {
if(isEmptyObject(this._aImages))
this._aImages = [];
this._aImages.push(oImg);
this.renderAll(false,true);
};_aImages是保留canvas图片封装的数组，renderAll()要领很主要，背面会说到。
canvas.setCanvasBackground(canvas_img[0])将背景图片绘制到canvas
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.Img.prototype.getOriginalSize = function() {//取得canvas尺寸
return { width: this._oElement.width, height: this._oElement.height }
};canvas事宜操纵
mousedown
Canvas.Element.prototype.onMouseDown = function(e) {
$('canvas_menu').style.display="none";
var mp = this.findMousePosition(e);//鼠标相对位置
if (this._currentTransform != null || this._aImages == null) {
return;
}
var oImg = this.findTargetImage(mp, false);//猎取目标图片
//事宜触发位置是不是是在4个角上
var action = (!this.findTargetCorner(mp, oImg)) ? 'drag' : 'rotate';
if (action == "rotate") {
this.onRotateMove.fire(e);//触发自定义事宜
} else if (action == "drag") {
this.onDragMove.fire(e);
}
this._prevTransform=this._currentTransform = {
target: oImg,
action: action,
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='rotate('+oImg.theta*180/3.14+'deg)';
$('canvas_menu').style.left=oImg.left+"px";
$('canvas_menu').style.top=oImg.top+"px";
this.renderAll(false,false);
};this._prevTransform保留当前目标图片状况，替代图片时会用到这个变量renderAll()要领是全部绘制的中心要领
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();
//在最上层canvas绘制背景图片
this._oContextTop.drawImage(this._backgroundImg._oElement, 0, 0,
originalImgSize.width,originalImgSize.height);
}
for(var i=0,l=this._aImages.length-1;i<l;i+=1){
this.drawImageElement(containerCanvas,this._aImages[i],allowCorners);
}
var last_aImages=this._aImages[this._aImages.length-1];
this.drawImageElement(this._oContextTop,last_aImages ,allowCorners);
};能够看到，假如allOnTop=false,从_aImages封装图片的数组的第一个元素到倒数第二个元素，会绘制到中心一层container-canvas,而_aImages数组的末了一个元素，即当前操纵的图片，会绘制到最上面一层top-canvas，固然假如转变操纵对象，_aImages数组也会响应的变化，保证当前操纵的图片在_aImages数组的末了一个位置。
假如allOnTop=true,_aImages数组中的一切图片另有背景图片都邑被绘制到最上面一层top-canvas.
设置allOnTop参数的目标在于上传时只要一切图片都在一个canvas context上，挪用toDataURL()要领，就可以取得全部拼图的base64字符串。
第二个参数allowCorners示意绘制时是不是增加边框，边角。
前面将选中图片及背景图片绘制到canvas，末了this.renderAll(false,true)让边框，边角可见，是为了让用户晓得图片能够举行操纵。
Canvas.Element.prototype.addImage = function(oImg) {
...
this.renderAll(false,true);
};别的，不管怎样设置，renderAll()要领终究都邑挪用drawImageElement()要领举行现实意义上的绘制
Canvas.Element.prototype.drawImageElement = function(context,oImg,allowCorners) {
if(oImg){
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.width-originalImgSize.width))/2;
context.drawImage(oImg._oElement,-originalImgSize.width/2,(-originalImgSize.height)/2-polaroidHeight,
originalImgSize.width,originalImgSize.height);
if (allowCorners)
this.drawCorners(context, oImg, offsetX, offsetY);
context.restore();
}
};mousemove
Canvas.Element.prototype.onMouseMove = function(e) {
var mp = this.findMousePosition(e);
if(this._aImages == null)
return;
if(this._currentTransform==null){
var targetImg = this.findTargetImage(mp, true);
this.setCursor(mp, targetImg);
}
else {
if (this._currentTransform.action == 'rotate') {
this.rotateImage(mp);
this.scaleImage(mp);
this.onRotateMove.fire(e);
}
else {
this.translateImage(mp);
this.onDragMove.fire(e);
}
this.renderTop();
}
};内里的renderTop()要领只在最上层canvas绘制当前操纵的图片
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);
};mouseup
Canvas.Element.prototype.onMouseUp = function(e) {
if (this._aImages == null) {
return;
}
var target=this._currentTransform.target;
if (target)
target.setImageCoords();//重置图片canvas封装
if(this._currentTransform!= null&&this._currentTransform.action=="rotate") {
this.onRotateComplete.fire(e);
} else if (this._currentTransform!=null&&this._currentTransform.action == "drag"){
this.onDragComplete.fire(e);
}
this._currentTransform = null;
this.renderTop();
if(this._aImages.length>0)//没有选中的图片
$('canvas_menu').style.display="block";
};替代图片
<div id='canvas_menu'>
...
<a href='javascript:void(0)' id='puzzle_update'>变动图片</a>
</div> avalon.bind($('puzzle_update'),'click',function(){
update_puzzle=true;
$('puzzle_add_input').click();
});能够看到，这里依旧使用了<input>点击选中图片，不过设置了update_puzzle=true,示意当前处在替代图片的情况下
function onSelect(file_filter){
for(var i=this._start,len=file_filter.length;i<len;i++) {
var reader=new FileReader();
reader.onload=(function(i){//图片读取的回调
return function(e){
...
img.onload = function() {
...
var t = window.setTimeout(function() {
if(!update_puzzle)
canvas_puzzle.init();
else{
//当前操纵图片
var target=canvas._prevTransform.target;
//传入替代的图片和被替代图片的位置，状况信息
canvas._aImages[getCurImg()]=new canvasImg.Img(document.
querySelectorAll('.middleware_img')[0],{
top:target.top,
left:target.left,
scalex:target.scalex,
scaley:target.scaley,
angle:canvas.curAngle
});
//从新绘制最上层
canvas.renderTop();
html5_puzzle.middleware_list.clear();
update_puzzle=false;
}
clearTimeout(t);
}, 1000);
};
};
delete reader;
})(i);
reader.readAsDataURL(file_filter[i]);
}
...
}
function getCurImg(){//猎取读取操纵图片在_aImages中的位置
var oImg=canvas._prevTransform.target;
for(var i=0;i<canvas._aImages.length;i++){
if(canvas._aImages[i]._oElement.src==oImg._oElement.src){
return i;
}
}
}删除图片
<div id='canvas_menu'>
<a href='javascript:void(0)' id='puzzle_delete'>删除</a>
...
</div> avalon.bind($('puzzle_delete'),'click',function(){
canvas._aImages.splice(getCurImg(),1);//从_aImages数组中删除
canvas.renderAll(false,false);//从新绘制
$('canvas_menu').style.display="none";
...
});拼图转换成base64字符串
Canvas.Element.prototype.canvasTo = function(format) {//canvas=>dataurl
this.renderAll(true,false);//一切图片都绘制到最上层，并且不绘制边框，边角
if (format == 'jpeg' || format == 'png') {
return this._oElement.toDataURL('image/'+format);
}
};上传
avalon.post('...',{
imgData:canvas.canvasTo('jpeg').substr(22)
},function(data){
...
},'json');背景用Base64剖析imgData字符串就可以够了
