Some test text!
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.
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.docViewer;
// wait until the document has been loaded
docViewer.on('documentLoaded', () => {
const doc = docViewer.getDocument();
// enable color separation
doc.enableColorSeparations(true);
// This callback will be fired once for each color in the document
doc.on('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.docViewer;
docViewer.on('documentLoaded', () => {
const doc = docViewer.getDocument();
// enable color separation
doc.enableColorSeparations(true);
});
docViewer.on('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'
},
...
]
***/
}
}
});
});
Get the answers you need: Support
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.
Web
Android
iOS
Windows
Linux
Unlimited usage. No email address required.