首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用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裁剪头像的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

剑火6

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
js 操作符实例代码
Oct 24 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
jquery 模板的应用示例
Nov 12 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
浅谈js原生拖放
Nov 21 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
分词器(1) mediapipe(1) 无限迭代(1) okenizer(1) for(1) 事件调度器(1) re模块(2) while(1) sched(1) cvzone(1)
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php split汉字
2009/06/05 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
Javascript优化技巧（文件瘦身篇）
2008/01/28 Javascript
javascript prototype 原型链
2009/03/12 Javascript
JS左右无缝滚动（一般方法+面向对象方法）
2012/08/17 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python实现对输入的密文加密
2019/03/20 Python
详解python之heapq模块及排序操作
2019/04/04 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
python 批量将中文名转换为拼音
2021/02/07 Python
Brora官网：英国领先的羊绒服装品牌
2019/08/28 全球购物
DOUGLAS波兰：在线销售香水和化妆品
2020/07/05 全球购物
Cynthia Rowley官网：全球领先的生活方式品牌
2020/10/27 全球购物
服务生自我鉴定
2014/01/22 职场文书
优秀团支部申报材料
2014/12/26 职场文书
小学教师党员承诺书
2015/04/27 职场文书
十八大观后感
2015/06/12 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
《打电话》教学反思
2016/02/22 职场文书