用cropper.js裁剪头像的示例代码

最近项目需要切头像的功能。在网上搜索了一下，发现github上的cropper项目还不错，可以借鉴一下。使用起来相当简单。这是我做的一个小例子：

从成品图开始：

前端和后端代码如下

首页是一个单独的jsp页面，它被用作弹出层来剪切图片。

我不会提供jsp页面引用的关于cropper的两个文件。你可以从官方github下载你需要的东西。

地址：https://github.com/fengyuanchen/cropper

% @ page语言=' Java ' ContentType=' text/html；字符集=UTF-8 '页面编码=' UTF-8% % @包含文件='./common _ front。JSP“%！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title在此插入标题/title link rel='样式表href=' $ { path }/front/plugins/cropper/cropper。CSS ' rel='外部无跟随'脚本src=' http : $ { path }/front/plugins/cropper/cropper。js /脚本样式。容器{最大宽度： 640像素；余量： 20px自动；} img {最大宽度： 100%；} #结果img {最大宽度： 200 px最大高度： 200像素；} .cropper-view-box .cropper-face {边框半径：50%；}/样式脚本类型='text/javascript '函数getSize(size){ var num=ParSeint(size)；if(num=300){//先要求图片的大小小于300之间返回数字；}返回getSize(num/2)；}函数getroundcanvas(source canvas){ var canvas=document。create element(' canvas ')；var上下文=canvas。get context(' 2d ')；var width=sourcecanvas . width var height=sourcecanvas . height width=getSize(宽度);高度=宽度；canvas.width=宽度；canvas.height=高度；语境。begin path()；//这里是控制裁剪区域的大小（这里也决定你所要生成的图片的大小和形状我这边用的是圆形的头像大家有别的需要可以修改)上下文. arc(宽/2,高/2，Math.min(宽，高)/2，0，2 *数学.PI)；context.strokeStyle='rgba(0，0，0，0)'；语境。笔画()；语境。clip()；context.drawImage(sourceCanvas，0，0，宽度，高度);返回画布；} $(function(){ var $ image=$(' # image ')；var $ button=$(' # button ')；var $ result=$(' # result ')；var croppable=false$ image。cropper({ aspelection : 1，viewMode: 1，ready : function(){ croppable=true；} });$button.on('click '，function(){ var croppedCanvas；var roundedCanvasif(！croppable){ return；} //裁剪croppedCanvas=$ image。cropper(' getCroppedCanvas ')；//判断图片大小，如果超过1080 则返回if(croppedcanvas。宽度1080){ alert('图片过大，请重新选择!');返回false} //生成圆形roucke canvas=getroucke canvas(croppedCanvas)；//将裁剪区域的图片转出图片的base64编码，放到表单里提交到后台。后台再对其进行解码，保存$(“# icon”).val(圆形画布。todaytaul())；$.Ajax({ URL : ' $ { path }/front/SaveUsericon '，data:$('#submitForm ').serialize()，type:'POST '，success :函数(数据){ if(数据。代码==200){ parent。位置。重载()；//父页面刷新var索引=父级。层。getframeindex(窗口。姓名)；//获取窗口索引parent.layer.close(索引);} else { warninglert(数据。味精)；} } });返回false })；//当选择完图片后，直接提交表单到后台，图片保存后再回到此页面。

