使用cropper.js裁剪头像

来源：互联网发布：怎么做好网络宣传编辑：程序博客网时间：2024/06/05 20:57

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

开始先放个成品图：

下面给出前后端的代码

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

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

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

jsp代码：

<%@ 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"><script src="${path }/front/plugins/cropper/cropper.js"></script><link rel="stylesheet" type="text/css" href="${path }/admin/static/h-ui/css/H-ui.min.css" /> <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');           if(croppedCanvas.width>1080){        alert("图片过大,请重新选择!");        return false;        }                // 生成圆形    roundedCanvas = getRoundedCanvas(croppedCanvas);    //判断图片大小,若果超过1080      $("#icon").val(roundedCanvas.toDataURL());         // $("#submitForm").submit();          $.ajax({     url:'${path }/front/saveUserIcon',     data:$("#submitForm").serialize(),     type:'POST',     success:function(data){     if(data.code==200){     //parent.parent.$("#myResumeLi").click();          parent.location.reload(); // 父页面刷新                  var index = parent.layer.getFrameIndex(window.name); //获取窗口索引                  parent.layer.close(index);     }else{     warningAlert(data.msg);     }     }     });     return false;    // var index = parent.layer.getFrameIndex(window.name);     // parent.layer.close(index)        //alert(roundedCanvas.toDataURL());        // Show 将图形转换成base64显示    //$result.html('<img src="' + roundedCanvas.toDataURL() + '">');});            $("#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();" class="btn btn-primary radius"><i class="iconfont">

阅读全文

0 0

怎么做好网络宣传

原创粉丝点击