使用cropper.js裁剪图片，通过canvas获取裁剪后的图片，获取的是base64图片上传。

1.index.html是jQuery之家给的demo，不能上传图片。 2.cropperDemo.html和cropperWrap.js是我在此基础上做了封装，去掉了页面上不需要的东西，支持将截图上传并附带其他参数信息。 3.JieTuController伪代码.java是给的springMVC的伪代码。 4.最后我发现原本jQuery之家在example/crop-avatar目录中做了一个支持php的demo

webuploader + cropper 真正的pc/H5同一页面多实例+裁剪+分片上传asp+demo，应该是到目前此类demo相对来说最好的了：1、同一页面多实例调用；2、按需裁剪；3、裁剪后真真实实的传的裁剪后的图；3、预览图两种展示方案；4、每个实例可单独配置参数。详细介绍：https://blog.csdn.net/xuemu2008/article/details/109412165

首先使用cropper.js插件，能够将剪裁后的图片返回为base64编码，后台根据base64编码解析保存图片。很使用的例子,适合图片剪裁上传

最近小编在做一个裁剪头像的功能，下面小编把使用cropper.js裁剪头像的实例代码分享到脚本之家平台，需要朋友参考下吧

通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64编码，上传服务器保存图片！

Cropper也是一款图片裁剪jQuery插件，stars数量1k+，是杭州的前端工程师Fengyuan Chen所写的，功能也相当丰富，裁剪时还可以对原图进行旋转。 cropper.js,main.js,cropper.css,main.css

layui-cropper-avatar Layui头像裁剪组件 说明 这是一款适用于Layui的[微改整合]第三方组件，基于，实现点击一个按钮弹出裁剪框，完成选择、裁剪图片等操作，移动端自适应。 社区组件平台已经有一个，可惜我测试中有点问题并不如意，所以就把之前用的改成layui组件，两者很相像，毕竟都是基于cropper.js(一个3.0.0，一个3.1.3)。 使用 NO.1 使用git clone、svn checkout或直接下载压缩包等方式获取仓库代码，将static中的css和mod的js模块复制到你的项目相关目录。 代码目录结构： ├── index.html └── static ├── css │ ├── ImgCropping.css //avatar裁剪框样式 │ └── cropper.min.css //cropper样式

包含JS源代码，CSS样式，亲测可直接IE打开看效果，这是基于JS，cropper实现前端图片上传，裁剪，选择，放大缩小等功能，特别适宜于上传头像等功能

克隆至本地处理