上传头像，旋转后裁切无法正确获取旋转后图像

最新推荐文章于 2022-10-24 15:20:27 发布

iteye_20076

最新推荐文章于 2022-10-24 15:20:27 发布

阅读量397

点赞数

文章标签： JavaScript jQuery ViewUI

本文链接：https://blog.csdn.net/iteye_20076/article/details/82677374

版权

代码如下:

<!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>

小图可显示旋转效果，但大图旋转后变到右下角了，未居中显示，剪切后还是未旋转前的角度？

上传图片后效果

[img=http://img.bbs.csdn.net/upload/201612/20/1482203338_123107.png][/img]

旋转后效果:

[img=http://img.bbs.csdn.net/upload/201612/20/1482203419_83657.png][/img]

移动选区后效果:

[img=http://img.bbs.csdn.net/upload/201612/20/1482203498_447515.png][/img]

剪切后效果

[img=http://img.bbs.csdn.net/upload/201612/20/1482203873_737869.png][/img]

旋转后未能正确显示到主图框，怎么修改都达不到效果，希望大家指点一下，谢谢!