https://gistpreview.github.io/?a96304a950ddba078a51c23d0a68f127

tinygrail_clip.html

<!--
 * @Description: image clip
 * @Author: ekibun
 * @Date: 2020-07-31 22:39:41
 * @LastEditors: ekibun
 * @LastEditTime: 2020-08-01 22:51:51
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div style="user-select: none;">
  <input id="src" type="file" accept="image/*" onchange="selectImage(this);" /><br />
  <div style="position: relative;">
    <img id="img_src" style="touch-action: none; opacity: 0.5; width: 100%;">
    <img id="img_left" style="position: absolute; clip-path: polygon(0 0, 100% 0, 76.5% 100%, 0 100%);">
    <img id="img_right" style="position: absolute; clip-path: polygon(23.5% 0, 100% 0, 100% 100%, 0 100%);">
    <div id="selectbox" style="border: 1px solid; pointer-events: none; position: absolute;"></div>
  </div>
</div>
<script>
  const img_src = document.getElementById("img_src");
  const img_left = document.getElementById("img_left");
  const img_right = document.getElementById("img_right");
  const selectbox = document.getElementById("selectbox");
  let _image = new Image();
  function selectImage(file) {
    if (!file.files || !file.files[0]) return;
    setImage(img_left);
    setImage(img_right);
    img_src.src = URL.createObjectURL(file.files[0]);
    _image.src = img_src.src;
  }
  function getRect() {
    let [l, t, r, b] = rect;
    const w = Math.max(Math.abs(r - l), Math.abs(b - t) * ratio);
    l = r > l ? l : l - w;
    t = b > t ? t : t - w / ratio;
    return [l, t, w, w / ratio];
  }
  const ratio = 213 / 160;
  const rect = [];
  function updateCanvas() {
    selectbox.height = 100;
    const [l, t, w, h] = getRect();
    selectbox.style.left = l - 1;
    selectbox.style.width = w;
    selectbox.style.top = t - 1;
    selectbox.style.height = h;
  }
  img_src.addEventListener("pointerdown", (e) => {
    e.preventDefault();
    img_src.setPointerCapture(e.pointerId);
    rect[0] = rect[2] = e.offsetX;
    rect[1] = rect[3] = e.offsetY;
    setImage(img_left);
    setImage(img_right);
    updateCanvas();
  });
  img_src.addEventListener("pointermove", (e) => {
    if (!e.buttons) return;
    e.preventDefault();
    rect[2] = e.offsetX;
    rect[3] = e.offsetY;
    updateCanvas();
  });
  function setImage(dist, l, t, w, h) {
    if (w * h > 0) {
      const canvas = document.createElement("canvas");
      const scale = _image.width / img_src.offsetWidth;
      canvas.width = w * scale;
      canvas.height = h * scale;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img_src, -l * scale, -t * scale);
      dist.src = canvas.toDataURL("image/png");
    }
    dist.style.left = l || 0;
    dist.style.top = t || 0;
    dist.style.width = w || 0;
    dist.style.height = h || 0;
  }
  img_src.addEventListener("pointerup", (e) => {
    e.preventDefault();
    const [l, t, ww] = getRect();
    if (ww <= 0) return;
    const h = ww / ratio;
    const w = h / 4 * 3;
    setImage(img_left, l, t, w, h);
    setImage(img_right, l + ww - w, t, w, h);
    const canvas = document.createElement("canvas");
  });
  updateCanvas();
</script>