Не удалось заменить изображение на месте старого изображения с помощью JavaScript

Question

Я не смог заменить новое выбранное изображение на место старого.Здесь я показал выбранное изображение в модальном режиме и позволил пользователю выбрать часть изображения.В этом случае я мог бы показать изображение в самом модале.Но я не смог заменить старое изображение, когда нажал кнопку «Сохранить».Я попытался изменить код, чтобы исправить это, но в моем случае код не работает.Помоги мне.Заранее спасибо.

"use strict";

// vars
var result = document.querySelector(".result"),
  img_result = document.querySelector(".img-result"),
  img_w = document.querySelector(".img-w"),
  img_h = document.querySelector(".img-h"),
  options = document.querySelector(".options"),
  save = document.querySelector(".save"),
  cropped = document.querySelector(".cropped"),
  dwn = document.querySelector(".download"),
  upload = document.querySelector("#file-input"),
  cropper = "";
// on change show image with crop options
upload.addEventListener("change", function(e) {
  if (e.target.files.length) {
    // start file reader
    var reader = new FileReader();
    reader.onload = function(e) {
      if (e.target.result) {
        $(".modal").modal("show");
        // create new image
        var img = document.createElement("img");
        img.id = "image";
        img.src = e.target.result;
        // clean result before
        result.innerHTML = "";
        // append new image
        result.appendChild(img);
        // show save btn and options
        save.classList.remove("hide");
        options.classList.remove("hide");
        // init cropper
        cropper = new Cropper(img);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});
// save on click
save.addEventListener("click", function(e) {
  e.preventDefault();
  // get result to data uri
  var imgSrc = cropper.getCroppedCanvas({
    width: img_w.value // input value
  }).toDataURL();
  // remove hide class of img
  cropped.classList.remove("hide");
  img_result.classList.remove("hide");
  // show image cropped
  cropped.src = imgSrc;
  dwn.classList.remove("hide");
  dwn.download = "imagename.png";
  dwn.setAttribute("href", imgSrc);
});
$(".upload-button").on("click", function() {
  $("#file-input").trigger("click");
});

i:hover {
  cursor: pointer;
}

.dashboard-hme-img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>

<!-- 		<input type="file" id="file-input"> -->
<p>Update</p>
<img class="dashboard-hme-img profile-pic" src="https://cdn.paperindex.com/piimages/dummy/vivek.png">
<i class="fa fa-camera upload-button"></i>
<input id="file-input" class="hidden" type="file" accept="image/*" />

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <!-- leftbox -->
        <div class="box-2">
          <div class="result"></div>
        </div>
        <!--rightbox-->
        <div class="box-2 img-result hide">
          <!-- result of crop -->
          <img class="cropped" src="" alt="">
        </div>
        <!-- input file -->
        <div class="box">
          <div class="options hide">
            <input type="hidden" class="img-w" value="200" min="200" max="1200" />
          </div>
          <!-- save btn -->

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button class="btn save hide">Save</button>
      </div>
    </div>

  </div>
</div>

Answer 1

Мне удалось заставить ваш код работать с очень небольшими изменениями.

Ваша самая большая проблема заключалась в том, что ваши переменные создавались еще до того, как в них что-то было, поэтому они в итоге оказались нулевыми.

Все, что я сделал, это переместил переменную обрезки и dwn в save.addEvenListener, и я удалил некоторые вещи, которые были установлены на dwn.

См. jsFiddle

save.addEventListener("click", function(e) {
    var cropped = document.querySelector(".cropped");
  //var dwn = document.querySelector(".cropper-crop-box");
  var dwn = document.querySelector(".profile-pic");

  e.preventDefault();
  // get result to data uri
  var imgSrc = cropper.getCroppedCanvas({
    width: img_w.value // input value
  }).toDataURL();
  // remove hide class of img
  cropped.classList.remove("hide");
  img_result.classList.remove("hide");
  // show image cropped
  cropped.src = imgSrc;
  dwn.src = imgSrc;

  //dwn.classList.remove("hide");
  //dwn.download = "imagename.png";
  //dwn.setAttribute("href", imgSrc);
});