如何通过编程获取PDF指定位置Pantone色的油墨密度占比？

针对你用pdf.js/viewer.js开发时，无法统计指定区域内多Pantone色占比的问题，以下是可落地的实现方案：

1. 提取指定区域的像素数据 #

利用pdf.js的页面渲染能力，先将目标页面渲染到Canvas，再截取指定区域的图像像素信息。注意PDF坐标与Canvas坐标的转换（PDF原点在左下角，Canvas在左上角）：

async function getRegionImageData(page, x, y, width, height, scale = 2.0) {
  const viewport = page.getViewport({ scale });
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = viewport.width;
  canvas.height = viewport.height;

  await page.render({ canvasContext: ctx, viewport }).promise;

  // 转换PDF坐标到Canvas坐标
  const canvasX = x * scale;
  const canvasY = viewport.height - (y + height) * scale;
  const regionWidth = width * scale;
  const regionHeight = height * scale;

  return ctx.getImageData(canvasX, canvasY, regionWidth, regionHeight);
}

注：提高scale值可提升像素检测精度，同时会增加计算耗时，按需调整。

2. 构建Pantone色-标准色值映射表 #

提前准备需要检测的Pantone色对应的RGB标准值（可通过Pantone官方色卡获取）：

const pantoneColorMap = {
  'Pantone 186 C': { r: 153, g: 0, b: 0 },
  'Pantone 286 C': { r: 0, g: 51, b: 153 },
  'Pantone 3005 C': { r: 0, g: 102, b: 153 },
  // 按需添加更多目标Pantone色
};

3. 多Pantone色占比统计逻辑 #

遍历指定区域的每个像素，与映射表中的色值对比（允许一定容差，抵消渲染误差），统计各Pantone色的像素占比：

function calculatePantoneRatios(imageData, pantoneMap, tolerance = 5) {
  const pixelData = imageData.data;
  const totalPixels = imageData.width * imageData.height;
  const colorCounts = Object.fromEntries(Object.keys(pantoneMap).map(key => [key, 0]));

  // 遍历所有像素（每4个元素对应一个像素的RGBA）
  for (let i = 0; i < pixelData.length; i += 4) {
    if (pixelData[i + 3] === 0) continue; // 跳过透明像素

    const r = pixelData[i];
    const g = pixelData[i + 1];
    const b = pixelData[i + 2];

    // 匹配最接近的Pantone色
    for (const [pantone, target] of Object.entries(pantoneMap)) {
      const rDiff = Math.abs(r - target.r);
      const gDiff = Math.abs(g - target.g);
      const bDiff = Math.abs(b - target.b);
      if (rDiff <= tolerance && gDiff <= tolerance && bDiff <= tolerance) {
        colorCounts[pantone]++;
        break;
      }
    }
  }

  // 计算占比并格式化
  return Object.fromEntries(
    Object.entries(colorCounts).map(([pantone, count]) => [
      pantone,
      `${(count / totalPixels * 100).toFixed(2)}%`
    ])
  );
}

4. 专色（Spot Color）场景优化 #

如果PDF中的Pantone色是以专色形式存在的，pdf.js默认会将其转成RGB/CMYK渲染，像素检测可能存在误差。此时可通过pdf.js底层API直接提取专色的绘图区域：

async function getSpotColorAreaRatio(page, spotColorName, x, y, width, height) {
  const opList = await page.getOperatorList();
  const resources = await page.getResourceDict();
  const spotColor = resources.ExtGState?.[spotColorName];
  if (!spotColor) return '0.00%';

  let matchedArea = 0;
  const targetRegion = new Path2D();
  targetRegion.rect(x, y, width, height);

  // 遍历绘图指令，匹配使用目标专色的路径并计算交集面积
  let usingTargetSpot = false;
  opList.fnArray.forEach((fn, idx) => {
    if (fn === 'gs' && opList.argsArray[idx][0] === spotColorName) {
      usingTargetSpot = true;
    } else if (usingTargetSpot && ['re', 'l', 'c', 'v', 'y', 'h'].includes(fn)) {
      // 解析路径指令，构建Path2D对象
      const path = parsePdfPath(opList.argsArray[idx]);
      // 计算路径与目标区域的交集面积（需自行实现或借助几何库）
      const intersection = getPathIntersectionArea(path, targetRegion);
      matchedArea += intersection;
    } else if (fn === 'f' || fn === 'F') {
      usingTargetSpot = false;
    }
  });

  const totalArea = width * height;
  return `${(matchedArea / totalArea * 100).toFixed(2)}%`;
}

注：parsePdfPath和getPathIntersectionArea需自行实现，可借助Canvas的Path2D API或第三方几何计算库完成。

调用示例 #

// 假设已通过pdf.js加载获取到page实例
const regionX = 100; // PDF坐标下的区域左上角X
const regionY = 200; // PDF坐标下的区域左上角Y
const regionWidth = 300;
const regionHeight = 200;

getRegionImageData(page, regionX, regionY, regionWidth, regionHeight)
  .then(imageData => calculatePantoneRatios(imageData, pantoneColorMap))
  .then(ratios => console.log('Pantone色占比:', ratios));

内容的提问来源于stack exchange，提问作者Ashish Paul nandyala