JavaScript 代码在 codepen 上运行良好，但在 fiddle 上运行不佳。无法找到

Question

Codepen URL: https://codepen.io/pkprabu/pen/zmRqgZ

您好，我是 JavaScript 的新手，正在编写一些代码。问题是相同的代码在 codepen 上工作正常但在 fiddle 和我的页面上不起作用。我无法找到为什么它在 codepen 上工作而不在 fiddle 上工作以及发生了什么。我也在上面给出了我的codepen url。请向我解释并帮助我解决这个问题。

"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

你忘记了 CSS 文件 cropper.min.css

https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css

https://jsfiddle.net/2gda1Lho/