jquery截图，写到一半，发现思路错了

var wrap_h = 300;
var wrap_w = 400;
var image_url = '1.jpg';
$("#imagecut_placeholder").css({
height:wrap_h+"px",
width:wrap_w+"px",
border:'1px solid grey',
position:'relative'
});
var img_1 = "<img id='imagecut_img_1' style='text-align:center;margin:0px auto;' src='"+image_url+"''>";


var img_2 = "<img id='imagecut_img_2' style='z-index:110' src='"+image_url+"'>";


var div_grey = "<div id='imagecut_div_1' style='z-index:100;height:"+wrap_h+"px;width:"+wrap_w+"px;background-color:black;opacity:0.5;'></div>";


var square = 
 "<div class='imagecut_square' id='imagecut_square_top_left'></div>"
+"<div class='imagecut_square' id='imagecut_square_top_middle'></div>"
+"<div class='imagecut_square' id='imagecut_square_top_right'></div>"
+"<div class='imagecut_square' id='imagecut_square_bottom_left'></div>"
+"<div class='imagecut_square' id='imagecut_square_bottom_middle'></div>"
+"<div class='imagecut_square' id='imagecut_square_bottom_right'></div>"


+"<div class='imagecut_square' id='imagecut_square_left_middle'></div>"
+"<div class='imagecut_square' id='imagecut_square_right_middle'></div>"
;


var select_window = "<div style='overflow:hidden;z-index:120' id='imagecut_select_window'>";


$("#imagecut_placeholder").html(img_1+select_window+img_2+"</div>"+div_grey+square);


var image_h = $("#imagecut_img_1").height();
var image_w = $("#imagecut_img_1").width();


var h_prop = image_h/wrap_h;
var w_prop = image_w/wrap_w;


//图片进行比例压缩
//如果图片的高，宽都小于wrap那么显示原图，居中
if(image_h<= wrap_h && image_w <= wrap_w) {


}


if(image_h> wrap_h && image_w > wrap_w) {
//如果高度比大于宽度比
if(h_prop>w_prop) {
//以高度为基准
image_h = wrap_h;
image_w = image_w/h_prop;
}else{
//如果宽度比大于高度比
//以宽度为基准
image_h = image_h/w_prop;
image_w = wrap_w;
}
}


if(image_h> wrap_h && image_w < wrap_w) {
//以高度为基准
image_h = wrap_h;
image_w = image_w/h_prop;
}


if(image_h< wrap_h && image_w > wrap_w) {
//以宽度为基准
image_h = image_h/w_prop;
image_w = wrap_w;


}
var image_left = (wrap_w - image_w)/2;
var image_top = (wrap_h - image_h)/2;
var image_left_px = image_left +"px";
var image_top_px = image_top +"px";


$("#imagecut_img_1").css({
height:image_h,
width:image_w,
position:'absolute',
top:image_top_px,
left:image_left_px
});
//选取窗口的初始高度、宽度
var select_window_w = image_w*0.7;
var select_window_h = image_w*0.7*0.75;
//选出窗口的初始偏移量
var select_window_left = (wrap_w-select_window_w )/2;
var select_window_top = (wrap_h-select_window_h )/2;


//选取窗口样式设定
$("#imagecut_select_window").css({
width:select_window_w+'px',
height:select_window_h+'px',
position:'absolute',
top: select_window_top+'px',
left:select_window_left+'px'
});


//拖拽点样式设定
$(".imagecut_square").css({
height: '3px',
width: '3px',
border: '1px solid black',
background: 'black',
opacity:'0.5',
'z-index':'130'
})


//设置图片2的样式
$("#imagecut_img_2").css({
height:image_h,
width:image_w
});


$("#imagecut_img_2").css('margin-top',"-"+(select_window_top-image_top)+'px');
$("#imagecut_img_2").css('margin-left',"-"+(select_window_left-image_left)+'px');


//获取样式点的高度
var square_offset = $("#imagecut_square_top_left").height();




//设置拖拽点的偏移量
$("#imagecut_square_top_left").css({
position:'absolute',
top:select_window_top-square_offset+'px',
left:select_window_left-square_offset+'px',
cursor:'se-resize'
});
$("#imagecut_square_top_middle").css({
position:'absolute',
top:select_window_top-square_offset+'px',
left:select_window_left+(select_window_w/2)-square_offset+'px',
cursor:'ne-resize'
});
$("#imagecut_square_top_right").css({
position:'absolute',
top:select_window_top-square_offset+'px',
left:select_window_left+select_window_w-square_offset+'px',
cursor:'ne-resize'
});
$("#imagecut_square_bottom_left").css({
position:'absolute',
top:select_window_top+select_window_h-square_offset+'px',
left:select_window_left-square_offset+'px',
cursor:'ne-resize'
});
$("#imagecut_square_bottom_middle").css({
position:'absolute',
top:select_window_top+select_window_h-square_offset+'px',
left:select_window_left+(select_window_w/2)-square_offset+'px',
cursor:'se-resize'
});
$("#imagecut_square_bottom_right").css({
position:'absolute',
top:select_window_top+select_window_h-square_offset+'px',
left:select_window_left+select_window_w-square_offset+'px',
cursor:'se-resize'
});
$("#imagecut_square_right_middle").css({
position:'absolute',
top:select_window_top+(select_window_h/2)-square_offset+'px',
left:select_window_left+select_window_w-square_offset+'px',
cursor:'ne-resize'
});
$("#imagecut_square_left_middle").css({
position:'absolute',
top:select_window_top+(select_window_h/2)-square_offset+'px',
left:select_window_left-square_offset+'px',
cursor:'ne-resize'
});


