【工具】前端JS/VUE修改图片分辨率

【工具】前端JS/VUE修改图片分辨率

/**
   * 暂时用不到 直接修改图片width属性即可
   * @param blob
   * @param z最大宽度
   * @returns {Promise<unknown>}
   */
  async y压缩图片分辨率(blob, z最大宽度) {
    // 获取图片 blob

    // 把 blob 转成 Image 对象
    const imageBitmap = await createImageBitmap(blob);

    let targetWidth = imageBitmap.width;
    let targetHeight = imageBitmap.height;

    if(targetWidth <= z最大宽度){
      console.info('图片宽度小于最大宽度，无需压缩')
      return blob
    }
    console.info('图片宽度大于最大宽度，需压缩', targetWidth)
    // 如果宽度大于1200，则按比例缩放
    const scale = z最大宽度 / targetWidth;
    targetWidth = z最大宽度;
    targetHeight = Math.round(imageBitmap.height * scale);

    // 创建 Canvas 绘制缩放后的图像
    const canvas = document.createElement("canvas");
    canvas.width = targetWidth;
    canvas.height = targetHeight;

    const ctx = canvas.getContext("2d");
    ctx.drawImage(imageBitmap, 0, 0, targetWidth, targetHeight);

    // 转换为新的 Blob (JPEG/PNG均可)
    const compressedBlob = await new Promise(resolve => {
      canvas.toBlob(resolve, "image/jpeg", 0.9); // 0.9 为质量，可调整
    });

    return compressedBlob;
  }