这样此页面的图片裁剪画布就改变成你所选择的图片了$(“# file”).change(function(){ var FIlename=$(“# file”)).val()；文件名=文件名。tolowercase()；if((fileName.indexOf(').jpg’)！=-1)||(fileName.indexOf(' .png ')！=-1)||(fileName.indexOf(' .jpeg ')！=-1)||(fileName.indexOf(' .bmp ')！=-1)||(fileName.indexOf(' .gif ')！=-1)){ $('#imageUploadForm ').submit()；}else{ alert('所选图片格式错误或者不支持此类图片格式!');}返回false })；});/script/head body div class=' container ' form enctype=' multipart/form-data ' method=' post ' id=' imageUploadForm ' action=' $ { path }/front/imageUpload ' span class=' BTN-upload ' a href=' JavaScript : void()；'rel='外部BTNBTN-主半径一、class='iconfont'/i选择图片/a输入类型=' file ' name=' file ' id=' file ' class=' input-file '输入类型=' hidden ' name=' originalImage ' value=' $ { imageRelativePath } '//span/form div c : if test=' $ {！空imageRelativePath } ' img id=' image ' src=' http : $ { path }/$ { imageRelativePath } ' alt=' Picture '/c : if c : if test=' $ {！空user ico } ' img id=' image ' src=' http : $ { path }/$ { user ico } ' alt=' Picture '/c : if c : if test=' $ {！空教师图标} ' img id=' image ' src=' http : $ { path }/$ {教师图标} ' alt=' Picture '/c : if/div form id=' submit form ' action=' method=' post '输入类型='隐藏'名称='原始图像'值='${imageRelativePath}'/输入类型='隐藏'名称='图标' id='图标'/表单输入类=' BTN BTN BTN-主要尺寸-M半径'类型='按钮'上传头像div id=' result '/div/div/body/html snippet _ file _ 0。文本文件（textfile）

下面是我后台处理方法，大家可以借鉴一下。后台是地对地导弹框架，主要是保存图片和图片转码

//用户上传头像/** * * @param图像选择的图片* @param模型* @param userId用户id * @param userType用户类型* @param请求* @param原始图像上一张临时图片* @return */@RequestMapping(值='/imageUpload '，方法=RequestMethod .开机自检)公共字符串图标图像上传(@RequestParam(值='文件'，必选=假)多部分文件图像，模型模型，@CookieValue('userId ')字符串用户Id，HttpServletRequest请求，String originalImage){ String基路径=' image/'；//web.xml里面配置的用户图片存储路径字符串useimagepath=请求。getsession().getServletContext().getInitParameter(' useimagesavepath ')；//图片相对路径string imageRelativePath=file utils。文件上传(图像、请求、基本路径用户imagepath)；System.out.println('图片保存路径-imageRelativePath)；System.out.println('上一张临时图片-originalImage)；//删除上一张临时图片if(originalImage！=null){ String BasePathTemp=请求。GetSession().getServletContext().getRealPath('/')；文件实用程序。删除文件(基本路径临时原始文件)；}型号。add attribute(' imageRelativePath '，imageRelativePath)；model.addAttribute('userId '，userId)；返回/crop _ image '；} //将裁剪好的头像由base64还原成图片@ResponseBody @RequestMapping(值='/saveUserIcon '，方法=RequestMethod .开机自检)公共消息保存用户图标(字符串图标，@CookieValue('userType ')字符串用户类型，@CookieValue('userId ')字符串userId，字符串原始语言，HttpServletRequest请求){ System.out.println('icon -'图标);//老师成图片地址字符串真实路径=请求。GetSession().getServletContext().getRealPath('/')；string BasePath=' image/'；字符串useimagepath=请求。getsession().getServletContext().getInitParameter(' useimagesavepath ')；立即日历=日历。getinstance()；字符串相对路径=基本路径useimagepath/'现在。获取(日历.年份)'/'(现在。获取（日历. MONTH) 1) '/'现在。获取（日历. DAY _ OF _ MONTH)'/'文件。getuuid()' .png '；string imagePath=真实路径相对路径；//将base64转换成图片FileUtils.base64ToImage(图标，imagePath)；//删除原图if(originalImage！=null){ fileutils。删除文件(真实路径originalImage)；}返回味精。成功()；} //下面是解码的方法公共静态布尔base64ToImage(字符串base64，字符串路径){//对字节数组字符串进行Base64解码并生成图片if (base64==null){ //图像数据为空返回false}系统。出去。println(base 64)；//base64的格式为" data : image/png；base64，***，逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了base64=base64.split('，')[1]；base64解码器解码器=新的base64解码器()；尝试{ //Base64解码byte[]bytes=decoderbuffer。decoder buffer(base64)；for(int I=0；我字节。长度；i) {如果(字节[i] 0) {//调整异常数据字节[I]=256；} } //生成图片输出流输出=新文件输出流(路径);out.write(字节);出去。flush()；出去。close()；返回真；} catch(异常e){返回false} }总结

以上所述是小编给大家介绍的使用cropper.js裁剪头像的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！