<!--<input type="file" id="file">
<button id="btn">截图</button>-->
<div id="app"></div>
<img style="width: 375px;" id="img" src="" alt="">
const el = document.getElementById("app");

/*  document.getElementById("file").addEventListener("change", e => {
    el.innerHTML = "";
    if (!e.target.files || !e.target.files[0]) return;
    if (!e.target.files[0].type.includes("image")) return;
    window.file_url && URL.revokeObjectURL(window.file_url);
    window.crop = createCrop(window.file_url = URL.createObjectURL(e.target.files[0]));
  });*/

  function createCrop(url) {
    const crop = new Cropper(el, {
      width: 375,
      height: 400,
      url: url,
      cropMode: "window",
      minRate: 0.2,
      window: {
        width: 175,
        height: 200,
        x: 100,
        y: 100
      }
      // devicePixelRatio: 1
    });

    crop.on("ready", () => {
      window.crop && (document.getElementById("img").src = window.crop.output());
    });
    return crop;
  }

createCrop('https://files.1card1.cn/mps/0/20191111/2bd92a35ff644b478c6becdf753fc43a.jpg')
  document.getElementById("btn").addEventListener("click", function () {
    window.crop && (document.getElementById("img").src = window.crop.output());
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@redbuck/cropper@0.0.3/lib/cropper.js