怎样实现前端裁剪上传图片功能 - 会编程的银猪_H5之家

由于前端是不能直接操作本地文件的，要么通过<input type="file">用户点击选择文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日渐衰落，所以使用flash还是不提倡的。同时html5崛起，提供了很多的api操控，可以在前端使用原生的api实现图片的处理，这样可以减少后端服务器的压力，同时对用户也是友好的。

(笔者的个人站：手机端的读者推荐在这里看)

最后的效果如下：

这里面有几个功能，第一个是支持拖拽，第二个压缩，第三个是裁剪编辑，第四个是上传和上传进度显示，下面依次介绍每个功能的实现：

1. 拖拽显示图片

拖拽读取的功能主要是要兼听html5的drag事件，这个没什么好说的，查查api就知道怎么做了，主要在于怎么读取用户拖过来的图片并把它转成base64以在本地显示。

监听drag和drop事件

JavaScript

//需要把dragover的默认行为禁掉，不然会跳页

//这里获取拖过来的图片文件，为一个File对象

}

代码第10行获取图片文件，然后传给11行处理。

如果使用input，则监听input的change事件：

JavaScript

代码第3行，获取File对象，同样传给handleDrop进行处理

接下来在handleDrop函数里，读取file的内容，并把它转成base64的格式：

JavaScript

我的代码里面又调了个readImgFile的函数，helper的函数比较多，主要是为了拆解大模块和复用小模块。

在readImgFile里面读取图片文件内容：

使用FileReader读取文件

JavaScript

//检验用户是否选则是图片文件

}

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

JavaScript

//获取图片base64内容

//如果图片大于1MB，将body置半透明

}

//因为这里图片太大会被卡一下，整个页面会不可操作

//还原

}

//然后再调一个压缩和上传的函数

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

这里还会有一个问题，就是ios系统拍摄的照片，如果不是横着拍的，展示出来的照片旋转角度会有问题，如下一张竖着拍的照片，读出来是这样的：

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

读取exif的信息

JavaScript

//如果不是ios拍的照片或者是横拍的，则不用处理，直接读取

//原本的readImgFile，添加一个rotateDeg的参数

//否则用canvas旋转一下

}

知道角度之后，就可以用canvas处理了，在下面的压缩图片进行说明，因为压缩也要用到canvas

2. 压缩图片

压缩图片可以借助canvas，canvas可以很方便地实现压缩，其原理是把一张图片画到一个小的画布，然后再把这个画布的内容导出base64，就能够拿到一张被压小的图片了：

JavaScript

//设定图片最大压缩宽度为1500px

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

JavaScript

//创建一个canvas对象

//如果图片维度超过了给定的maxWidth 1500，

//为了保持图片宽高比，计算画布的大小

}

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

压缩处理

JavaScript

//把大图片画到一个小画布

//图片质量进行适当压缩

//导出图片为base64

最后一行返回了一个被压缩过的小图片，就可对这个图片进行裁剪了。

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

rotate canvas

JavaScript

}

这样就解决了ios图片旋转的问题，得到一张旋转和压缩调节过的图片之后，再用它进行裁剪和编辑

3. 裁剪图片