如何用 JavaScript 制作一个好用又好玩的图片压缩工具

<style>
  .c {
    margin-top: 20px;
    margin-inline: auto;
  }
  i {
      color:#c9c9c9;
  }
  .e2 {
      background: aliceblue;
      border: 0px;
  }
  .markdown {
    text-align: inherit;
}
</style>
<div class="c" >
  复制图片，在下面蓝框中粘贴，会自动按照下面设置的规则来压缩图片体积
<br><br>
<i>注意，直接鼠标复制处理后的图片，其体积会增长一部分(因浏览器本身特性)，获取真实压缩图片应单击「下载最终结果」。</i>
  <br><br>

  <textarea class="e2" style="width: 100%;" rows="2" id="output"></textarea>

<br><br>
<button id="img_download" onclick="base64ToFile(out_base64, 'download.jpeg')">下载最终结果</button>（<span id="img_size"></span>）：
  <p id="imga">
    <img id="testimg" src="" alt="" />
  </p>
</div>

  <fieldset style="width: 230px">
    <legend>压缩规则</legend>
    最大宽度 (px)<input type="number" id="in_maxwidth" onchange="re_config()" value="400" /><br><br>
  质量 (1 - 10)<input type="range" name="points" min="1" max="100" id="in_quality" onchange="re_config()" value="50" /><span id="in_q_msg">5</span><br><br>
  是否黑白化<input type="checkbox" id="in_balck" onchange="re_config()" checked /><br>
  </fieldset>

<script>

/* 配置区 */ 
let drawWidth = 400; // 统一宽度值
let imgQuality = 0.5; // 质量
let is_balck = true; // 黑白
// ----------------
const c=document.createElement("canvas");
const ctx=c.getContext("2d");

let domImg;
let s_imgSize;
let r_imgSize;
let base64data;
let out_base64;

/* 程序入口 */ 
function drawimg(base64data){
  creatDomImg(base64data);
  setTimeout(function(){canvdraw()}, 1000);
}

/* 把图片弄到 domImg 中 */
function creatDomImg(base64data){
  s_imgSize = parseInt(base64data.length / 1024 * 0.75) + "kb";
  domImg = document.createElement("img");
  domImg.src = base64data;
}

function canvdraw(){

  /* 计算画布的宽高值 */
  let scale = domImg.height / domImg.width;
  let domImg_w = (domImg.width > drawWidth) ? drawWidth         : domImg.width;
  let domImg_h = (domImg.width > drawWidth) ? drawWidth * scale : domImg.height;

  /* 画布生成 */
  c.width = domImg_w;
  c.height = domImg_h;

  /* 在画布画图 */
  ctx.drawImage(domImg, 0, 0, domImg_w, domImg_h);

  /* 黑白化 */
  if(is_balck){
    const imgArrData = ctx.getImageData(0, 0, domImg_w, domImg_h);
    for (let i = 0; i < imgArrData.data.length; i += 4) {
        let r = imgArrData.data[i],
            g = imgArrData.data[i + 1],
            b = imgArrData.data[i + 2];
        const avg = (r + g + b) / 3;
        imgArrData.data[i] = imgArrData.data[i + 1] = imgArrData.data[i + 2] = avg;
    }
    ctx.putImageData(imgArrData, 0, 0);
  }

  /* 图片展示 */
  out_base64 = c.toDataURL('image/jpeg', imgQuality);
  testImg = document.getElementById("testimg");
  testImg.src = out_base64;

  /* 处理后的大小 */
  r_imgSize = parseInt(out_base64.length / 1024 * 0.75) + "kb";
  img_size.innerHTML = s_imgSize + " -> " + r_imgSize;
}

/* 粘贴事件后：获取粘贴图片，把 base64 数据扔给 drawimg() */
document.getElementById("output").addEventListener("paste", function (e) {
  if ( !(e.clipboardData && e.clipboardData.items) ) return

  var pasteData = e.clipboardData || window.clipboardData
  pasteAnalyseResult = new Array

  for(var i = 0; i < pasteData.items.length; i++) {
      var item = pasteData.items[i]

      if((item.kind == "file") && (item.type.match('^image/'))){
          let imgData = item.getAsFile();
          if (imgData.size === 0) return;

          let reader = new FileReader();
          reader.readAsDataURL(imgData);
          reader.onload = function(){
              base64data = this.result;
              drawimg(base64data);  // 获得图片 base64 数据，开始处理
          }
          break;
      };
  }
}, false);

/* 用户在界面自定义配置 */
function re_config(){
  drawWidth = in_maxwidth.value;
  imgQuality = Math.floor(in_quality.value) / 100;
  in_q_msg.innerHTML = (imgQuality * 10).toString().match(/^\d+(?:\.\d{0,1})?/);
  is_balck = in_balck.checked;

  if(typeof base64data === 'undefined') return
  img_size.innerHTML = "处理中...";
  drawimg(base64data);
}

/* 下载 */
function base64ToFile(base,fileName) {
  console.log(base)
  if(typeof base === 'undefined') return

  const arr = base.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  if (window.navigator.msSaveBlob) {
    // for ie 10 and later
    try {
      const blobObject = new Blob([u8arr], { type: mime });
      window.navigator.msSaveBlob(blobObject, 'aaa.xls');
    } catch (e) {
      console.log(e);
    }
  } else {
    const url = window.URL.createObjectURL(new Blob([u8arr], { type: mime }));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 下载完成移除元素
    window.URL.revokeObjectURL(url); // 释放掉blob对象
  }
}
</script>

/* 在画布画图 */
 // ctx.drawImage(domImg, 0, 0, domImg_w, domImg_h);
ctx.drawImage(图的< img >, 起画点左坐标, 起画点上坐标, 落笔点右坐标, 落笔点下坐标);

out_base64 = c.toDataURL('image/jpeg', imgQuality);

 /* 处理后的大小 */
  r_imgSize = parseInt(out_base64.length / 1024 * 0.75) + "kb";