the position of words render by textlayer are not the same with canvas

[zishengwu]

Attach (recommended) or Link to PDF file here:

Configuration:

• Web browser and its version: Chrome 124.0.6367.119(arm 64)
• Operating system and its version: macOS 14.1.1 (23B81)
• PDF.js version: 4.2.67 (from npm: pdfjs-dist)
• Is a browser extension: No

Steps to reproduce the problem:

1. render pdf success, and the canvas can be found.
2. add textlayer to render, but the position of those words is not correct.

What is the expected behavior? (add screenshot)

when i zoomin the browser up to 250%, seems the position correct.

What went wrong? (add screenshot)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

Here is my code.

Here is the detail from browser

can anyone help me?

[lfoppiano]

Hi @zishengwu, thanks to your example which seems to provide an update version of programatically using pdf.js I could get to add the text layers. I have the same issue as you and I believe it might be due to the scaling.

For example the url at the top is appearing, as text in the highlighted portion in this example:

I'm totally lost on how to fix it, though.

I've opened #18112 just yesteday before stumbling upon this discussion, today 👍

[zishengwu]

`import 'pdfjs-dist/web/pdf_viewer.css';

async function renderFullPage(){
const pdf = await pdfjsLib.getDocument(src).promise;

    const pdfContainer = document.createElement('div');
    pdfContainer.style.setProperty('--scale-factor', scale_ratio);

    for (let i=1; i<=pdf.numPages; i++){
        const pageNumber = i;
        const page = await pdf.getPage(pageNumber);

        const viewport = page.getViewport({scale: scale_ratio});

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        canvas.height = viewport.height ;
        canvas.width = viewport.width ;
        
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };
    
        await page.render(renderContext);

  
        const canvasWrapper = document.createElement('div');
        canvasWrapper.className = 'canvasWrapper';
        canvasWrapper.appendChild(canvas);

        const textContent = await page.getTextContent();
        const textLayerDiv = document.createElement('div');

        textLayerDiv.className = `textLayer`;

        pdfjsLib.renderTextLayer({
            textContentSource: textContent,
            container: textLayerDiv,
            viewport: viewport,
            textDivs: []
        });
        
        const pageDiv = document.createElement('div');
        pageDiv.className = 'page';
      
        pageDiv.style = "position: relative; margin-bottom:10px";

        pageDiv.appendChild(canvasWrapper);
        pageDiv.appendChild(textLayerDiv);
        
        pdfContainer.appendChild(pageDiv);
        
    }

}`

Hi, maybe you can try this code. After set the `--scale-factor` in top div, it works for me now.

[lfoppiano]

Thanks. I think I integrated correctly, but now I have an issue with pdf.js version 3 and I'm struggling to update to version 4.

[lfoppiano]

@zishengwu Thanks! how do you calculate the scale ratio?

[zishengwu]

I don't have a specific scale ratio, but according to some codes from Internet, scale_ratio=1.5 is a experience value

[lfoppiano]

I finally solved, I calculate the scale dividing the real width of the PDF divided by the unscaled viewport. The code is here: lfoppiano/streamlit-pdf-viewer#52

BTW I noticed that when I enable the text layers they might interfere with the annotations that I'm adding on top of the documents.