手机自由裁剪任意形状 js图片裁剪原理 _知识分享

项目需求有个功能要实现头像，让我这个后端开发来做这个确实有点为难，结合网上大神的例子，做了个简单的功能，以备不时之需

文章插图
实现效果
页面+js
<base href=https://www.kehuwang.com.cn/k/\\”\\”>
My JSP \\’face.jsp\\’ starting page
<!––><%–<link rel=\\”stylesheet\\” href=https://www.kehuwang.com.cn/k/\\”static/css/bootstrap.css\\”/> –%><link rel=\\”stylesheet\\” href=https://www.kehuwang.com.cn/k/\\”static/css/common.css\\”/><link rel=\\”stylesheet\\” href=https://www.kehuwang.com.cn/k/\\”static/css/jquery.Jcrop.css\\”/><script type=\\”text/javascript\\” src=https://www.kehuwang.com.cn/k/\\”static/js/jquery-1.9.1.min.js\\”><script type=\\”text/javascript\\” src=https://www.kehuwang.com.cn/k/\\”static/js/ajaxfileupload.js\\”><script type=\\”text/javascript\\” src=https://www.kehuwang.com.cn/k/\\”static/js/bootstrap.js\\”><script type=\\”text/javascript\\” src=https://www.kehuwang.com.cn/k/\\”static/js/jquery.json-2.4.js\\” charset=\\”UTF-8\\”><script type=\\”text/javascript\\” src=https://www.kehuwang.com.cn/k/\\”static/js/jquery.validate.js\\”><script type=\\”text/javascript\\” src=https://www.kehuwang.com.cn/k/\\”static/js/jquery.Jcrop.js\\”>
/* jcrop对象，全局变量方便操作 */var api = null;/* 原图宽度 */var boundx;/* 原图高度 */var boundy;
/* 选择图片事件 */function readURL(URL){var reader = new FileReader();reader.readAsDataURL(URL.files[0]);reader.onload = function(e){$(\\”#faceId\\”).removeAttr(\\”src\\”);$(\\”#lookId\\”).removeAttr(\\”src\\”);$(\\”#faceId\\”).attr(\\”src\\”,e.target.result);$(\\”#lookId\\”).attr(\\”src\\”,e.target.result);$(\\”#faceId\\”).Jcrop({onChange: showPreview,onSelect: showPreview,aspectRatio: 1,boxWidth:600},function(){// Use the API to get the real image size//使用API来获得真实的图像大小var bounds = this.getBounds();boundx = bounds[0];boundy = bounds[1];// Store the API in the jcrop_api variable//jcrop_api变量中存储APIapi = this;
$(\\”#boundx\\”).val(boundx);$(\\”#boundy\\”).val(boundy);
});};/* 移除jcrop */if (api != undefined) {api.destroy();}
//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用function showPreview(coords){/* 设置剪切参数 */$(\\”#x\\”).val(coords.x);$(\\”#y\\”).val(coords.y);$(\\”#w\\”).val(coords.w);$(\\”#h\\”).val(coords.h);if(parseInt(coords.w) > 0){//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到var rx = $(\\”#preview_box\\”).width() / coords.w;var ry = $(\\”#preview_box\\”).height() / coords.h;$(\\”#lookId\\”).css({width:Math.round(rx * $(\\”#faceId\\”).width()) + \\”px\\”, //预览图片宽度为计算比例值与原图片宽度的乘积height:Math.round(rx * $(\\”#faceId\\”).height()) + \\”px\\”,//预览图片高度为计算比例值与原图片高度的乘积marginLeft:\\”-\\” + Math.round(rx * coords.x) + \\”px\\”,marginTop:\\”-\\” + Math.round(ry * coords.y) + \\”px\\”});}}
【手机自由裁剪任意形状 js图片裁剪原理】 }
<form name=\\”form\\” action=https://www.kehuwang.com.cn/k/\\”faceUpload.do\\” class=\\”form-horizontal\\” method=\\”post\\” enctype=\\”multipart/form-data\\”>
头像： <img id = \\”faceId\\” src=https://www.kehuwang.com.cn/k/\\”static/img/1.jpg\\” class=\\”jcrop-preview\\” alt=\\”附件\\”>
头像预览： <img id = \\”lookId\\” src=https://www.kehuwang.com.cn/k/\\”static/img/1.jpg\\” class=\\”jcrop-preview\\” alt=\\”预览\\” > 用户名：艺名：
后端控制器
package com.lovo.controller;
import java.io.File;import java.text.SimpleDateFormat;import java.util.Date;
import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.multipart.MultipartFile;
import com.lovo.utils.CutImgeUtil;import com.lovo.utils.FileUploadCheck;
@Controllerpublic class FaceController {
private static Logger logger = Logger.getLogger(FaceController.class);
@RequestMapping(value = https://www.fajihao.com//”/faceUpload.do//”,method = RequestMethod.POST)public void faceLoginController(HttpServletRequest request,HttpServletResponse response,Model model,@RequestParam(//”imgFile//”) MultipartFile imgFile,String userName,String artName){