PDF 分色

PDF 的创建方式是每种颜色都基于自己的 “分色” 。每个分色都是指在物理打印文档时将使用的特定油墨或过程。

WebViewer 能够从这些分离中提取信息，还可以禁用/启用它们。

API

进入分色模式将启用分色。分色初始化后，WebViewer 将获取分色并通过 colorSeparationAdded 事件传递数据。

获取到图层后，您可以使用 disableColorSeparations 禁用它，或使用 enableColorSeparations 启用它。这两个方法都可以传递多个 name。

以下是分色 API 的示例：

javascript

const viewer = document.getElementById('webviewer');

ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
  .then((instance) => {
    const { docViewer, UI } = instance;

    docViewer.addEvent('documentloaded', () => {
      console.log('ComPDFKit Web Demo loaded');

      // 切换到分色模式（启用分色）。
      UI.setActiveToolMode('toolMenu-Separation');

      docViewer.addEventListener('colorSeparationAdded', (colorList) => {
        // 禁用前两个色值。
        docViewer.disableColorSeparations([colorList[0].name, colorList[1].name]);
        // 启用第一个色值。
        docViewer.enableColorSeparations(colorList[0].name);
      });
    })
  });

您还可以使用 getColorSeparationsAtPoint API 获取文档上某个点的分色列表。

在此示例中，我们将使用 mouseMove 事件获取用户鼠标下的分色列表。坐标的转换可参考页面相关 - 坐标

javascript

ComPDFKitViewer.init(...)
  .then((instance) => {
    const { docViewer, UI } = instance;

    docViewer.addEvent('documentloaded', () => {
      console.log('ComPDFKit Web Demo loaded');

      // 切换到分色模式（启用分色）。
      instances.UI.setActiveToolMode('toolMenu-Separation');

      docViewer.addEvent('mouseMove', handleMouseMove);
    })

    const getMouseLocation = e => {
      const scrollElement = docViewer.getScrollViewElement();
      const scrollLeft = scrollElement.scrollLeft || 0;
      const scrollTop = scrollElement.scrollTop || 0;

      return {
        x: e.pageX + scrollLeft,
        y: e.pageY + scrollTop
      };
    }

    const handleMouseMove = async(e) => {
      let windowCoordinates = getMouseLocation(e);
      const page = docViewer.getSelectedPage(windowCoordinates, windowCoordinates);

      const clickPageNumber = (page.first !== null) ? page.first : docViewer.currentPageNumber;
      const pagePoint = docViewer.windowToPage(windowCoordinates, clickPageNumber);

      const results = await docViewer.getColorSeparationsAtPoint(pageNumber, x, y);
      /***
        results = [
          {
            name: 'separation name',
            value: 'percentage of color at that point'
          },
          ...
        ]
      ***/
    }
  });

PDF 分色 ​

API ​

PDF 分色

API