var select_window_init_h = $("#imagecut_select_window").height();
var select_window_init_w = $("#imagecut_select_window").width()


//拖拽的实现
//鼠标按下事件
$("div.imagecut_square").mousedown(function(e) {
//鼠标移动事件
var mouse_init_x = e.pageX;
var mouse_init_y = e.pageY;
var square_obj = $(this);
//鼠标初始的位置
var square_init_top = parseFloat(square_obj.css('top').replace("px",''));
var square_init_left = parseFloat(square_obj.css('left').replace("px",''));


var sign = 1;


$("div.wrap").mousemove(function(e2) {
//事实记录鼠标的偏移量x,y，将其反馈到function
if(sign) {
//鼠标当前的位置
var mouse_x = e2.pageX;
var mouse_y = e2.pageY;
//鼠标的偏移量
var mouse_x_offset = mouse_x-mouse_init_x;
var mouse_y_offset = mouse_y-mouse_init_y;

$('div.text').html(square_init_left+"|"+mouse_x_offset+"|");
//修改小方块的坐标
square_obj.css('top',square_init_top+mouse_y_offset+'px');
square_obj.css('left',square_init_left+mouse_x_offset+'px');




$("#imagecut_select_window").css({
'top':square_init_top+square_offset+mouse_y_offset+'px',
'left' : square_init_left+square_offset+mouse_x_offset+'px',
'height':select_window_init_h-mouse_y_offset+'px',
'width':select_window_init_w-mouse_x_offset+'px',
});
//得到当前鼠标下的square
var square_sign = square_obj.attr('id').replace('imagecut_','');


//获取每个square的坐标




//parseFloat($("#imagecut_square_top_middle").css('top').replace('px',''))


switch(square_sign) {
case 'top_left':
//$("#imagecut_square_top_left")
$("#imagecut_square_top_middle").css({
'top':square_init_top+mouse_y_offset+'px',
'left':square_init_left
});
$("#imagecut_square_top_right")
$("#imagecut_square_bottom_left")
$("#imagecut_square_bottom_middle")
$("#imagecut_square_bottom_right")
$("#imagecut_square_left_middle")
$("#imagecut_square_right_middle")
break;
case 'top_middle':
$("#imagecut_square_top_left")
//$("#imagecut_square_top_middle")
$("#imagecut_square_top_right")
$("#imagecut_square_bottom_left")
$("#imagecut_square_bottom_middle")
$("#imagecut_square_bottom_right")
$("#imagecut_square_left_middle")
$("#imagecut_square_right_middle")
break;
case 'top_right':
$("#imagecut_square_top_left")
$("#imagecut_square_top_middle")
//$("#imagecut_square_top_right")
$("#imagecut_square_bottom_left")
$("#imagecut_square_bottom_middle")
$("#imagecut_square_bottom_right")
$("#imagecut_square_left_middle")
$("#imagecut_square_right_middle")
break;
case 'bottom_left':
$("#imagecut_square_top_left")
$("#imagecut_square_top_middle")
$("#imagecut_square_top_right")
//$("#imagecut_square_bottom_left")
$("#imagecut_square_bottom_middle")
$("#imagecut_square_bottom_right")
$("#imagecut_square_left_middle")
$("#imagecut_square_right_middle")
break;
case 'bottom_middle':
$("#imagecut_square_top_left")
$("#imagecut_square_top_middle")
$("#imagecut_square_top_right")
$("#imagecut_square_bottom_left")
//$("#imagecut_square_bottom_middle")
$("#imagecut_square_bottom_right")
$("#imagecut_square_left_middle")
$("#imagecut_square_right_middle")
break;
case 'bottom_right':
$("#imagecut_square_top_left")
$("#imagecut_square_top_middle")
$("#imagecut_square_top_right")
$("#imagecut_square_bottom_left")
$("#imagecut_square_bottom_middle")
//$("#imagecut_square_bottom_right")
$("#imagecut_square_left_middle")
$("#imagecut_square_right_middle")
break;
case 'left_middle':
$("#imagecut_square_top_left")
$("#imagecut_square_top_middle")
$("#imagecut_square_top_right")
$("#imagecut_square_bottom_left")
$("#imagecut_square_bottom_middle")
$("#imagecut_square_bottom_right")
//$("#imagecut_square_left_middle")
$("#imagecut_square_right_middle")
break;
case 'right_middle':
$("#imagecut_square_top_left")
$("#imagecut_square_top_middle")
$("#imagecut_square_top_right")
$("#imagecut_square_bottom_left")
$("#imagecut_square_bottom_middle")
$("#imagecut_square_bottom_right")
$("#imagecut_square_left_middle")
//$("#imagecut_square_right_middle")
break;


}
}

});


$("body").mouseup(function() {
sign = 0;
});
});