- 浏览: 562 次
文章分类
最新评论
上传头像,旋转后裁切无法正确获取旋转后图像
代码如下:
<!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]
旋转后未能正确显示到主图框,怎么修改都达不到效果,希望大家指点一下,谢谢!
<!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]
旋转后未能正确显示到主图框,怎么修改都达不到效果,希望大家指点一下,谢谢!
相关推荐
C语言实现图像的旋转缩放裁切,此为本人图像处理与成像制导的作业,完全可以实现,并且附有详细的实验报告。旋转可以自己输入旋转的角度,切割可以输入切割的大小,缩放也是任意比例的缩放,可以自己输入比例系数。
头像上传插件 带裁切 缩略图,旋转等功能
php头像上传预览裁切源码 经我修改完善,亲测可用 已应用到客户网站上。
包括了ASP/ASP.NET/JSP/PHP四个版本的头像上传和裁切实例,上传图片成功后,会自动生成三种大小的图片供预览,可旋转头像图片,用户操作了裁切功能后,同样可适时预览三个大小的头像效果。 本地头像上传支持的...
Halcon图像旋转不被剪切,分为单通道图像和三通道彩色图像;将原始图像放在最小外接圆的外接正方形的画布上,中心对中心的仿射变换使原始图像无论怎么旋转都不会被窗口剪切
头像裁切上传
h5实现的头像裁切上传功能 亲测可用~~~~~
jquery头像预览裁切示例,使用cropbox.js.有个html,css写的loading效果,ajax上传。
此插件是我从网上买下来的,非常实用的头像上传插件带裁切,旋转,缩略图功能。注意里面不含任何后台程序,只是前端的显示。和bootstrap搭配十分和谐。有需要的可以下载。
上传图片可用鼠标拖动自由裁切图片,生成头像 附有源码!
三种头像裁切功能 discuz上传头像,开心网裁切头像,新浪裁切上传头像,.net的falsh裁切头像
最近百度旋转很火啊。论坛搜了各种旋转都不太理想。于是就自行研究。研究位图,发现位图旋转会自动扩充,经过研究,正方形和长方形任意旋转的最大宽度和高度是他的对角长度。...Tags:百度旋转识别源码圆形图像旋转。
php+swf头像切程序,仿照discuz头像裁切组件
jQuery新浪微博头像裁切预览代码,非常好用,已多次运用到项目中。
jQuery仿新浪微博头像裁切预览代码
头像上传,使用了ajax,jquery技术,上传头像类似于Discuz论坛等 原始图片和用户裁切后的头像均保留在服务器端 裁切后自动生成3张图片 仅供学习参考
html5点击修改头像上传图片裁剪代码 html5点击修改头像上传图片裁剪代码
Flash头像上传,可裁切,支持摄像头
PHP+Flash头像图片上传并裁切,很多网站都有这种功能,本款是基于FLASH的,可以实现无刷新上传头像,拖动裁切并保存,测试中功能正常,用起来很不错。