时间戳

首页 > 解决方案 > 无法使用javascript替换旧图像的图像

jquery - 无法使用javascript替换旧图像的图像

问题描述

我无法用新选择的图像替换旧图像。在这里，我在模态中显示了选定的图像，并允许用户选择图像的一部分。在这种情况下，我可以在模态本身中显示图像。但是单击保存按钮时我无法替换旧图像。我尝试修改代码来解决这个问题，但在我的情况下，代码不起作用。帮我。提前致谢。

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

标签： jqueryhtmlcsstwitter-bootstrap-3cropperjs

解决方案

我能够让您的代码只需要很少的更改即可工作。

您最大的问题是，您的变量是在其中包含任何内容之前创建的，因此它们最终为空。

我所做的只是在 save.addEvenListener 中移动cropped 和 dwn 变量，并删除了一些在 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);
});

推荐阅读