Section:

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.

API

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:

1WebViewer({
2  initialDoc: 'path/to/doc.pdf',
3}, document.getElementById('viewer'))
4  .then(instance => {
5    const docViewer = instance.Core.documentViewer;
6
7    // wait until the document has been loaded
8    docViewer.addEventListener('documentLoaded', () => {
9      const doc = docViewer.getDocument();
10      // enable color separation
11      doc.enableColorSeparations(true);
12
13      // This callback will be fired once for each color in the document
14      doc.addEventListener('colorSeparationAdded', (colorData) => {
15        /***
16        colorData = {
17          color: [number, number, number, number], // CMYK value of the color
18          enabled: boolean, // is the color enabled or not
19          name: string, // name of the color
20          rgb: [number, number, number] // RGB value of the color
21        }
22        ***/
23        // To toggle the colors, use the `enableSeparation` API
24        doc.enableSeparation(colorData.name, false); // disable this color
25        doc.enableSeparation(colorData.name, true); // enable this color
26
27        // Update the view after you're finished toggling
28        docViewer.refreshAll();
29        docViewer.updateView();
30      });
31    });
32  });

Related Links

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.

1WebViewer({
2  initialDoc: 'path/to/doc.pdf',
3}, document.getElementById('viewer'))
4  .then(instance => {
5    const docViewer = instance.Core.documentViewer;
6    docViewer.addEventListener('documentLoaded', () => {
7      const doc = docViewer.getDocument();
8      // enable color separation
9      doc.enableColorSeparations(true);
10    });
11    docViewer.addEventListener('mouseMove', e => {
12      const mouseLocation = docViewer.getToolMode().getMouseLocation(e);
13      const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
14      const pageNumber = displayMode.getSelectedPages(mouseLocation, mouseLocation).first;
15      if (pageNumber !== null) {
16        const pageCoordinate = displayMode.windowToPage(mouseLocation, pageNumber);
17        if (pageCoordinate) {
18          const { x, y, pageIndex } = pageCoordinate;
19          const results = docViewer.getColorSeparationsAtPoint(pageNumber, x, y);
20          /***
21            results = [
22              {
23                name: 'separation name',
24                value: 'percentage of color at that point'
25              },
26              ...
27            ]
28          ***/
29        }
30      }
31    });
32  });

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales