Wrong color appearing on a PDF in the WebViewer UI

  • Product: PDFTron WebViewer

  • Product Version: 8.3

Hi,

I contact you because we are facing a bug in our PDFTron WebViewer, related to the displayed color for the specific part of a document I want to annotate.

OK in your demo URL for WebViewer UI

  1. In your demo URL, when I upload the following PDF document:
    WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

  2. it looks great (the part which should be white is white, and the part which should be blue is blue, the colors are the same as they are in the original document).
    PDFTron WebViewer Demo: JavaScript PDF Viewer Demo

  3. even when downloading it from Download feature, colors is correctly maintained :
    image


NOK in our WebViewer UI
However, when I try to show the same document from my WebViewer (v 8.3, so maybe it has been fixed ?), there is a strange color behaviour, The white part is changed into blue, and the small vertical blue line inside the white part becomes grey:

BUT when downloading it, the initial white part stays in what as it should be
image


FYI, and you can reproduce it if you want to confirm, if I read the document through Acrobat Reader for instance, the correct colors are displayed, so the problem seems to be clearly inside our viewer which “invent” a generated color that should not be.

Could you please help me?

Thanks in advance for your time.

Best Regards,

Alex

Hi alex.plt,

Thank you for contacting WebViewer forums,

I tested the same PDF provided on 8.3.3 and could not reproduce the color mismatching.

I also tested on 8.2.0 and there were no issues.

The colors are not related to an annotation as you can see that there is no annotation inside the PDF:

Perhaps you could try using color separation with guide here:

Here is a relevant forum post that might help with understanding the issue:

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

Thank you for this first answer.

Indeed we integrated your Color Separation feature and we identified that it’s the cause of the problem.

I used this document:

  • I tested it in my environment, and I reproduced this problem of color change, as previously explained:

  • AND, I tried it through your COLOR SEPARATION demo URL JS CMYK Color Separation Demo | PDFTron WebViewer, and I reproduced exactly the same issue, with the "PANTONE 7709 C which is generated/rendered even above the originally white part which doesn’t appear anymore in this mode

As a reminder, this is how it should stay appearing (normal render through the original demo URL PDFTron WebViewer Demo: JavaScript PDF Viewer Demo):

Do you have an idea of what happens and how/when you could solve that issue, now that we have identified the problematic feature, please?

Thank you in advance for your time.

Best Regards,

Alexandre

Hi alex.plt,

Now that you have identified the color that is the issue, you can choose to disable it following that guide. Here is how I did it:

Relevant code snippet:

const doc = documentViewer.getDocument();
    // enable color separation
    doc.enableColorSeparations();

    // 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
      console.log('colorData: ', colorData);
      if (colorData.name === 'PANTONE 7709 C'){
        doc.enableSeparation(colorData.name, false); // disable this color
      }

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

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

Hi,

Thanks but I don’t want to make this color disappear. This color is existing in the original image, but is just outside the kind of rectangle with rounded edges (right part), not inside (left part).

If you open the original document with any standard application that allows you to view it, or even the WebViewer

it’s fine:

However, as soon as I use your color separation tool:

JS CMYK Color Separation Demo

There is a strange behaviour. I don’t want to just hide the blue, I want to keep the original colors as they are and where they are, and I don’t wank the tool replacing some colors randomly (like putting blue instead of white in our specific case:

I would like to have the same image appearing with the same correct rendering whatever feature I use from the WebViewer.

So, could you please explain me why this Color Separation feature changes some random colors for some illogical reason, and how to solve that issue please?

Thanks in advance for your help.

Best Regards,

Alex

Hi alex.plt,

Thank you for pointing this out,
We’ve added the issue to our backlog to be worked on in the future. We don’t have a timeline for when it will be fixed but if it does get fixed we’ll let you know when it’s available in an experimental build to test out and the estimated official release date. If you have a desired timeline for having this issue fixed please let us know and we’ll do our best to work with you on how this can fit into the release schedule.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

Hi,

Thanks for your answer.

Okay, yes please let me know as soon as you have more info: the sooner the better for us since we have customer using and appreciating the feature.

Meanwhile, could you please explain me how do you manage the code to partition the color rendering of each mode in your demos? As long as we don’t specifically run the color separator tool, the rendering is fine. I would like to be able to partition in the same way so that we always have the exact default rendering and not the potentially erroneous “overlay” color separation rendering that can generate errors. Therefore, the color separation rendering will only be activated when the user decides to do so by clicking on a specific button, which by default allows us to ensure that we have the right rendering until the color separation rendering is fixed.

Thanks.

Best Regards,

Alex

Hi alex.plt,

Oddly enough, the color-separation demo is the only demo incorrect displaying the pdf image.
You can find the code for it here:

When the pdf is loaded into the demo, we enable colorSeparations:
const doc = instance.Core.documentViewer.getDocument();
const separations = doc.getColorSeparations();
doc.enableColorSeparations(true); // This part can be used without a parameter

Thank you in advance.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.