首页
所有分类
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 相关文章推荐
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
使用JS进行目录上传（相当于批量上传）
Dec 05 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
js实现延迟加载的方法
Jun 24 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
JavaScript onclick事件使用方法详解
May 15 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
请假条(31) 倡议书(159) 保证书(97) 决心书(42) 评语(336) 主持词(345) 活动总结(790) 责任书(145) 建议书(203) 感谢信(72)
You might like
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python元组常见操作示例
2019/02/19 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
pytorch中index_select()的用法详解
2021/01/06 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
英国优质家居用品网上品牌：URBANARA
2018/06/01 全球购物
线程问题：wait()方法是定义在哪个类里面
2015/07/07 面试题
体育教师自荐信范文
2013/12/16 职场文书
幼儿园运动会口号
2014/06/07 职场文书
党员学习党的群众路线思想汇报（5篇）
2014/09/10 职场文书
2014年小学教师工作总结
2014/11/10 职场文书