优化网页浏览的照片压缩方法与实践

import { writeFile } from "fs/promises";
import path from "path";
import sharp from "sharp";
import { Jimp } from "jimp";
import { readdirSync as readdir, statSync } from "fs";
 
async function f1(sourcePath: string, destination: string) {
  const buf = await sharp(sourcePath).resize(100).toBuffer();
  const destPath = path.join(destination, path.basename(sourcePath));
  await writeFile(destPath, buf);
  return destPath;
}
 
async function f2(sourcePath: string, destination: string) {
  const image = await Jimp.read(sourcePath);
  image.resize({ w: 100 });
  const destPath = path.join(destination, path.basename(sourcePath));
  await image.write(destPath as "${string}.${string}");
  return destPath;
}
 
const files = readdir("./images")
  .filter((file) => [".jpg", ".png"].includes(path.extname(file).toLowerCase()))
  .map((file) => path.join("./images", file));
 
async function measure(
  func: (file: string, dest: string) => Promise<string>,
  files: string[],
  destDir: string
) {
  const startMemory = process.memoryUsage().heapUsed;
  console.time("Took");
  const destPaths = await Promise.all(files.map((file) => func(file, destDir)));
  console.timeEnd("Took");
  const endMemory = process.memoryUsage().heapUsed;
  console.log(`Memory used: ${(endMemory - startMemory) / 1024 / 1024} MB`);
 
  const totalSize = (
    await Promise.all(destPaths.map((path) => statSync(path).size))
  ).reduce((sum, size) => sum + size, 0);
  console.log(`Total output size: ${totalSize / 1024} KB`);
}
 
await measure(f1, files, "./output1/");
await measure(f2, files, "./output2/");

import { defaultFormats, defaultPlugins } from "jimp";
import webp from "@jimp/wasm-webp";
 
const Jimp = createJimp({
  formats: [...defaultFormats, webp],
  plugins: defaultPlugins,
});
 
const processImage = async (file: File, index: number) => {
  try {
    const buffer = await file.arrayBuffer();
    const image = await Jimp.read(buffer);
 
    // Extract EXIF data
    //...skipped
 
    // Generate thumbnail
    const thumbnail = await image
      .clone()
      .autocrop()
      .rotate(0)
      .scaleToFit({
        w: thumbnailSize,
        h: thumbnailSize,
      })
      .getBuffer(thumbnailFormat, { quality: thumbnailQuality });
 
    // Generate standard image
    const standard = await image
      .clone()
      .autocrop()
      .rotate(0)
      .scaleToFit({
        w: standardImageSize,
        h: standardImageSize,
      })
      .getBuffer(standardImageFormat, { quality: standardImageQuality });
 
    // Other steps
    //...
  } catch (error) {}
};

export const thumbnailSize = 768;
export const thumbnailQuality = 90;
export const thumbnailFormat = "image/webp";
export const standardImageSize = 1920;
export const standardImageQuality = 85;
export const standardImageFormat = "image/webp";

const sharp = require("sharp");
 
async function calculatePSNR(originalPath, compressedPath) {
  try {
    // 读取原图和压缩图
    const original = await sharp(originalPath).metadata();
    const compressed = await sharp(compressedPath).metadata();
 
    // 确定目标尺寸（取较小尺寸）
    const targetWidth = Math.min(original.width, compressed.width);
    const targetHeight = Math.min(original.height, compressed.height);
 
    // 调整尺寸并转换为原始像素数据
    const origResized = await sharp(originalPath)
      .resize(targetWidth, targetHeight, { fit: "fill" })
      .raw()
      .toBuffer({ resolveWithObject: true });
    const compResized = await sharp(compressedPath)
      .resize(targetWidth, targetHeight, { fit: "fill" })
      .raw()
      .toBuffer({ resolveWithObject: true });
 
    // 确保通道数一致
    if (origResized.info.channels !== compResized.info.channels) {
      throw new Error("图像通道数不匹配");
    }
 
    const width = origResized.info.width;
    const height = origResized.info.height;
    const channels = origResized.info.channels;
    const origData = origResized.data;
    const compData = compResized.data;
    let sumSquaredError = 0;
 
    // 逐像素比较 RGB
    for (let i = 0; i < origData.length; i += channels) {
      for (let c = 0; c < channels; c++) {
        const diff = origData[i + c] - compData[i + c];
        sumSquaredError += diff * diff;
      }
    }
 
    // 计算均方误差（MSE）
    const mse = sumSquaredError / (width * height * channels);
 
    // 计算 PSNR
    const maxPixelValue = 255; // 8-bit 图像
    const psnr =
      mse === 0 ? Infinity : 10 * Math.log10(maxPixelValue ** 2 / mse);
 
    console.log(`MSE: ${mse.toFixed(2)}`);
    console.log(`PSNR: ${psnr === Infinity ? "Infinity" : psnr.toFixed(2)} dB`);
    return psnr;
  } catch (error) {
    console.error("错误:", error.message);
  }
}
 
// 示例用法
calculatePSNR("./original.jpg", "./compressed.webp");