另外，无论怎么设置，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> ... <a href='javascript:void(0)'>更改图片</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> <a href='javascript:void(0)'>删除</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字符串就可以了

下载