Javascript 图片上传和调整大小问题

Question

我有一个图像 uploader ，它可以预览您选择的图像，允许您调整大小，然后显示调整后的版本。

原始代码允许您调整静态图像的大小，因此我添加了上传图像的功能来替换这个静态图像。 (#image-3)。

但是，当您上传并调整大小时，它仍会在调整后的版本上显示静态图像。

我对 Javascript 不是很了解，如果有任何帮助，我将不胜感激!谢谢。

$(document).ready(function() {


  $('#image-3').rcrop({
    minSize: [500, 500],
    preserveAspectRatio: true,

    preview: {
      display: true,
      size: [100, 100],
      wrapper: '#custom-preview-wrapper'
    }
  });

  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {
        $('#image-3').attr('src', e.target.result);


      }

      reader.readAsDataURL(input.files[0]);

      $('#image-3').on('rcrop-changed', function() {
        var srcOriginal = $(this).rcrop('getDataURL');
        var srcResized = $(this).rcrop('getDataURL', 50, 50);

        $('#cropped-original').append('<img src="' + srcOriginal + '">');
        $('#cropped-resized').append('<img src="' + srcResized + '">');
      });


    }
  }

  $("#imgInp").change(function() {
    readURL(this);
  });

});

body {
  margin: 0;
  padding: 0px
}

main {
  min-height: 500px;
  display: block
}

pre {
  overflow: auto;
}

.demo {
  padding: 20px;
}

.image-wrapper {
  max-width: 600px;
  min-width: 200px;
}

img {
  max-width: 100%;
}

#image-4-wrapper .rcrop-outer-wrapper {
  opacity: .75;
}

#image-4-wrapper .rcrop-outer {
  background: #000
}

#image-4-wrapper .rcrop-croparea-inner {
  border: 1px dashed #fff;
}

#image-4-wrapper .rcrop-handler-corner {
  width: 12px;
  height: 12px;
  background: none;
  border: 0 solid #51aeff;
}

#image-4-wrapper .rcrop-handler-top-left {
  border-top-width: 4px;
  border-left-width: 4px;
  top: -2px;
  left: -2px
}

#image-4-wrapper .rcrop-handler-top-right {
  border-top-width: 4px;
  border-right-width: 4px;
  top: -2px;
  right: -2px
}

#image-4-wrapper .rcrop-handler-bottom-right {
  border-bottom-width: 4px;
  border-right-width: 4px;
  bottom: -2px;
  right: -2px
}

#image-4-wrapper .rcrop-handler-bottom-left {
  border-bottom-width: 4px;
  border-left-width: 4px;
  bottom: -2px;
  left: -2px
}

#image-4-wrapper .rcrop-handler-border {
  display: none;
}

#image-4-wrapper .clayfy-touch-device.clayfy-handler {
  background: none;
  border: 0 solid #51aeff;
  border-bottom-width: 6px;
  border-right-width: 6px;
}

label {
  display: inline-block;
  width: 60px;
  margin-top: 10px;
}

#update {
  margin: 10px 0 0 60px;
  padding: 10px 20px;
}

#cropped-original,
#cropped-resized {
  padding: 20px;
  border: 4px solid #ddd;
  min-height: 60px;
  margin-top: 20px;
}

#cropped-original img,
#cropped-resized img {
  margin: 5px;
}

<script src="https://rawgit.com/aewebsolutions/rcrop/master/dist/rcrop.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type="file" id="imgInp" />
</form>
<div class="demo">
  <div class="image-wrapper">
    <img id="image-3" src="https://raw.githubusercontent.com/aewebsolutions/rcrop/master/demos/images/demo.jpg">
    <div id="custom-preview-wrapper"></div>
    <div id="cropped-resized">
      <h3>Images resized (50x50)</h3>
    </div>
    <div id="cropped-original">
      <h3>Images not resized (original size)</h3>
    </div>
  </div>
</div>

Answer 1

我想你需要这个 http://jcrop.org/demos/preview

易于实现。