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

Posted 2023-02-25

【中文标题】JCrop：以前的图像没有更新？

【英文标题】：JCrop: previous image not updated?

【发布时间】：2012-12-12 13:48:40

【问题描述】：

我开发了一个小型 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。

如果我将以下代码放入 cmets，则图像可以正确显示，但我会丢失 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;


          );

【参考方案1】：

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