Color Separation

PDFs can be created in such a way that each color lives on its own "separation". Each separation refers to a particular ink or process that would be used as part of physically printing a document.

WebViewer has the capability to extract information from these separations, and also disable/enable them.

API

Entering color separation mode will enable color separation. After color separation initialization, WebViewer will get the separations and pass the data through a colorSeparationAdded event.

Once you have the layer, you can disable it using disableColorSeparations or enable it using enableColorSeparations. Both methods can pass an array of names.

Here is an example of the color separation APIs:

javascript

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

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

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

      // Switch to color separation mode (enable color separation).
      instances.UI.setActiveToolMode('toolMenu-Separation');

      docViewer.addEventListener('colorSeparationAdded', (colorList) => {
        // disable colors.
        docViewer.disableColorSeparations([colorList[0].name, colorList[1].name]);
        // enable a color.
        docViewer.enableColorSeparations(colorList[0].name);
      });
    })
  });

You can also get a list of color separations at a certain point on the document by using the getColorSeparationsAtPoint API.

In this example, we'll get a list of color separations under the users mouse by using the mouseMove event. Coordinate conversion can refer to Page Content - Coordinates

javascript

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

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

      // Switch to color separation mode (enable color separation).
      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'
          },
          ...
        ]
      ***/
    }
  });

Color Separation ​

API ​

Color Separation

API