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


Posted in Javascript onSeptember 29, 2017

最近项目需要头像裁剪的功能,在网上找了一下,发现了github上的cropper项目还不错,借鉴了一下。。用起来挺简单的,下面是我做的一个小例子:

开始先放个成品图:

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

下面给出前后端的代码

前端页面是一个单独的jsp页面,用来做弹出层来裁剪图片比较好。

关于jsp页面引用的两个关于cropper的 文件,我就不提供了。大家需要的可以去官方的github上去下载。

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ include file="../common_front.jsp" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path }/front/plugins/cropper/cropper.css" rel="external nofollow" >
<script src="${path }/front/plugins/cropper/cropper.js"></script>
 <style>
 .container {
  max-width: 640px;
  margin: 20px auto;
 }
 img {
  max-width: 100%;
 }
 #result img{
  max-width: 200px;
  max-height: 200px;
 }
 .cropper-view-box,
 .cropper-face {
  border-radius: 50%;
 }
 </style>
 <script type="text/javascript">
 function getSize(size){
  var num=parseInt(size);
  if(num<=300){//先要求图片的大小小于300之间
  return num;
  }
  return getSize(num/2);
 }
 function getRoundedCanvas(sourceCanvas) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = sourceCanvas.width;
  var height = sourceCanvas.height;
  width=getSize(width);
  height=width;
  canvas.width = width;
  canvas.height = height;
  context.beginPath();
  //这里是控制裁剪区域的大小(这里也决定你所要生成的图片的大小和形状 我这边用的是圆形的头像 大家有别的需要可以修改)
  context.arc(width/2, height/2, Math.min(width, height)/2, 0, 2 * Math.PI);
  context.strokeStyle = 'rgba(0,0,0,0)';
  context.stroke();
  context.clip();
  context.drawImage(sourceCanvas, 0, 0, width, height);
  return canvas;
 }
 $(function(){
  var $image = $('#image');
  var $button = $('#button');
  var $result = $('#result');
  var croppable = false;
  $image.cropper({
   aspectRatio: 1,
   viewMode: 1,
   ready: function () {
    croppable = true;
   }
  });
  $button.on('click', function () {
   var croppedCanvas;
   var roundedCanvas;
   if (!croppable) {
    return;
   }
   // 裁剪
  croppedCanvas = $image.cropper('getCroppedCanvas');
  //判断图片大小,如果超过1080 则返回
   if(croppedCanvas.width>1080){
   alert("图片过大,请重新选择!");
   return false;
   }
   // 生成圆形
  roundedCanvas = getRoundedCanvas(croppedCanvas);
   //将裁剪区域的图片转出图片的base64编码,放到表单里提交到后台。后台再对其进行解码,保存。
   $("#icon").val(roundedCanvas.toDataURL());
   $.ajax({
   url:'${path }/front/saveUserIcon',
   data:$("#submitForm").serialize(),
   type:'POST',
   success:function(data){
   if(data.code==200){
    parent.location.reload(); // 父页面刷新
      var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
      parent.layer.close(index);
   }else{
   warningAlert(data.msg);
   }
   }
   });
   return false;
 });
 //当选择完图片后,直接提交表单到后台,图片保存后再回到此页面。这样此页面的图片裁剪画布就改变成你所选择的图片了
  $("#file").change(function(){
   var fileName=$("#file").val();
   fileName=fileName.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("所选图片格式错误或者不支持此类图片格式!");
   }   
   return 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="external nofollow" class="btn btn-primary radius"><i class="iconfont">󰀠</i> 选择图片</a>
  <input type="file" name="file" id="file" class="input-file">
  <input type="hidden" name="originalImage" value="${imageRelativePath}"/>  
 </span>
 </form>
 <div>
 <c:if test="${!empty imageRelativePath }">
  <img id="image" src="${path }/${imageRelativePath}" alt="Picture">
 </c:if>
 <c:if test="${!empty userico }">
  <img id="image" src="${path }/${userico}" alt="Picture">
 </c:if>
 <c:if test="${!empty teachericon }">
  <img id="image" src="${path }/${teachericon}" alt="Picture">
 </c:if>
 </div> 
 <form id="submitForm" action="" method="post">  
  <input type="hidden" name="originalImage" value="${imageRelativePath}"/>
  <input type="hidden" name="icon" id="icon"/>
 </form>
 <input class="btn btn-primary size-M radius" type="button" id="button" value="上传头像">
 <div id="result"></div>
 </div>
</body>
</html>

snippet_file_0.txt

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

//用户上传头像
 /**
 * 
 * @param image 选择的图片
 * @param model
 * @param userId 用户id
 * @param userType 用户类型
 * @param request
 * @param originalImage 上一张临时图片
 * @return
 */
 @RequestMapping(value="/imageUpload",method=RequestMethod.POST)
 public String iconImageUpload(@RequestParam(value="file",required=false)MultipartFile image,Model model,@CookieValue("userId")String userId,HttpServletRequest request,String originalImage){
 String basePath="image/";
 //web.xml里面配置的用户图片存储路径
 String userImagePath=request.getSession().getServletContext().getInitParameter("userImageSavePath");
 //图片相对路径 
 String imageRelativePath=FileUtils.fileUpload(image, request,basePath+userImagePath);
 System.out.println("图片保存路径------"+imageRelativePath);
 System.out.println("上一张临时图片------"+originalImage);
 //删除上一张临时图片
 if(originalImage!=null){
 String basePathTemp=request.getSession().getServletContext().getRealPath("/");
 FileUtils.deleteFile(basePathTemp+originalImage);
 }
 model.addAttribute("imageRelativePath", imageRelativePath);
 model.addAttribute("userId", userId);
 return "/crop_image"; 
 }
 //将裁剪好的头像由base64还原成图片
 @ResponseBody
 @RequestMapping(value="/saveUserIcon",method=RequestMethod.POST)
 public Msg saveUserIcon(String icon,@CookieValue("userType")String userType,@CookieValue("userId")String userId,String originalImage,HttpServletRequest request){
 System.out.println("icon-----"+icon);
 //先生成图片地址
 String realpath=request.getSession().getServletContext().getRealPath("/");
 String basePath="image/";
 String userImagePath=request.getSession().getServletContext().getInitParameter("userImageSavePath");
 Calendar now=Calendar.getInstance();
 String relativePath=basePath+userImagePath+"/"+now.get(Calendar.YEAR)+"/"+(now.get(Calendar.MONTH)+1)+"/"+now.get(Calendar.DAY_OF_MONTH)+"/"+FileUtils.getUUID()+".png";
 String imagePath=realpath+relativePath;
 //将base64 转换成图片
 FileUtils.base64ToImage(icon, imagePath);
 //删除原图
 if(originalImage!=null){
 FileUtils.deleteFile(realpath+originalImage); 
 }
 return Msg.success();
 }
 //下面是解码的方法
 public static boolean base64ToImage(String base64, String path) {// 对字节数组字符串进行Base64解码并生成图片 
  if (base64 == null){ // 图像数据为空 
   return false; 
  } 
  System.out.println(base64);
  // base64 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
  base64=base64.split(",")[1];
  BASE64Decoder decoder = new BASE64Decoder(); 
  try { 
   // Base64解码 
   byte[] bytes = decoder.decodeBuffer(base64); 
   for (int i = 0; i < bytes.length; ++i) { 
    if (bytes[i] < 0) {// 调整异常数据 
     bytes[i] += 256; 
    } 
   } 
   // 生成图片 
   OutputStream out = new FileOutputStream(path); 
   out.write(bytes); 
   out.flush(); 
   out.close(); 
   return true; 
  } catch (Exception e) { 
   return false; 
  } 
 }

总结

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

Javascript 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
javascript折半查找详解
Jan 26 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 #Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 #Javascript
微信小程序之选项卡的实现方法
Sep 29 #Javascript
vue-cli的eslint相关用法
Sep 29 #Javascript
JavaScript数组的5种迭代方法
Sep 29 #Javascript
微信小程序之GET请求的实例详解
Sep 29 #Javascript
js仿微信抢红包功能
Sep 25 #Javascript
You might like
PHP中鲜为人知的10个函数
2014/02/28 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
Servlet方面面试题
2016/09/28 面试题
七年级政治教学反思
2014/02/03 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
争先创优心得体会
2014/09/12 职场文书
丧事答谢词
2015/01/05 职场文书
安全员岗位职责
2015/02/10 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL