Some test text!

menu
search

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.

You can view a demo of this process in action here.

linkAPI

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.

The colorSeparationAdded event will get triggered once per color.

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

Here is an example of the color separation APIs:

const viewerElement = document.getElementById('viewer');
const viewer = new PDFTron.WebViewer({
  initialDoc: 'path/to/doc.pdf',
}, viewerElement)

viewerElement.addEventListener('ready', () => {
  const instance = viewer.getInstance();
  const docViewer = instance.docViewer;

  // wait until the document has been loaded
  docViewer.on('documentLoaded', () => {
    const doc = docViewer.getDocument();

    // enable color seperation
    doc.enableColorSeparations(true);

    // This callback will be fired once for each color in the document 
    doc.on('colorSeparationAdded', (event, 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.

viewerElement.addEventListener('ready', () => {
  const instance = viewer.getInstance();
  const docViewer = instance.docViewer;

  docViewer.on('documentLoaded', () => {
    const doc = docViewer.getDocument();

    // enable color seperation
    doc.enableColorSeparations(true);
  });

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

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

      if(pageCoordinate) {
        const { x, y, pageIndex } = pageCoordinate;
        const pageNumber = pageIndex + 1;

        const results = docViewer.getColorSeparationsAtPoint(pageNumber, x, y);

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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.