Wenn Jcrop mehr als ein Bild verarbeiten, die Größe ist falsch

-1

1, Wenn Jcrop mehr als ein Bild verarbeiten, die Größe ist falsch

Frage: Wann ändern wir Bilder dynamisch? Antwort: Wenn Benutzer Bilder asynchron hochladen, z. B. mit ajaxfileuload.js. wenn ein Benutzer ein Bild hochlädt und ein anderes hochladen möchte. Wenn er Jcrop verwendet, werden die späteren Bilder alle in der Größe des ersten Bildes angezeigt.

Obwohl er den folgenden jQuery-Code verwendet, um die Größe des neuen Bildes zu ändern, hat es immer noch die falsche Größe. $ ("# target") .attr ("width", "400"); $ ("# target") .attr ("Höhe", "250");

Kann jemand Jcrop verwenden und jedes Bild in seiner tatsächlichen Größe zeigen? Ich meine, wenn die Bilder dynamisch verändert werden.

Vielen Dank!

Der Souce-Code wird in einer ZIP-Datei komprimiert, sie sind alle Code font-Ende, so dass Sie es es `s einmal entpackt öffnen können, öffnen Sie bitte„crop.html“

Sie die Zip-Datei herunterladen können (214KB) hier: download

der Inhalt von "crop.html" ist:

<!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>

Quelle

2016-05-04 Timothy.Li

 
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.

Quelle

2016-05-04 10:04:11

Wenn Jcrop mehr als ein Bild verarbeiten, die Größe ist falsch

Antwort

Verwandte Themen