上传头像,旋转后裁切没法正确获取旋转后图像
发布时间:2011-06-27 19:11:22 文章来源:www.iduyao.cn 采编人员:星星草
上传头像,旋转后裁切无法正确获取旋转后图像
代码如下:
<!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]
旋转后未能正确显示到主图框,怎么修改都达不到效果,希望大家指点一下,谢谢!
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
关于opengl源码的问题
gluPickMatrix函数的实现在哪?我在glut源码中找了半天没有找到
------解决方案--------------------
这是...
-
关于傅立叶变换的数字水印嵌入算法的问题
需求:
首先对图像和水印图像进行傅里叶变换;
讲数字水印嵌入到图像中;
逆变换显示潜入水印...
-
Matlab和OpenCV的处理速度问题
大家好!我正准备用Windows下的OPENCV实现MSR算法来处理图像,目前已经有在Matlab下面的处理的程序,但...
-
问一个Ghostscript的问题!
我用Ghostscript API将eps转换成pdf,在其他的环境下都能很好的执行。但是在windows server 2008上却不行...
-
求教D3D9.DLL为什么没有被游戏进程加载?
我本来想wrap一下D3D9.DLL给一个3D游戏搞点破坏,但用IcdSword监视一下游戏使用模块,发现连D...
-
请教几个DirectX的问题
1:切线贴图就是法线贴图的意思么?
如果不是,那两者有什么区别?
2:The NPatch mode segments 是什么意思?
原文:
...
-
用OpenCV作的一个车牌识别程序
新手用OpenCV作的一个车牌识别程序,目前只能处理黄底黑字
的车牌图像,供大家交流学习之用。如果感...
-
求助:用matlab实现图像的dct变换
如题
用matlab实现图像的dct变换
不要用自带的dct2函数
多谢了
------解决方案----------------...
-
建了一个群,OCR字符识别技术,欢迎大家加入!
欢迎大家讨论各种字符的识别技术,从图像的预处理到最后分类识别的过程都可以讨论。
qq...
-
Matlab下怎么才能把封闭曲线作为边界判断区域内外
大家好!我对一幅图进行边缘分割,得到了边缘(是一条曲线),下一步想要用得到的边缘曲...