6
回答
请教一个js代码,急

请教各位大大,我应用Jscop做裁图预览上传时,遇到一个问题,第一次选择图片时,cropbox和preview两个图都能显示,但是alert的不是所选择图片的宽和高,而是初始图片的宽、高,而第二次选择图片时cropbox却没有变化,而preview能更新,alert的不是第一次所选择图片的宽和高,似乎不能同步,请帮我看看,比较紧急,谢谢各位!

代码如下

<html>
 <head>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.Jcrop.js"></script>
  <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
  <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
  <script language="Javascript">
   var a=0;
   var b=0;

   function showimg(){
      var imgpeoper=fileupForm.filecontext.value;
        fileupForm.cropbox.src=imgpeoper;
        fileupForm.preview.src=imgpeoper;
        a=fileupForm.cropbox.width;
        b=fileupForm.cropbox.height;
        alert(imgpeoper+"   "+a+"   "+b);
     jQuery('#cropbox').Jcrop({
     onChange: showPreview,
     onSelect: showPreview,
     aspectRatio: 1
    });

   };

   function showPreview(coords)
   {
    jQuery('#x').val(coords.x);
    jQuery('#y').val(coords.y);
    jQuery('#x2').val(coords.x2);
    jQuery('#y2').val(coords.y2);
    jQuery('#w').val(coords.w);
    jQuery('#h').val(coords.h);
    if (parseInt(coords.w) > 0)
    {
     var rx = 200 / coords.w;
     var ry = 200 / coords.h;

     jQuery('#preview').css({
      width: Math.round(rx * a) + 'px',
      height: Math.round(ry * b) + 'px',
      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
      marginTop: '-' + Math.round(ry * coords.y) + 'px'
     });
    }
   };

  </script>
 </head>
 <body>
  <form name="fileupForm" enctype="multipart/form-data">
   fname : <input name="fname" type="text"/>
   <br />
   filecontext :<input name="filecontext" type="file" onchange="showimg();"/>
   <br />
   <img src="demo_files/flowers.jpg" id="cropbox" />
   <br />
   <div style="width:200px;height:200px;overflow:hidden;">
    <img src="demo_files/flowers.jpg" id="preview" />
   </div>
   <label>X1 <input type="text" size="4" id="x" name="x" /></label>
   <label>Y1 <input type="text" size="4" id="y" name="y" /></label>
   <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
   <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
   <label>W <input type="text" size="4" id="w" name="w" /></label>
   <label>H <input type="text" size="4" id="h" name="h" /></label>
   <input type="submit"/>
  </form>
 </body>
</html>

 

举报
顶部