Iphone11 Chrome: PDF Rendering Blurry Issue & My approach to solving the problem

[luguagua 0]

Hello!

When I view PDFs in the Chrome browser on iOS devices (iPhone/iPad) via Emby, the PDFs appear blurry. I experimented with some crude methods and managed to display them clearly. I hope to share this with the community in the hope of contributing to the improvement of the official implementation. This method uses PDF.js to manually render the PDF to the Canvas, employing precise scaling and DPR adaptation to bypass the shortcomings of the native renderer. Here is the JavaScript part:

let pdfDoc = null;
const dpr = window.devicePixelRatio || 1;
let lastScrollTop = 0;

// Load PDF with PDF.js (fixes character encoding issues)
async function loadFullscreenPDF() {
    try {
        const pdfDoc_ = await pdfjsLib.getDocument({
            url: pdfPath,
            cMapUrl: '{{ url_for('static', filename='pdfjs-dist/cmaps/') }}',
            cMapPacked: true
        }).promise;
        pdfDoc = pdfDoc_;
        renderFullWidthPages();
    } catch (e) {
        pdfContainer.innerHTML = `<div class="pdf-error">PDF Load Failed：${e.message}</div>`;
    }
}

// Render PDF pages with high-resolution scaling
async function renderFullWidthPages() {
    pdfContainer.innerHTML = '';
    const usableWidth = getUsableWidth();

    for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
        const page = await pdfDoc.getPage(pageNum);
        let viewport = page.getViewport({ scale: 1 });

        const scale = (zoomSelect.value === 'auto')
            ? usableWidth / viewport.width
            : (parseFloat(zoomSelect.value) * (usableWidth / viewport.width));

        const realScale = scale * dpr;
        viewport = page.getViewport({ scale: realScale });

        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        canvas.style.width = `${usableWidth}px`;
        canvas.style.height = 'auto';
        canvas.style.display = 'block';
        canvas.style.margin = '0 auto !important';

        pdfContainer.appendChild(canvas);
        await page.render({ canvasContext: ctx, viewport: viewport }).promise;
    }
}

// Listen for screen/orientation changes to re-render (maintain sharpness)
zoomSelect.addEventListener('change', renderFullWidthPages);
window.addEventListener('orientationchange', () => {
    toolbarHeight = pdfToolbar.offsetHeight;
    renderFullWidthPages();
});

// Initialize PDF load
loadFullscreenPDF();