首页 新闻 搜索 专区 学院

使用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'

            });
        }

fulai_xy的主页 fulai_xy | 初学一级 | 园豆:5
提问于:2014-01-04 16:06
< >
分享
所有回答(1)
0

再次初始化下

fulai_xy | 园豆:5 (初学一级) | 2014-01-04 17:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册