当Jcrop处理多个图像时,大小不正确

问题描述 投票:-1回答:1

1,the first image is fine

2,but later imagers are in wrong size

问题:我们什么时候动态更改图像?答:当用户异步上传图像时,例如使用ajaxfileupload.js。当用户上传一张图片,并想要上传另一张图片时。如果他使用Jcrop,则后面的图像都显示为第一张图像的大小。

即使他使用以下jQuery代码来改变新图像的大小,它仍然是错误的大小。 $( “#靶标”)ATTR( “宽度”, “400”)。 $( “#靶标”)ATTR( “高度”, “250”)。

有谁知道如何使用Jcrop并以其实际大小显示每个图像?我的意思是动态改变图像。

非常感谢!

源代码被压缩成一个zip文件,它们都是字体结束代码,所以你可以在解压缩后打开它,请打开“crop.html”

你可以在这里下载zip文件(214KB):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>
image image-processing jcrop
1个回答
0
投票

我在另一个问题上找到另一个答案的解决方案:使用 -

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

或者简单地覆盖相应的CSS样式,例如 -

 $("#target").css({"width":"400px" ,"height":"250px"});

请注意:CSS样式的优先级高于属性,因此有时,您发现您的更改不适用,例如 -

$("#target").attr("width","400");
$("#target").attr("height","250");

因此,为了更安全,用户CSS样式而不是属性。

© www.soinside.com 2019 - 2024. All rights reserved.