JCrop：上一張圖片未更新？

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