浏览 2640 次
|
锁定老帖子 主题：上传头像，旋转后裁切无法正确获取旋转后图像
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2016-12-20
最后修改：2016-12-20
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>上传</title> <link href="c/basic.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="c/jquery.jcrop.css" type="text/css"/> <script src="j/jQuery.js" type="text/javascript"></script> <script type="text/javascript" src="j/bas ic.js"> </script> <script src="j/jquery.ajaxfileupload.js" type="text/javascript"></script> <script src="j/jquery.jcrop.js" type="text/javascript"></script> <script src="j/avatarCutter.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { function getFileSize(fileName) { var byteSize = 0; //console.log($("#" + fileName).val()); if($("#" + fileName)[0].files) { var byteSize = $("#" + fileName)[0].files[0].size; }else { //var file = document.getElementById(fileName); //var img = new Image(); //file.select(); //alert(document.selection.createRange().text); //img.src = file.value; //img.style.display="none"; //alert(img.readyState);return 0; //if(img.readyState=="complete"){//已经load完毕，直接打印文件大小 // alert(img.fileSize);//ie获取文件大小 //}else { // img.onreadystatechange=function(){ // if(img.readyState=='complete')//当图片load完毕 // alert(img.fileSize);//ie获取文件大小 // } //} //byteSize = img.fileSize; //byteSize = img.fileSize; } //alert(byteSize); byteSize = Math.ceil(byteSize / 1024) //KB return byteSize;//KB } $("#btnUpload").click(function () { var allowImgageType = ['jpg', 'jpeg', 'png', 'gif']; var file = $("#file1").val(); //获取大小 var byteSize = getFileSize('file1'); //获取后缀 if (file.length > 0) { if(byteSize > 2048) { alert("上传的附件文件不能超过2M"); return; } var pos = file.lastIndexOf("."); //截取点之后的字符串 var ext = file.substring(pos + 1).toLowerCase(); //console.log(ext); if($.inArray(ext, allowImgageType) != -1) { ajaxFileUpload(); }else { alert("请选择jpg,jpeg,png,gif类型的图片"); } } else { alert("请选择jpg,jpeg,png,gif类型的图片"); } }); function ajaxFileUpload() { $.ajaxFileUpload({ url: 'action.php', //用于文件上传的服务器端请求地址 secureuri: false, //一般设置为false fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" /> dataType: 'json', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { //var json = eval('(' + data + ')'); //alert(data); $("#picture_original>img").attr({src: data.src, width: data.width, height: data.height}); $('#imgsrc').val(data.path); //alert(data.msg); //同时启动裁剪操作，触发裁剪框显示，让用户选择图片区域 var cutter = new jQuery.UtrialAvatarCutter({ //主图片所在容器ID content : "picture_original", //缩略图配置,ID:所在容器ID;width,height:缩略图大小 purviews : [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}], //选择器默认大小 selector : {width:200,height:200}, showCoords : function(c) { //当裁剪框变动时，将左上角相对图片的X坐标与Y坐标 宽度以及高度 $("#x1").val(c.x); $("#y1").val(c.y); $("#cw").val(c.w); $("#ch").val(c.h); }, cropattrs : {boxWidth: 395, boxHeight: 400} } ); cutter.reload(data.src); //var purviews = [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}]; }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } }) return false; } //图片旋转 function imgRotate(deg){ var img1 = $("#picture_original>img"), _data = parseInt($(".jc-demo-box").attr("data")); if($.browser.version == 8.0 || $.browser.version == 7.0 || $.browser.version == 6.0 ){ var sin = Math.sin(Math.PI / 180 * (_data + deg)), cos = Math.cos(Math.PI / 180 * (_data + deg)); var _filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + "," + "M12=" + (-sin) + ",M21=" + sin+ ",M22=" + cos + ",SizingMethod='auto expand')"; img1.css({ filter: _filter }); $('#picture_200 img,#picture_50 img,#picture_30 img').css({ filter: _filter }); }else{ var _deg = deg + _data; var _val = "rotate("+ _deg + "deg)"; img1.css({ "-webkit-transform": _val, "-moz-transform": _val, "-ms-transform": _val, "-o-transform": _val, "transform": _val }); $('#picture_200 img,#picture_50 img,#picture_30 img').css({ "-webkit-transform": _val, "-moz-transform": _val, "-ms-transform": _val, "-o-transform": _val, "transform": _val }); } var fiw = $('#picture_original>img').width(), fih = $('#picture_original>img').height(), ow = Math.floor((395 - fiw) / 2), oh = Math.floor((340 - fih) / 2), cx = $("#small").position().left, cy = $("#small").position().top, rx = 110 / $("#small").width(), ry = 135 / $("#small").height(), rx1 = 73 / $("#small").width(), ry1 = 90 / $("#small").height(), rx2 = 40 / $("#small").width(), ry2 = 48 / $("#small").height(); if($.browser.version == 8.0 || $.browser.version == 7.0 || $.browser.version == 6.0){ pre_img2($('#picture_200 img'), rx, fih, ry, fiw, cx, cy, ow, oh); pre_img2($('#picture_50 img'), rx1, fih, ry1, fiw, cx, cy, ow, oh); pre_img2($('#picture_30 img'), rx2, fih, ry2, fiw, cx, cy, ow, oh); }else{ pre_img2($('#picture_200 img'), rx, fiw, ry, fih, cx, cy, ow, oh); pre_img2($('#picture_50 img'), rx1, fiw, ry1, fih, cx, cy, ow, oh); pre_img2($('#picture_30 img'), rx2, fiw, ry2, fih, cx, cy, ow, oh); } $("#picture_original img").css({ left: ow, top: oh }); if( deg > 0){ if(_data == 270){ _data = 0; }else{ _data = _data + 90; } }else{ if(_data == 0){ _data = 270; }else{ _data = _data - 90; } } $("#d").val(_data); $(".jc-demo-box").attr("data", _data); } function pre_img2(obj, rx, iw, ry, ih, cx, cy, ow, oh){ obj.css({ width: Math.round(rx * iw) + 'px', height: Math.round(ry * ih) + 'px' }); if( cy >= oh && cx >= ow){ obj.css({ marginLeft: '-' + Math.round(rx * (cx - ow)) + 'px', marginTop: '-' + Math.round(ry * (cy - oh)) + 'px' }); }else if( cy <= oh && cx >= ow){ obj.css({ marginLeft: "-" + Math.round(rx * (cx - ow)) + 'px', marginTop: Math.round(ry * (oh - cy)) + 'px' }); }else if( cy >= oh && cx <= ow){ obj.css({ marginLeft: Math.round(rx * (ow - cx)) + 'px', marginTop: '-' + Math.round(ry * (cy - oh)) + 'px' }); }else if( cy <= oh && cx <= ow){ obj.css({ marginLeft: Math.round(rx * (ow - cx)) + 'px', marginTop: Math.round(ry * (oh - cy)) + 'px' }); } }; //默认图像位置 function cutImage(obj) { var w = 395, h = 340, iw = obj.width(), ih = obj.height(); if(iw > w || ih > h){ if(iw / ih > w / h){ obj.css({ width: w, height: w * ih / iw, top: (h - (w * ih / iw)) / 2, left: 0 }); }else{ obj.css({ height: h, width: h * iw / ih, top: 0, left: (w - (h * iw / ih)) / 2 }); } }else{ obj.css({ left: (w - iw) / 2, top: (h - ih ) / 2 }); } } $("#idLeft").click(function(e){ imgRotate(-90); return false; }); $("#btns").click(function(e){ imgRotate(90); return false; }); $('#btnCrop').click(function() { $.getJSON('action2.php', {x: $('#x1').val(), y: $('#y1').val(), w: $('#cw').val(), h: $('#ch').val(), src: $('#imgsrc').val()}, function(data) { alert(data.msg); }); return false; }); }); </script> </head> <body> <p><input type="file" id="file1" name="file1" /></p> <input type="button" value="上传" id="btnUpload"/> <input type="text" id="imgsrc" name="imgsrc" /> <input type="button" value="裁剪上传" id="btnCrop"/> <input type="button" value="旋转" id="btns"/> <div class="wrap" id="jcropdiv"> <div class="wl"> <div class="jc-demo-box" data="0"> <div id="picture_original" class=#picture_original" > <img alt="" src="i/bb.jpg" /> </div> </div> </div> <div class="wr" id="preview-pane"> <div class="preview-container"> <div id="picture_200" ></div> <div id="picture_50" ></div> <div id="picture_30" ></div> <input type="hidden" id="x1" name="x1" value="0" /> <input type="hidden" id="y1" name="y1" value="0" /> <input type="hidden" id="cw" name="cw" value="0" /> <input type="hidden" id="ch" name="ch" value="0" /> </div> </div> </d </body> </html> 小图可显示旋转效果，但大图旋转后变到右下角了，未居中显示，剪切后还是未旋转前的角度？ 上传图片后效果 
旋转后效果: 
移动选区后效果: 
剪切后效果 
旋转后未能正确显示到主图框，怎么修改都达不到效果，希望大家指点一下，谢谢! 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
