本帖最后由 AreYouGlad 于 2017-12-20 16:25 编辑
我们在日常开发中常常会遇到类似于上传头像，需要对头像图片进行裁剪的操作。cropper这款JQuery插件就为我们解决了这个问题。
效果预览
插件下载
首先，我们可以使用bower或者npm下载cropper
[Bash shell] 纯文本查看 复制代码
bower i cropper
npm i cropper
下载完成之后，找到cropper.css和cropper.js文件进行引入，需要注意的地方是cropper是依赖于JQuery的，所以需要提前引入JQuery，并且JQuery的版本必须大于等于1.9.1。
HTML操作
引入文件成功后，我们可以对图片进行裁剪操作了。首先在HTML结构中需要用一个块级元素将我们需要裁剪的素材图片包裹。
JS操作
这样，一个素材可以通过滚轮放大缩小、裁剪框可以拖动、缩放的图片裁剪操作已经完成了。需要注意的是，裁剪区域的宽高是继承自我们的父级元素的，也就是我们的box，所以 box必须可见，我们也可以通过控制box的宽高来修改裁剪区域的宽高。还有一点，如果你要使用跨源图片来作为剪裁图片，请确保你的浏览器支持HTML5 CORS settings attributes，并且你的图片服务器支持Access-Control-Allow-Origin属性。
效果预览
旋转操作
cropper还可以对素材图片进行旋转
裁剪区域展示
对素材图片裁剪完毕之后，我们可以通过getCroppedCanvas得到裁剪获得的canvas，然后通过toDataURL方法将其转换为base64格式的图片，最后将base64赋值给img的src属性，完成裁剪区域的展示。
当然，cropper还有很多强大的功能，具体的操作方法大家可以去cropper的官方网站查看API。地址：http://fengyuanchen.github.io/cropper/。
我也做了个小demo于附件供大家参考。
demo.rar
(96.14 KB, 下载次数: 553)
| 
收藏
淘帖
踩
