PDF Color Separation in JavaScript Viewer

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.

You can view a demo of color separation process in action.

Enabling color separation is done with a single API, enableColorSeparations. When this function is called, WebViewer will get the separations and pass the data through a colorSeparationAdded event.

Once you have the layer, you can disable/hide it with the enableSeparation API.

Here is an example of the color separation APIs:

WebViewer({
  initialDoc: 'path/to/doc.pdf',
}, document.getElementById('viewer'))
  .then(instance => {
    const docViewer = instance.Core.documentViewer;

    // wait until the document has been loaded
    docViewer.addEventListener('documentLoaded', () => {
      const doc = docViewer.getDocument();
      // enable color separation
      doc.enableColorSeparations(true);

      // This callback will be fired once for each color in the document
      doc.addEventListener('colorSeparationAdded', (colorData) => {
        /***
        colorData = {
          color: [number, number, number, number], // CMYK value of the color
          enabled: boolean, // is the color enabled or not
          name: string, // name of the color
          rgb: [number, number, number] // RGB value of the color
        }
        ***/
        // To toggle the colors, use the `enableSeparation` API
        doc.enableSeparation(colorData.name, false); // disable this color
        doc.enableSeparation(colorData.name, true); // enable this color

        // Update the view after you're finished toggling
        docViewer.refreshAll();
        docViewer.updateView();
      });
    });
  });

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

In this example, we'll get a list of color separations under the users mouse by using the mouseMove event.

WebViewer({
  initialDoc: 'path/to/doc.pdf',
}, document.getElementById('viewer'))
  .then(instance => {
    const docViewer = instance.Core.documentViewer;

    docViewer.addEventListener('documentLoaded', () => {
      const doc = docViewer.getDocument();
      // enable color separation
      doc.enableColorSeparations(true);
    });

    docViewer.addEventListener('mouseMove', e => {
      const mouseLocation = docViewer.getToolMode().getMouseLocation(e);
      const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
      const pageNumber = displayMode.getSelectedPages(mouseLocation, mouseLocation).first;

      if (pageNumber !== null) {
        const pageCoordinate = displayMode.windowToPage(mouseLocation, pageNumber);

        if (pageCoordinate) {
          const { x, y, pageIndex } = pageCoordinate;
          const results = docViewer.getColorSeparationsAtPoint(pageNumber, x, y);

          /***
            results = [
              {
                name: 'separation name',
                value: 'percentage of color at that point'
              },
              ...
            ]
          ***/
        }
      }
    });
  });