使用jquery的imgAreaSelect插件实现图片问题
0
悬赏园豆：10
[已关闭问题]
关闭于 2014-01-04 17:25
代码如下
function upload() {
var options = {
type: "POST", //当然这个是传送方式
url: 'File.ashx', //一般处理程序的路径
success: function (msg) { //返回的参数
var msg_first = msg.split("$");
msg_first[0] = msg_first[0].split("<pre>")[1];
msg_first[2] = msg_first[2].split("</pre>")[0];
$("#img_UserPhoto1").attr("src", msg_first[0]); //回显图片。
$("#img_UserPhoto1").css("width", msg_first[1]+"px");
$("#img_UserPhoto1").css("height", msg_first[2]+"px");
$("#bigPic").attr("src", msg_first[0]);
$("#smallPic").attr("src", msg_first[0]);
//初始化Jcrop
//JcropInit();
$('#img_UserPhoto1').imgAreaSelect({ aspectRatio: '1:1',handles: true,x1:0,y1:0,x2:90,y2:90,onInit: OnInit ,onSelectChange: preview });
}
}; // 将options传给ajaxForm
$('#aspnetForm').ajaxSubmit(options);
}
第一次上传图片，小图片可以对应显示大图片选择的区域，再次上传小图片就不能显示大图片的区域了，调试发现第一次上传 OnInit方法会执行，再次上传不就执行了，如果重新刷新页面，就执行，求助怎么可以在每次上传都执行OnInit，或者其他的方法也可以。
问题补充：
function preview(img, selection) {
var scaleX1 = 120 / (selection.width || 1);
var scaleY1 = 120 / (selection.height || 1);
var scaleX2 = 60 / (selection.width || 1);
var scaleY2 = 60 / (selection.height || 1);
var width = $("#img_UserPhoto1").width();
var height = $("#img_UserPhoto1").height();
$('#bigPic').css({
width: Math.round(scaleX1 * width) + 'px',
height: Math.round(scaleY1 * height) + 'px',
marginLeft: '-' + Math.round(scaleX1 * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY1 * selection.y1) + 'px'
});
$('#smallPic').css({
width: Math.round(scaleX2 * width) + 'px',
height: Math.round(scaleY2 * height) + 'px',
marginLeft: '-' + Math.round(scaleX2 * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY2 * selection.y1) + 'px'
});
}
function OnInit(img, selection) {
var scaleX1 = 120 / (selection.width || 1);
var scaleY1 = 120 / (selection.height || 1);
var scaleX2 = 60 / (selection.width || 1);
var scaleY2 = 60 / (selection.height || 1);
var width = $("#img_UserPhoto1").width();
var height = $("#img_UserPhoto1").height();
$('#bigPic').css({
width: Math.round(scaleX1 * width) + 'px',
height: Math.round(scaleY1 * height) + 'px',
marginLeft: '-' + Math.round(scaleX1 * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY1 * selection.y1) + 'px'
});
$('#smallPic').css({
width: Math.round(scaleX2 * width) + 'px',
height: Math.round(scaleY2 * height) + 'px',
marginLeft: '-' + Math.round(scaleX2 * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY2 * selection.y1) + 'px'
});
}
所有回答(1)
0
再次初始化下
