2016-05-04 24 views
-1

1間違っている、 the first image is fineJcropが複数の画像を処理すると、サイズが

2、 but later imagers are in wrong size

質問:私たちはイメージを動的に変更できますか? 回答:ユーザーがajaxfileupload.jsなどのように画像を非同期でアップロードすると、 ユーザーが1つの画像をアップロードし、別の画像をアップロードしたい場合。 Jcropを使用する場合、後の画像はすべて最初の画像のサイズで表示されます。

次のjQueryコードを使用して新しいイメージのサイズを変更しても、まだ間違ったサイズです。$( "#target")。attr( "width"、 "400");$( "#target")。attr( "height"、 "250");

誰でもJcropの使い方を知っていて、実際のサイズで各画像を表示できますか?私は画像が動的に変更されたときを意味します。

ありがとうございます!

源泉コードは、彼らは

あなたは、zipファイルをダウンロードすることがありますが、解凍したそれ `s一度それを開くことができて、「crop.html」を開いてください、すべてのフォントエンドのコードですzipファイルに圧縮されますここでは(214キロバイト): download

"crop.html" の内容は次のとおりです。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 

 
    <script src="js/jquery.min.js"></script> 
 
    <script src="js/jquery.Jcrop.js"></script> 
 
    <script type="text/javascript"> 
 
    jQuery(function($) { 
 

 
     var jcrop_api; 
 

 
     initJcrop(); 
 

 
     $('#coords').on('change', 'input', function(e) { 
 
     var x1 = $('#x1').val(), 
 
      x2 = $('#x2').val(), 
 
      y1 = $('#y1').val(), 
 
      y2 = $('#y2').val(); 
 
     jcrop_api.setSelect([x1, y1, x2, y2]); 
 
     }); 
 

 
     function initJcrop() { 
 
     $('#target').Jcrop({ 
 
      onChange: showCoords, 
 
      onSelect: showCoords, 
 
      onRelease: clearCoords 
 
     }, function() { 
 
      jcrop_api = this; 
 
     }); 
 
     }; 
 

 

 

 
     $('#changeToWiderPicture').click(function(e) { 
 
     jcrop_api.destroy(); 
 
     $("#target").attr("src", "img/2.jpg"); 
 
     $("#target").attr("width", "400"); 
 
     $("#target").attr("height", "250"); 
 

 
     $("#normalPicture").attr("src", "img/2.jpg"); 
 

 
     $("#normanPicureIntroduction").html("Original picure:400X250"); 
 

 
     $('#changeToWiderPicture').hide(); 
 
     $('#changeBack').show(); 
 
     initJcrop(); 
 
     return false; 
 
     }); 
 
     $('#changeBack').click(function(e) { 
 
     jcrop_api.destroy(); 
 
     $("#target").attr("src", "img/1.jpg"); 
 
     $("#normalPicture").attr("src", "img/1.jpg"); 
 
     $("#normanPicureIntroduction").html("Original picure:250X400"); 
 

 

 
     $('#changeBack').hide(); 
 
     $('#changeToWiderPicture').show(); 
 

 
     initJcrop(); 
 
     return false; 
 
     }); 
 

 

 
    }); 
 

 

 
    function showCoords(c) { 
 
     $('#x1').val(c.x); 
 
     $('#y1').val(c.y); 
 
     $('#x2').val(c.x2); 
 
     $('#y2').val(c.y2); 
 
     $('#w').val(c.w); 
 
     $('#h').val(c.h); 
 
    }; 
 

 
    function clearCoords() { 
 
     $('#coords input').val(''); 
 
    }; 
 
    </script> 
 
    <link rel="stylesheet" href="css/main.css" type="text/css" /> 
 
    <link rel="stylesheet" href="css/demos.css" type="text/css" /> 
 
    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> 
 

 

 
</head> 
 

 
<body> 
 

 

 
    <table> 
 
    <tr> 
 
     <td> 
 
     <img src="img/1.jpg" id="target" /> 
 
     <br>Picture with Jcrop attached 
 

 
     </td> 
 
     <td width=40%></td> 
 
     <td> 
 
     <img src="img/1.jpg" id="normalPicture" /> 
 
     <br> 
 
     <span id='normanPicureIntroduction'>Original picure:250X400</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <form id="coords" class="coords"> 
 

 
    <div class="inline-labels"> 
 
     <label>X1 
 
     <input type="text" size="4" id="x1" name="x1" /> 
 
     </label> 
 
     <label>Y1 
 
     <input type="text" size="4" id="y1" name="y1" /> 
 
     </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> 
 
    </div> 
 
    </form> 
 

 

 
    <div style="padding-top:20px;"> 
 
    <button id="changeToWiderPicture" class="btn btn-mini">changeToWiderPicture</button> 
 
    <button id="changeBack" class="btn btn-mini" style="display:none;">changeBack</button> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

答えて

0
 
I find a solution from other answer to another question: 
use 

    $('#image').removeAttr('style'); 

Or simply overwrite the conresponding css style, for example 
    $("#target").css({"width":"400px" ,"height":"250px"}); 
please be aware: 
css style has a higher priority than attribute, so sometimes, you find your change does not apply, for example: 
    $("#target").attr("width","400"); 
    $("#target").attr("height","250"); 

So, for safer, user css style instead of attribute. 
関連する問題