1

小さな 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;


          });
4

1 に答える 1

0

destroy メソッドは信頼性が低いため、この同様の質問のようにカスタム メソッドを作成してください

于 2012-12-22T23:19:42.443 に答える