介绍 & lt; % @ page 语言=癹ava", contentType=皌ext/html;, charset=UTF-8"
,pageEncoding=癠TF-8" %比;
& lt; % @ include 文件=? ./common_front.jsp", %的在,
& lt; ! DOCTYPE html PUBLIC “-//W3C//DTD html 4.01,过渡//EN",“http://www.w3.org/TR/html4/loose.dtd"比;
& lt; html>
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=UTF-8"比;
& lt; title> Insert title here
& lt; link rel=皊tylesheet", href=? {path }/前面/插件/种植者/cropper.css", rel=癳xternal nofollow",在
& lt; script src=? {path }/前面/插件/种植者/cropper.js"祝辞& lt;/script>
,& lt; style>
,.container {
,,max-width: 640 px;
保证金才能:20 px 汽车;
,}
,img {
,,max-width: 100%;
,}
,# result img {
,,max-width: 200 px;
,,max-height: 200 px;
,}
.cropper-view-box,
,.cropper-face {
,,这个特性:50%;
,}
,& lt;/style>
,& lt; script 类型=拔谋?javascript"比;
,function getSize(大小){
var 才能;num=方法(大小);
如果才能(num<=300){//先要求图片的大小小于300年之间
return 才能,num;
,,}
return 才能,getSize (num/2);
,}
,function getRoundedCanvas (sourceCanvas), {
var 才能;canvas =, document.createElement(& # 39;帆布# 39;);
var 才能;context =, canvas.getContext (& # 39; 2 d # 39;);
var 才能;width =, sourceCanvas.width;
var 才能;height =, sourceCanvas.height;
宽度=才能getSize(宽度);
高度才能=宽度;
时间=canvas.width 才能;宽度;
时间=canvas.height 才能;高度;
context.beginPath才能();//这才能里是控制裁剪区域的大小(这里也决定你所要生成的图片的大小和形状,我这边用的是圆形的头像,大家有别的需要可以修改)
context.arc才能(宽/2,,身高/2,Math.min(宽度,高度)/2,,0,,2,*,Math.PI);
时间=context.strokeStyle 才能;& # 39;rgba (0, 0, 0, 0) & # 39;;
context.stroke才能();
context.clip才能();
context.drawImage才能(sourceCanvas, 0, 0,,宽度,高度);
return 才能,帆布;
,}
,$(函数(){
var 才能;image 美元;=,美元(& # 39;#图片# 39;);
var 才能;button 美元;=,美元(& # 39;#按钮# 39;);
var 才能;result 美元;=,美元(& # 39;#结果# 39;);
var 才能;croppable =,假;
美元才能image.cropper ({
,,,aspectRatio: 1,
,,,viewMode: 1,
,,,准备好:function (), {
,,,croppable =,真的;
,,}
,,});
美元才能button.on(& # 39;点击# 39;,,function (), {
,,var croppedCanvas;
,,var roundedCanvas;
,,if (! croppable), {
,,,返回;
,,}
,,//,裁剪
时间=croppedCanvas 才能;美元image.cropper (& # 39; getCroppedCanvas& # 39;);//才能判断图片大小,如果超过1080,则返回
,,如果(croppedCanvas.width> 1080) {
,,警报(“图片过大,请重新选择!“);
,,return 假;
,,}//,,,生成圆形
时间=roundedCanvas 才能;getRoundedCanvas (croppedCanvas);
,,//将裁剪区域的图片转出图片的base64编码,放到表单里提交到后台。后台再对其进行解码,保存。
,,(“# icon")美元.val (roundedCanvas.toDataURL ());
,,. ajax({美元
,,url: & # 39; $ {path }/前面/saveUserIcon& # 39;,
,,数据:$ (“# submitForm") .serialize (),
,,类型:& # 39;文章# 39;
,才能成功:功能(数据){
,,如果(data.code==200) {
,,,parent.location.reload();,//,父页面刷新
,,,,,var index =, parent.layer.getFrameIndex (window.name);,//获取窗口索引
,,,,,parent.layer.close(指数);
其他,,}{
,,warningAlert (data.msg);
,,}
,,}
,,});
,,return 假;
,});
,//当选择完图片后,直接提交表单到后台,图片保存后再回到此页面。这样此页面的图片裁剪画布就改变成你所选择的图片了
美元才能(“# file") .change(函数(){
,,var 文件名=$ (“# file") .val ();
,,文件名=fileName.toLowerCase (),,
,,如果(fileName.indexOf (“.jpg") !=1) | | (fileName.indexOf (“.png") !=1) | | (fileName.indexOf (“.jpeg") !=1) | | (fileName.indexOf (“.bmp") !=1) | | (fileName.indexOf (“.gif") !=1)) {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
使用收割机。js怎么裁剪头像?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
