关于jCrop图片拉伸的问题

一哥们儿网站用到上传头像裁剪，但是不管何种比例图片总是被拉伸到200*300的比例，导致裁剪坐标出现误差。从没接触过这个插件，大体研究了下，发现在调用jcropAPI的时候，会把默认的图片传给裁剪页面，并以此复制出遮盖层、裁剪预览图，so判断问题出在这里，既然第一次调用api就会固定裁剪图片的比例，首先想到的是改变各img的比例，结果裁剪页不会被拉伸了，但是裁剪选择框还是会在200*300的比例范围内移动，看来这条路不同。既然是调用api的时候会把图片比例固定，那就在每次传完图后也调一次api，但是忘了一件事，就是调用api的时候因为上次已经生成了200*300的图，所以会导致这次新生成的和它同时出现，既然这样，索性一不做二不休，直接把裁剪页的节点在每次调用api前先给还原，果然搞定。也有个小问题就是绑定的提交坐标事件失效，简单，改用jquery的on方法搞定。

因为赶时间只想到了这最粗暴的方法，不知道是不是有终南捷径。。。

代码记下来以防忘记

 function qBeforeUpImg(){
    var temp = '<div class="modal-dialog">' +
      '<div class="modal-content">'+
          '<div class="modal-header"> <a href="#" class="close" data-dismiss="modal">×</a>'+
              '<h4>裁剪图片</h4>'+
            '</div>'+
            '<div class="modal-body">'+
             ' <form class="form-horizontal" action="" method="post" role="form">'+
              '    <div class="zxx_main_con form-group">'+
               '         <div class="zxx_test_list" style="min-height:200px;">'+
                '            <div class="rel mb20" style="margin-left:100px;">'+
                 '             <label class="control-label" for="source">原图</label>'+
                  '              <img id="source" src="img/200.gif" style="width:'+$("#existPhoto img").css("width")+';height:'+$("#existPhoto img").css("height")+';" />'+
                   '             <span id="preview_box" class="crop_preview"><img id="crop_preview" src="img/200.gif" /></span>'+
                    '        </div>'+
                     '           <input type="hidden" id="x" name="x" />'+
                      '          <input type="hidden" id="y" name="y" />'+
                       '         <input type="hidden" id="w" name="w" />'+
                        '        <input type="hidden" id="h" name="h" />'+
                         '       <!--<input type="submit" value="确认剪裁" id="crop_submit" />-->'+
                        '</div>'+
                        '<div class="select_list hidden">'+
                         ' <input type="checkbox" id="can_click" /><label for="can_click">允许新的选区</label><br />'+
                          '  <input type="checkbox" id="can_move" /><label for="can_move">选区可被移动</label><br />'+
                           ' <input type="checkbox" id="can_size" /><label for="can_size">选区可以大小改变</label>'+
                        '</div>'+
                  '</div>'+
                  '<div class="modal-footer form-actions">'+
                   ' <button type="button" class="btn btn-primary" id="crop_submit" data-dismiss="modal">确认</button>'+
                    '<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>'+
                  '</div>'+
                '</form>'+
            '</div>'+
        '</div>'+
    '</div>';
      $("#cutPhoto").html(temp);
      $("#source").Jcrop({
          aspectRatio:2/3,
          onChange:showCoords,
          onSelect:showCoords
        })
      
    }

$("a[href='#cutPhoto']").on("click",function(){
<span style="white-space:pre">		</span>var existPhotoSrc=$("#existPhoto").find("img").attr("src");
    qBeforeUpImg();
    <span style="white-space:pre">	</span>$("#cutPhoto").find("img").attr("src",existPhotoSrc);
<span style="white-space:pre">	</span>});