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

Call enableColorSeparations on the document to enable color separation. After color separation initialization, WebViewer will get the separations and pass the data through a colorSeparationAdded event. You can also get all separations using getColorSeparations.

Once you have the separation, you can disable or enable it using enableSeparation, passing the separation name and whether to enable it. Then call refreshAll to redraw the pages.

Here is an example of the color separation APIs:

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

ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer).then((instance) => {
  const { documentViewer } = instance.Core;

  documentViewer.addEventListener('documentLoaded', async () => {
    console.log('ComPDFKit Web Demo loaded');
    const doc = documentViewer.getDocument();

    // Each separation is passed through a `colorSeparationAdded` event.
    doc.addEventListener('colorSeparationAdded', (separation) => {
      console.log(separation.name);
    });

    // Enable color separation.
    await doc.enableColorSeparations();

    const colorList = doc.getColorSeparations();
    // disable colors.
    doc.enableSeparation(colorList[0].name, false);
    doc.enableSeparation(colorList[1].name, false);
    // enable a color.
    doc.enableSeparation(colorList[0].name, true);
    // Redraw the pages.
    documentViewer.refreshAll();
  });
});

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

ComPDFKitViewer(...).then((instance) => {
  const { documentViewer } = instance.Core;

  const handleMouseMove = async (e) => {
    // Page number and page coordinates under the mouse.
    const { pageNumber, x, y } = documentViewer.getViewerCoordinatesFromMouseEvent(e);

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

  documentViewer.addEventListener('documentLoaded', async () => {
    console.log('ComPDFKit Web Demo loaded');

    // Enable color separation.
    await documentViewer.getDocument().enableColorSeparations();

    documentViewer.addEventListener('mouseMove', handleMouseMove);
  });
});