使用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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
Ajax基础知识详解
Feb 17 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
vuex实现数据状态持久化
Nov 11 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
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python类中super()和__init__()的区别
2016/10/18 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
python 字典的打印实现
2019/09/26 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
高中体育教学反思
2014/01/29 职场文书
物业品质提升方案
2014/06/08 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
严以律己学习心得体会
2016/01/13 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js