hair/static/img_downscale.js

// 上传图片自动降采样：当总像素 > MAX_PIXELS 时，等比例缩小到 <= TARGET_PIXELS。
// 用法：在提交前 file = await window.downscaleImageFile(file);
(function () {
  var MAX_PIXELS = 1536000;    // 触发阈值：超过则缩小
  var TARGET_PIXELS = 786432;  // 缩小后总像素上限

  function loadImage(url) {
    return new Promise(function (resolve, reject) {
      var img = new Image();
      img.onload = function () { resolve(img); };
      img.onerror = reject;
      img.src = url;
    });
  }

  async function downscaleImageFile(file) {
    // 非图片、GIF、SVG 不处理，原样返回
    if (!file || !file.type || file.type.indexOf('image/') !== 0) return file;
    if (file.type === 'image/gif' || file.type === 'image/svg+xml') return file;

    var url = URL.createObjectURL(file);
    try {
      var img = await loadImage(url);
      var w = img.naturalWidth, h = img.naturalHeight;
      var total = w * h;
      if (!total || total <= MAX_PIXELS) return file;  // 未超阈值，原图直接用

      var scale = Math.sqrt(TARGET_PIXELS / total);
      var nw = Math.max(1, Math.round(w * scale));
      var nh = Math.max(1, Math.round(h * scale));

      var canvas = document.createElement('canvas');
      canvas.width = nw;
      canvas.height = nh;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, nw, nh);

      var outType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
      var quality = outType === 'image/jpeg' ? 0.92 : undefined;
      var blob = await new Promise(function (res) { canvas.toBlob(res, outType, quality); });
      if (!blob) return file;

      var base = (file.name || 'image').replace(/\.(jpe?g|png|webp|bmp)$/i, '');
      var name = base + (outType === 'image/png' ? '.png' : '.jpg');
      return new File([blob], name, { type: outType, lastModified: Date.now() });
    } catch (e) {
      console.warn('downscaleImageFile 失败，使用原图', e);
      return file;
    } finally {
      URL.revokeObjectURL(url);
    }
  }

  window.downscaleImageFile = downscaleImageFile;
})();