WEB前端实现裁剪上传图片功能

最后的效果如下：

这里面有几个功能，第一个是支持拖拽，第二个压缩，第三个是裁剪编辑，第四个是上传和上传进度显示，下面依次介绍每个功能的实现：
1. 拖拽显示图片
拖拽读取的功能主要是要兼听html5的drag事件，这个没什么好说的，查查api就知道怎么做了，主要在于怎么读取用户拖过来的图片并把它转成base64以在本地显示。

var handler = {init: function（$container）{//需要把dragover的默认行为禁掉，不然会跳页$container.on（"dragover", function（event）{event.preventDefault（）;}）;$container.on（"drop", function（event）{event.preventDefault（）;//这里获取拖过来的图片文件，为一个File对象var file = event.originalEvent.dataTransfer.files[0];handler.handleDrop（$（this）, file）;}）;}}varhandler={init:function（$container）{//需要把dragover的默认行为禁掉，不然会跳页$container.on（"dragover",function（event）{event.preventDefault（）;}）;$container.on（"drop",function（event）{event.preventDefault（）;//这里获取拖过来的图片文件，为一个File对象varfile=event.originalEvent.dataTransfer.files[0];handler.handleDrop（$（this）,file）;}）;}}

代码第10行获取图片文件，然后传给11行处理。
如果使用input，则监听input的change事件：

$container.on（"change", "input[type=file]", function（event）{if（！this.value） return;var file = this.files[0];handler.handleDrop（$（this）.closest（".container"）, file）;this.value = "";}）;$container.on（"change","input[type=file]",function（event）{if（！this.value）return;varfile=this.files[0];handler.handleDrop（$（this）.closest（".container"）,file）;this.value="";}）;

代码第3行，获取File对象，同样传给handleDrop进行处理
接下来在handleDrop函数里，读取file的内容，并把它转成base64的格式：

handleDrop: function（$container, file）{var $img = $container.find（"img"）;handler.readImgFile（file, $img, $container）;},handleDrop:function（$container,file）{var$img= $container.find（"img"）;handler.readImgFile（file,$img,$container）;},

我的代码里面又调了个readImgFile的函数，helper的函数比较多，主要是为了拆解大模块和复用小模块。
在readImgFile里面读取图片文件内容：
使用FileReader读取文件 JavaScript

readImgFile: function（file, $img, $container）{var reader = new FileReader（file）;//检验用户是否选则是图片文件if（file.type.split（"/"）[0] ！== "image"）{util.toast（"You should choose an image file"）;return;} reader.onload = function（event） {var base64 = event.target.result;handler.compressAndUpload（$img, base64, file, $container）;} reader.readAsDataURL（file）;}readImgFile:function（file,$img,$container）{varreader=newFileReader（file）;//检验用户是否选则是图片文件if（file.type.split（"/"）[0]！=="image"）{util.toast（"You should choose an image file"）;return;} reader.onload=function（event）{varbase64=event.target.result;handler.compressAndUpload（$img,base64,file, $container）;} reader.readAsDataURL（file）;}

这里是通过FileReader读取文件内容，调的是readAsDataURL，这个api能够把二进制图片内容转成base64的格式，读取完之后会触发onload事件，在onload里面进行显示和上传：

//获取图片base64内容var base64 = event.target.result;//如果图片大于1MB，将body置半透明if（file.size > ONE_MB）{$（"body"）.css（"opacity", 0.5）;}//因为这里图片太大会被卡一下，整个页面会不可操作$img.attr（"src", baseUrl）;//还原if（file.size > ONE_MB）{$（"body"）.css（"opacity", 1）;}//然后再调一个压缩和上传的函数handler.compressAndUpload（$img, file, $container）;//获取图片base64内容varbase64=event.target.result;//如果图片大于1MB，将body置半透明if（file.size>ONE_MB）{$（"body"）.css（"opacity",0.5）;}//因为这里图片太大会被卡一下，整个页面会不可操作$img.attr（"src",baseUrl）;//还原if（file.size>ONE_MB）{$（"body"）.css（"opacity",1）;}//然后再调一个压缩和上传的函数handler.compressAndUpload（$img,file,$container）;

如果图片有几个Mb的，在上面第8行展示的时候被卡一下，笔者曾尝试使用web worker多线程解决，但是由于多线程没有window对象，更不能操作dom，所以不能很好地解决这个问题。采取了一个补偿措施：通过把页面变虚告诉用户现在在处理之中，页面不可操作，稍等一会
这里还会有一个问题，就是ios系统拍摄的照片，如果不是横着拍的，展示出来的照片旋转角度会有问题，如下一张竖着拍的照片，读出来是这样的：

即不管你怎么拍，ios实际存的图片都是横着放的，因此需要用户自己手动去旋转。旋转的角度放在了exif的数据结构里面，把这个读出来就知道它的旋转角度了，用一个EXIF的库读取：
读取exif的信息

readImgFile: function（file, $img, $container）{EXIF.getData（file, function（）{var orientation = this.exifdata.Orientation,rotateDeg = 0;//如果不是ios拍的照片或者是横拍的，则不用处理，直接读取if（typeof orientation === "undefined" || orientation === 1）{ //原本的readImgFile，添加一个rotateDeg的参数handler.doReadImgFile（file, $img, $container, rotateDeg）;} //否则用canvas旋转一下else{rotateDeg = orientation === 6 ? 90*Math.PI/180 : orientation === 8 ? -90*Math.PI/180 :orientation === 3 ? 180*Math.PI/180 : 0;handler.doReadImgFile（file, $img, $container, rotateDeg）;} }）;}readImgFile:function（file,$img,$container）{EXIF.getData（file,function（）{varorientation=this.exifdata.Orientation,rotateDeg=0;//如果不是ios拍的照片或者是横拍的，则不用处理，直接读取if（typeoforientation==="undefined"||orientation===1）{//原本的readImgFile，添加一个rotateDeg的参数handler.doReadImgFile（file,$img,$container,rotateDeg）;} //否则用canvas旋转一下else{rotateDeg=orientation===6?90*Math.PI/180:orientation===8?-90*Math.PI/180:orientation===3?180*Math.PI/180:0;handler.doReadImgFile（file,$img,$container,rotateDeg）;} }）;}

知道角度之后，就可以用canvas处理了，在下面的压缩图片进行说明，因为压缩也要用到canvas
2. 压缩图片
压缩图片可以借助canvas，canvas可以很方便地实现压缩，其原理是把一张图片画到一个小的画布，然后再把这个画布的内容导出base64，就能够拿到一张被压小的图片了：

//设定图片最大压缩宽度为1500pxvar maxWidth = 1500;var resultImg = handler.compress（$img[0], maxWidth, file.type）;//设定图片最大压缩宽度为1500pxvarmaxWidth=1500;varresultImg=handler.compress（$img[0],maxWidth,file.type）;

compress函数进行压缩，在这个函数里首先创建一个canvas对象，然后计算这个画布的大小：

compress: function（img, maxWidth, mimeType）{//创建一个canvas对象var cvs = document.createElement（"canvas"）;var width = img.naturalWidth,height = img.naturalHeight,imgRatio = width / height;//如果图片维度超过了给定的maxWidth 1500，//为了保持图片宽高比，计算画布的大小if（width > maxWidth）{width = maxWidth;height = width / imgRatio;} cvs.width = width;cvs.height = height;}compress:function（img,maxWidth,mimeType）{//创建一个canvas对象varcvs=document.createElement（"canvas"）;varwidth=img.naturalWidth,height=img.naturalHeight,imgRatio=width/height;//如果图片维度超过了给定的maxWidth 1500，//为了保持图片宽高比，计算画布的大小if（width>maxWidth）{width=maxWidth;height=width/imgRatio;} cvs.width=width;cvs.height=height;}

接下来把大的图片画到一个小的画布上，再导出：

//把大图片画到一个小画布var ctx = cvs.getContext（"2d"）.drawImage（img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height）;//图片质量进行适当压缩var quality = width >= 1500 ? 0.5 :width > 600 ? 0.6 : 1;//导出图片为base64var newImageData = cvs.toDataURL（mimeType, quality）;var resultImg = new Image（）;resultImg.src = newImageData;return resultImg;//把大图片画到一个小画布varctx=cvs.getContext（"2d"）.drawImage（img,0,0,img.naturalWidth,img.naturalHeight,0,0,width,height）;//图片质量进行适当压缩varquality=width>=1500?0.5:width>600?0.6:1;//导出图片为base64varnewImageData=cvs.toDataURL（mimeType,quality）;varresultImg=newImage（）;resultImg.src=newImageData;returnresultImg;

最后一行返回了一个被压缩过的小图片，就可对这个图片进行裁剪了。
在说明裁剪之前，由于第二点提到ios拍的照片需要旋转一下，在压缩的时候可以一起处理。也就是说，如果需要旋转的话，那么画在canvas上面就把它旋转好了：

var ctx = cvs.getContext（"2d"）;var destX = 0,destY = 0;if（rotateDeg）{ctx.translate（cvs.width / 2, cvs.height / 2）;ctx.rotate（rotateDeg）;destX = -width / 2,destY = -height / 2;}ctx.drawImage（img, 0, 0, img.naturalWidth, img.naturalHeight, destX, destY, width, height）;varctx=cvs.getContext（"2d"）;vardestX=0,destY=0;if（rotateDeg）{ctx.translate（cvs.width/2,cvs.height/2）;ctx.rotate（rotateDeg）;destX=-width/2,destY=-height/2;}ctx.drawImage（img,0,0,img.naturalWidth,img.naturalHeight,destX,destY,width,height）;

这样就解决了ios图片旋转的问题，得到一张旋转和压缩调节过的图片之后，再用它进行裁剪和编辑
3. 裁剪图片
裁剪图片，上网找到了一个插件cropper，这个插件还是挺强大，支持裁剪、旋转、翻转，但是它并没有对图片真正的处理，只是记录了用户做了哪些变换，然后你自己再去处理。可以把变换的数据传给后端，让后端去处理。这里我们在前端处理，因为我们不用去兼容IE8。
如下，我把一张图片，旋转了一下，同时翻转了一下：

它的输出是：

{height: 319.2000000000001,rotate: 45,scaleX: -1,scaleY: 1,width: 319.2000000000001x: 193.2462838120872y: 193.2462838120872}{height:319.2000000000001,rotate:45,scaleX:-1,scaleY:1,width:319.2000000000001x:193.2462838120872y:193.2462838120872}

通过这些信息就知道了：图片被左右翻转了一下，同时顺时针转了45度，还知道裁剪选框的位置和大小。通过这些完整的信息就可以做一对一的处理。
在展示的时候，插件使用的是img标签，设置它的css的transform属性进行变换。真正的处理还是要借助canvas，这里分三步说明：
1. 假设用户没有进行旋转和翻转，只是选了简单地选了下区域裁剪了一下，那就简单很多。最简单的办法就是创建一个canvas，它的大小就是选框的大小，然后根据起点x、y和宽高把图片相应的位置画到这个画布，再导出图片就可以了。由于考虑到需要翻转，所以用第二种方法，创建一个和图片一样大小的canvas，把图片原封不动地画上去，然后把选中区域的数据imageData存起来，重新设置画布的大小为选中框的大小，再把imageData画上去，最后再导出就可以了：

var cvs = document.createElement（"canvas"）;var img = $img[0];var width = img.naturalWidth,height = img.naturalHeight;cvs.width = width;cvs.height = height; var ctx = cvs.getContext（"2d"）;var destX = 0,destY = 0;ctx.drawImage（img, destX, destY）;//把选中框里的图片内容存起来var imageData = ctx.getImageData（cropOptions.x, cropOptions.y, cropOptions.width, cropOptions.height）;cvs.width = cropOptions.width;cvs.height = cropOptions.height;//然后再画上去ctx.putImageData（imageData, 0, 0）;varcvs=document.createElement（"canvas"）;varimg=$img[0];varwidth=img.naturalWidth,height=img.naturalHeight;cvs.width=width;cvs.height=height;varctx=cvs.getContext（"2d"）;vardestX=0,destY=0;ctx.drawImage（img,destX,destY）;//把选中框里的图片内容存起来varimageData=ctx.getImageData（cropOptions.x,cropOptions.y,cropOptions.width,cropOptions.height）;cvs.width=cropOptions.width;cvs.height=cropOptions.height;//然后再画上去ctx.putImageData（imageData,0,0）;

代码14行，通过插件给的数据，保存选中区域的图片数据，18行再把它画上去
2. 如果用户做了翻转，用上面的结构很容易可以实现，只需要在第11行drawImage之前对画布做一下翻转变化：
canvas flip实现 JavaScript

//fipif（cropOptions.scaleX === -1 || cropOptions.scaleY === -1）{destX = cropOptions.scaleX === -1 ? width * -1 : 0; // Set x position to -100% if flip horizontaldestY = cropOptions.scaleY === -1 ? height * -1 : 0; // Set y position to -100% if flip verticalctx.scale（cropOptions.scaleX, cropOptions.scaleY）;}

ctx.drawImage（img, destX, destY）;

//fipif（cropOptions.scaleX===-1||cropOptions.scaleY===-1）{destX=cropOptions.scaleX===-1?width*-1:0; // Set x position to -100% if flip horizontaldestY=cropOptions.scaleY===-1?height*-1:0; // Set y position to -100% if flip verticalctx.scale（cropOptions.scaleX,cropOptions.scaleY）;}

ctx.drawImage（img,destX,destY）;
其它的都不用变，就可以实现上下左右翻转了，难点在于既要翻转又要旋转
3. 两种变换叠加没办法直接通过变化canvas的坐标，一次性drawImage上去。还是有两种办法，第一种是用imageData进行数学变换，计算一遍得到imageData里面，从第一行到最后一行每个像素新的rgba值是多少，然后再画上去；第二种办法，就是创建第二个canvas，第一个canvas作翻转，把它的结果画到第二个canvas，然后再旋转，最后导到。由于第二种办法相对比较简单，我们采取第二种办法：
同上，在第一个canvas画完之后：
实现旋转、翻转结合 JavaScript

ctx.drawImage（img, destX, destY）;//rotateif（cropOptions.rotate ！== 0）{var newCanvas = document.createElement（"canvas"）,deg = cropOptions.rotate / 180 * Math.PI;//旋转之后，导致画布变大，需要计算一下newCanvas.width = Math.abs（width * Math.cos（deg）） + Math.abs（height * Math.sin（deg））;newCanvas.height = Math.abs（width * Math.sin（deg）） + Math.abs（height * Math.cos（deg））;var newContext = newCanvas.getContext（"2d"）;newContext.save（）;newContext.translate（newCanvas.width / 2, newCanvas.height / 2）;newContext.rotate（deg）;destX = -width / 2,destY = -height / 2;//将第一个canvas的内容在经旋转后的坐标系画上来newContext.drawImage（cvs, destX, destY）;newContext.restore（）;ctx = newContext;cvs = newCanvas;}ctx.drawImage（img,destX,destY）;//rotateif（cropOptions.rotate！==0）{varnewCanvas=document.createElement（"canvas"）,deg=cropOptions.rotate/180*Math.PI;//旋转之后，导致画布变大，需要计算一下newCanvas.width=Math.abs（width*Math.cos（deg））+Math.abs（height*Math.sin（deg））;newCanvas.height=Math.abs（width*Math.sin（deg））+Math.abs（height*Math.cos（deg））;varnewContext=newCanvas.getContext（"2d"）;newContext.save（）;newContext.translate（newCanvas.width/2,newCanvas.height/2）;newContext.rotate（deg）;destX=-width/2,destY=-height/2;//将第一个canvas的内容在经旋转后的坐标系画上来newContext.drawImage（cvs,destX,destY）;newContext.restore（）;ctx=newContext;cvs=newCanvas;}

将第二步的代码插入第一步，再将第三步的代码插入第二步，就是一个完整的处理过程了。
最后再介绍下上传
4. 文件上传和上传进度
文件上传只能通过表单提交的形式，编码方式为multipart/form-data，这个我在《三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader》已做详细讨论，可以通过写一个form标签进行提交，但也可以模拟表单提交的格式，表单提交的格式在那篇文章已提及。
首先创建一个ajax请求：
JavaScript

var xhr = new XMLHttpRequest（）;xhr.open（"POST", upload_url, true）;var boundary = "someboundary";xhr.setRequestHeader（"Content-Type", "multipart/form-data; boundary=" + boundary）;varxhr=newXMLHttpRequest（）;xhr.open（"POST",upload_url,true）;varboundary="someboundary";xhr.setRequestHeader（"Content-Type","multipart/form-data; boundary="+boundary）;

并设置编码方式，然后拼表单格式的数据进行上传：
ajax上传 JavaScript

var data = img.src;data = data.replace（"data:" + file.type + ";base64,", ""）;xhr.sendAsBinary（[//name=data"--" + boundary,"Content-Disposition: form-data; name="data"; filename="" + file.name + ""","Content-Type: " + file.type, "",atob（data）, "--" + boundary,//name=docName"--" + boundary,"Content-Disposition: form-data; name="docName"", "",file.name,"--" + boundary + "--"].join（"
"））;vardata=img.src;data=data.replace（"data:"+file.type+";base64,",""）;xhr.sendAsBinary（[//name=data"--"+boundary,"Content-Disposition: form-data; name="data"; filename=""+file.name+""","Content-Type: "+file.type,"",atob（data）,"--"+boundary,//name=docName"--"+boundary,"Content-Disposition: form-data; name="docName"","",file.name,"--"+boundary+"--"].join（"
"））;

表单数据不同的字段是用boundary的随机字符串分隔的。拼好之后用sendAsBinary发出去，在调这个函数之前先监听下它的事件，包括
1）上传的进度：
上传进度 JavaScript

xhr.upload.onprogress = function（event）{if（event.lengthComputable） {duringCallback（（event.loaded / event.total） * 100）;}};xhr.upload.onprogress=function（event）{if（event.lengthComputable）{duringCallback（（event.loaded/event.total）*100）;}};

这里凋duringCallback的回调函数，给这个回调函数传了当前进度的参数，用这个参数就可以设置进度条的过程了。进度条可以自己实现，或者直接上网找一个，随便一搜就有了。
2）成功和失败：
成功和失败回调 JavaScript

xhr.onreadystatechange = function（） {if （this.readyState == 4）{if （this.status == 200） {successCallback（this.responseText）;}else if （this.status >= 400） {if （errorCallback && errorCallback instanceof Function） {errorCallback（this.responseText）;} } }};xhr.onreadystatechange=function（）{if（this.readyState==4）{if（this.status==200）{successCallback（this.responseText）;}elseif（this.status>=400）{if（errorCallback&& errorCallback instanceofFunction）{errorCallback（this.responseText）;} } }};

这个上传功能参考了一个JIC插件
至此整个功能就拆解说明完了，上面的代码可以兼容到IE10，FileReader的api到IE10才兼容，问题应该不大，因为微软都已经放弃了IE11以下的浏览器，为啥我们还要去兼容呢。
这个东西一来减少了后端的压力，二来不用和后端来回交互，对用户来说还是比较好的，除了上面说的一个地方会被卡一下之外。核心代码已在上面说明，完整代码和demo就不再放出来了。
以上所述是小编给大家介绍的WEB前端实现裁剪上传图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！