## 效果图 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/54271/1516610019207.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/54271/1516610024656.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/54271/1516610024996.png-wm) ------------------------------------------------- > 能实现改变拖动框大小，但是用户体验不好，需要改进。 ## js代码 ```js var postFile = { init : function(){ var t = this; t.regional = document.getElementById("label"); t.getImage = document.getElementById("get_image"); t.editPic = document.getElementById("edit_pic"); t.editBox = document.getElementById("cover_box"); t.bx = 0; //background image x t.by = 0; //background image y t.cx = 15; //crop area x t.cy = 15; //crop area y t.cHeight = 100; // crop area height t.cWidth = 100; // crop area width document.getElementById("post_file").addEventListener("change",t.handleFiles,false); document.getElementById("save_button").onclick = function(){ t.editPic.height = t.cHeight; t.editPic.width = t.cWidth; var ctx = t.editPic.getContext("2d"); var images = new Image(); images.src = t.imgUrl; images.onload = function(){ ctx.drawImage(images,t.cx,t.cy,t.cWidth,t.cHeight,0,0,t.cWidth,t.cHeight); document.getElementById("show_pic").getElementsByTagName("img")[0].src = t.editPic.toDataURL(); } } }, handleFiles : function(){ var fileList = this.files[0]; var oFReader = new FileReader(); oFReader.readAsDataURL(fileList); oFReader.onload = function(oFREvent){ postFile.paintImage(oFREvent.target.result); } }, //使用canvas画出图片 paintImage : function(url){ var t = this; var createCanvas = t.getImage.getContext("2d"); var img = new Image(); img.src = url; img.onload = function(){ if( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight){ t.imgWidth = img.width; t.imgHeight = img.height; }else{ var pWidth = img.width/(img.height/t.regional.offsetHeight); //当图片高度大于宽度时的宽度 var pHeight = img.height/(img.width/t.regional.offsetWidth); //当图片宽度大于高度时的高度 t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth; t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight; } //确保canvas居中于div#label中，需要计算其left、top偏移 t.bx = (t.regional.offsetWidth - t.imgWidth)/2 + "px"; t.by = (t.regional.offsetHeight - t.imgHeight)/2 + "px"; //设置背景图canvas的宽高为图片宽高，及left、top t.getImage.height = t.imgHeight; t.getImage.width = t.imgWidth; t.getImage.style.left = t.bx; t.getImage.style.top = t.by; createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight); t.imgUrl = t.getImage.toDataURL(); t.cutImage(); t.drag_resize(); } }, //裁剪图片 cutImage : function(){ var t = this; //设置背景图遮罩canvas t.editBox.height = t.imgHeight; t.editBox.width = t.imgWidth; t.editBox.style.display = "block"; t.editBox.style.left = t.bx; t.editBox.style.top = t.by; var cover = t.editBox.getContext("2d"); cover.fillStyle = "rgba(0,0,0,0.5)"; cover.fillRect(0,0,t.imgWidth,t.imgHeight); //在给定矩形内清空一个矩形（裁剪部分） cover.clearRect(t.cx,t.cy,t.cWidth,t.cHeight); //裁剪 var text = ""; var showEdit = document.getElementById("show_edit"); text += "background : url("+t.imgUrl+")"+ -t.cx + "px "+ -t.cy +"px no-repeat;"; text += "width : "+t.cWidth+"px;"; text += "height : "+t.cHeight + "px;"; showEdit.style.cssText = text; }, //设置图片裁剪区域拖动 drag_resize : function(){ var t = this; var draging = false; //拖动标志 var startX = 0; //拖动起点X var startY = 0; //拖动起点Y var chgFlag = false; //更改裁剪大小标志 var leftFlag = false; //更改左裁剪大小标志 var rightFlag = false; //右 var topFlag = false; //上 var bottomFlag = false; //下 t.editBox.onmousemove = function(e){ //pageX,PageY为指针相对于背景图canvas的位置 var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft); var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop); //判断鼠标指针所处位置 var inside = pageX>t.cx+4 && pageXt.cy+4&&pageY=t.cx-5) && (pageY<=t.cy+4)&&(pageY>=t.cy-5); // in left top point var inP2 = (pageX<=t.cx+4)&&(pageX>=t.cx-5)&& (pageY>=(t.cy+t.cHeight-4))&&(pageY<=(t.cy+t.cHeight+5)); // in left bottom point var inP3 = (pageX>=(t.cx+t.cWidth-4)) &&(pageX<=(t.cx+t.cWidth+5)) && (pageY<=t.cy+4)&&(pageY>=t.cy-5); // in right top point var inP4 = (pageX>=(t.cx+t.cWidth-4)) &&(pageX<=(t.cx+t.cWidth+5)) && (pageY>=(t.cy+t.cHeight-4))&&(pageY<=(t.cy+t.cHeight+5)); // in right bottom point var inL1 = (pageX>=t.cx-5) && (pageX<=t.cx+4) && (pageY>t.cy+4 && (pageY=(t.cx+t.cWidth-4)) &&(pageX<=(t.cx+t.cWidth+5)) && (pageY>t.cy+4 && (pageY=t.cy-5)&&(pageY<=t.cy+4) && (pageX>t.cx+4 && (pageX=t.cy+t.cHeight-4) && (pageY<=t.cy+t.cHeight+5) && (pageX>t.cx+4 && (pageX t.imgWidth){ t.cx = t.imgWidth - t.cWidth; }else{ t.cx = t.ex + (pageX - startX); } if(t.ey + (pageY-startY) < 0){ t.cy =0; }else if(t.ey + (pageY-startY)+t.cHeight>t.imgHeight){ t.cy = t.imgHeight - t.cHeight; }else{ t.cy = t.ey + (pageY-startY); } t.cutImage(); } if(chgFlag){ // 改变裁剪大小时的处理 if(leftFlag){ if(pageX>t.cx+t.cWidth-20){ pageX=t.cx+t.cWidth-20; } t.cx = pageX < 0 ? 0 : pageX; t.cWidth += t.tx-t.cx; } if(rightFlag){ if(pageX t.imgWidth ? (t.imgWidth-t.cx) : (pageX-t.cx); } if(topFlag){ if(pageY>t.cy+t.cHeight-20){ pageY = t.cy+t.cHeight-20; } t.cy = pageY < 0 ? 0 :pageY; t.cHeight += t.ty-t.cy; } if(bottomFlag){ if(pageY t.imgHeight ? (t.imgHeight-t.cy) : (pageY - t.cy); } t.cutImage(); } } else{ this.style.cursor = "auto"; // this.style.cursor = "crosshair"; // this.onmousedown = function(){ // startX = pageX; // startY = pageY; // } // this.onmouseup = function(){ // if(startX 20 ? temp : 20; // }else{ // var temp = startX - pageX; // t.cx = pageX; // t.cWidth = temp > 20 ? temp : 20; // } // if(startY 20 ? temp :20; // }else{ // var tempY = startY - pageY; // t.cy = pageY; // t.cHeight = tempY > 20 ? temp : 20; // } // } // t.cutImage(); } } }, } postFile.init(); ```

“基于 HTML5 实现本地图片裁剪”实验报告