wqb139
- 浏览: 590 次
-
文章分类
最新评论
上传头像，旋转后裁切无法正确获取旋转后图像
代码如下:
<!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]
旋转后未能正确显示到主图框，怎么修改都达不到效果，希望大家指点一下，谢谢!
分享到：
发表评论
相关推荐
5. **用户体验优化**：一个优秀的头像上传插件还需考虑用户体验，例如提供实时预览，让用户在上传前就能看到裁切和旋转的效果；进度条显示文件上传进度，增强交互感；错误提示处理，如文件过大或格式不正确时的友好...
【PHP头像上传预览裁切源码】是用于实现用户在网站上上传个人头像时，能够实时预览并自定义裁剪区域的技术方案。这个功能在许多社交网络、论坛或者个人资料设置页面中非常常见，允许用户个性化地调整上传图片的显示...
"jquery头像预览裁切"是一个常见的需求，特别是在社交媒体、个人资料设置或者在线上传照片的应用场景中。这个主题涉及到jQuery库的使用，一个强大的JavaScript库，以及cropbox.js插件，它专门用于图像裁剪和预览功能...
总的来说，这个插件提供了一套完整的解决方案，涵盖了头像上传、裁切、旋转和缩略图的前端需求，并且兼容Bootstrap，对于开发人员来说，能够快速集成到他们的项目中，提升用户界面的专业性和互动性。而没有包含任何...
包括了ASP/ASP.NET/JSP/PHP四个版本的头像上传和裁切实例，上传图片成功后，会自动生成三种大小的图片供预览，可旋转头像图片，用户操作了裁切功能后，同样可适时预览三个大小的头像效果。 本地头像上传支持的...
综上所述，"Flash裁切 头像上传"是一个利用Adobe Flash技术实现的交互式头像管理系统，它结合了图像上传、裁切和摄像头捕获功能，提供了用户友好的体验。尽管Flash已经不再是当前主流的开发技术，但理解其在这一领域...
这些库提供了一套完整的图像裁剪工具，包括调整裁剪区域大小、位置，以及进行旋转和缩放等操作。开发者可以设置裁剪参数，如宽高比、最小尺寸等，以满足特定的需求。例如，用户在上传头像时，可能需要确保图片为...
在Android开发中，实现类似微信头像裁切功能是一个常见的需求，这涉及到图像处理和用户交互的结合。本文将深入探讨如何使用Android源码来创建一个高仿微信的头像裁切程序，主要关注以下几个核心知识点： 1. **...
在IT行业中，头像上传裁剪插件是一种常见的交互元素，尤其在社交网络、个人资料设置等场景下，用户往往需要自定义头像大小和形状，以满足个性化需求。本插件专注于提供一个便捷的头像裁剪解决方案，结合前端与后端...
【jQuery新浪微博头像裁切预览代码】是一个利用JavaScript库jQuery实现的功能，它允许用户在上传微博头像前进行裁剪并实时预览效果。这个功能对于提高用户体验，特别是社交媒体平台，至关重要，因为它让用户能够更好...
4. **获取结果**：裁剪完成后，可以通过`cropper.getCroppedCanvas()`获取裁剪后的canvas对象，进一步转换为Base64字符串或Blob对象用于上传。 5. **销毁实例**：当不再需要Cropper时，调用`cropper.destroy()`来...
裁剪完成后，新的头像图片会被保存到指定的目录，通常会有一个特定的用户标识来区分每个用户的头像。 为了确保用户体验，系统应该有错误处理机制，比如检查上传的文件是否为合法的图像格式，文件大小是否超过限制，...
这个程序对于Web开发中的图像处理是至关重要的，尤其是在用户需要上传个人头像或商品图片的场景下。 首先，我们要了解JSP的基础。JSP是一种动态网页技术，它允许我们在HTML页面中嵌入Java代码，使得服务器端能够...