Question

我不想制作一个用户可以上传图片的简单测试网站。到现在为止还挺好。现在我的问题是我也不想裁剪那个图像。我尝试过使用Jcrop，但效果不佳。哪里出了问题，我需要调整什么？这是我的代码

$(function ImageUpLoad() {

  $(" :file").change(function() {
    if (this.files && this.files[0]) {

      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').attr('src', e.target.result);
};

$(function CropImg() {
  $('#myImg').Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    onRelease: hidePreview,

  });
  var $preview = $('#preview');

  function showPreview(coords) {
    if (parseInt(coords.w) > 0) {
      var rx = 100 / coords.w;
      var ry = 100 / coords.h;

      $preview.css({
        width: Math.round(rx * 400) + 'px',
        height: Math.round(ry * 400) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
      }).show();
    }
  }

  function hidePreview() {
    $preview.stop().fadeOut('fast');
  }

});

#container img {
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="container">
  <div id="jcrop-container">
    <input type='file' accept="image/*" />
    <img id="myImg" src="#" alt="your image" />
  </div>
  <div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
    <img src="#" id="preview" style="max-width: none" />
  </div>
</div>

使用Javascript的JCrop（我的代码有什么问题）

0 个答案: