Question

我开发了一个小型JCrop文件上传应用程序;这是我的代码：

 function createCropImage(event)
   {     
   //alert(event.target.result); 

   document.getElementById("Imgpreview").src = event.target.result;
   var img2 = document.getElementById("Imgpreview1").src = event.target.result;

   // Create variables (in this scope) to hold the API and image size
   var jcrop_api, boundx, boundy;

   $('#Imgpreview1').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1
      },function(){
        // Use the API to get the real image size

   var bounds = this.getBounds();
       boundx = bounds[0];
       boundy = bounds[1];
       // Store the API in the jcrop_api variable
       jcrop_api = this;


    });

    function updatePreview(c)
      {
      $('#Xcoardinate').val( Math.round(c.x));
      $('#Ycoardinate').val( Math.round(c.y));

      $('#width').val( Math.round(c.w));
      $('#height').val( Math.round(c.h));
        if (parseInt(c.w) > 0)
          {
          var rx = 100 / c.w;
          var ry = 100 / c.h;

          $('#Imgpreview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };

}

此处Imgpreview是预览图片，Imgpreview1是源图片。我首先通过浏览按钮选择图像：

<input type="file" size="45" id="photoUploadElmt" name="upload" onchange="previewImg()" style="width:430px;"/>

原始图像（Imgpreview1）和预览图像（Imgpreview）显示正常，但如果我选择其他图像，预览图像是正确的，但代替Imgpreview1我看到旧图像。

如果我在评论中放入以下代码，那么图像会正确显示但我丢失了JCrop实例：

 $('#Imgpreview1').Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: 1
          },function(){
            // Use the API to get the real image size

            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;


          });

Answer 1

destroy method不可靠，因此请创建一个自定义的similar question

JCrop：以前的图片没有更新？

1 个答案: