Pinch zoom implementation for PDF.js viewer

viewer.html

<!-- Goes into viewer.html just before ending </body> -->
<script>
    let pinchZoomEnabled = false;
    function enablePinchZoom(pdfViewer) {
        let startX = 0, startY = 0;
        let initialPinchDistance = 0;        
        let pinchScale = 1;    
        const viewer = document.getElementById("viewer");
        const container = document.getElementById("viewerContainer");
        const reset = () => { startX = startY = initialPinchDistance = 0; pinchScale = 1; };
        // Prevent native iOS page zoom
        //document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false });
        document.addEventListener("touchstart", (e) => {
            if (e.touches.length > 1) {
                startX = (e.touches[0].pageX + e.touches[1].pageX) / 2;
                startY = (e.touches[0].pageY + e.touches[1].pageY) / 2;
                initialPinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
            } else {
                initialPinchDistance = 0;
            }
        });
        document.addEventListener("touchmove", (e) => {
            if (initialPinchDistance <= 0 || e.touches.length < 2) { return; }
            if (e.scale !== 1) { e.preventDefault(); }
            const pinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
            const originX = startX + container.scrollLeft;
            const originY = startY + container.scrollTop;
            pinchScale = pinchDistance / initialPinchDistance;
            viewer.style.transform = `scale(${pinchScale})`;
            viewer.style.transformOrigin = `${originX}px ${originY}px`;
        }, { passive: false });
        document.addEventListener("touchend", (e) => {
            if (initialPinchDistance <= 0) { return; }
            viewer.style.transform = `none`;
            viewer.style.transformOrigin = `unset`;
            PDFViewerApplication.pdfViewer.currentScale *= pinchScale;
            const rect = container.getBoundingClientRect();
            const dx = startX - rect.left;
            const dy = startY - rect.top;
            container.scrollLeft += dx * (pinchScale - 1);
            container.scrollTop += dy * (pinchScale - 1);
            reset();
        });
    }
    document.addEventListener('webviewerloaded', () => {
        if (!pinchZoomEnabled) {
            pinchZoomEnabled = true;
            enablePinchZoom();
        }
    });
</script>

I have a question. As I touch to zoom out, I want to set my pdf page scale for min size (page fit)
How can I do. I waiting for your ask.

So I have set minScale and maxScale like this. Just replace touchend event

const pinchMaxScale = 5;
const pinchMinScale = 0.3;
      document.addEventListener("touchend", (e) => {
            if (initialPinchDistance <= 0) { return; }
            viewer.style.transform = `none`;
            viewer.style.transformOrigin = `unset`;
            
            const newPinchScale = PDFViewerApplication.pdfViewer.currentScale * pinchScale;

            if (newPinchScale <= pinchMaxScale && newPinchScale >= pinchMinScale) {
                PDFViewerApplication.pdfViewer.currentScale = newPinchScale;
                const rect = container.getBoundingClientRect();
                const dx = startX - rect.left;
                const dy = startY - rect.top;
                container.scrollLeft += dx * (pinchScale - 1);
                container.scrollTop += dy * (pinchScale - 1);
            }else{
            	if(newPinchScale >= pinchMaxScale){
            		PDFViewerApplication.pdfViewer.currentScale = pinchMaxScale;
            	}else{
            		PDFViewerApplication.pdfViewer.currentScale = pinchMinScale;
            	}
            }
            reset();
        });

I hope it will help someone else :-)

So this code is working fine but it may need a little update if you're using recent versions of mozilla/pdf.js

webviewerloaded was not firing on iOS 13+ and Android 10+ when I tested because the event was fired using deprecated code.

In this case, you should be listening on DOMContentLoaded instead of webviewerloaded

Replace

document.addEventListener('webviewerloaded', () => {

With

document.addEventListener('DOMContentLoaded', () => {

Hence the final code should be this:

let pinchZoomEnabled = false;
function enablePinchZoom(pdfViewer) {
    let startX = 0,
        startY = 0;
    let initialPinchDistance = 0;
    let pinchScale = 1;
    const viewer = document.getElementById("viewer");
    const container = document.getElementById("viewerContainer");
    const reset = () => {
        startX = startY = initialPinchDistance = 0;
        pinchScale = 1;
    };
    // Prevent native iOS page zoom
    //document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false });
    document.addEventListener("touchstart", (e) => {
        if (e.touches.length > 1) {
            startX = (e.touches[0].pageX + e.touches[1].pageX) / 2;
            startY = (e.touches[0].pageY + e.touches[1].pageY) / 2;
            initialPinchDistance = Math.hypot(
                e.touches[1].pageX - e.touches[0].pageX,
                e.touches[1].pageY - e.touches[0].pageY
            );
        } else {
            initialPinchDistance = 0;
        }
    });
    document.addEventListener(
        "touchmove",
        (e) => {
            if (initialPinchDistance <= 0 || e.touches.length < 2) {
                return;
            }
            if (e.scale !== 1) {
                e.preventDefault();
            }
            const pinchDistance = Math.hypot(
                e.touches[1].pageX - e.touches[0].pageX,
                e.touches[1].pageY - e.touches[0].pageY
            );
            const originX = startX + container.scrollLeft;
            const originY = startY + container.scrollTop;
            pinchScale = pinchDistance / initialPinchDistance;
            viewer.style.transform = `scale(${pinchScale})`;
            viewer.style.transformOrigin = `${originX}px ${originY}px`;
        },
        { passive: false }
    );
    document.addEventListener("touchend", (e) => {
        if (initialPinchDistance <= 0) {
            return;
        }
        viewer.style.transform = `none`;
        viewer.style.transformOrigin = `unset`;
        PDFViewerApplication.pdfViewer.currentScale *= pinchScale;
        const rect = container.getBoundingClientRect();
        const dx = startX - rect.left;
        const dy = startY - rect.top;
        container.scrollLeft += dx * (pinchScale - 1);
        container.scrollTop += dy * (pinchScale - 1);
        reset();
    });
}
document.addEventListener("DOMContentLoaded", () => {
    if (!pinchZoomEnabled) {
        pinchZoomEnabled = true;
        enablePinchZoom();
    }
});

It can be placed in a file called zoom.js and you can just add this line before the final </body> tag in viewer.html file in the web folder.

<body>
    ---
    ---
    <script src="zoom.js"></script>
</body>

Is this just suitable for viewer.html? Can I utilize it within my customed viewer? Like a viewer in a div using canvas backend?

Unfortunately pinch-to-zoom doesn't work if I put the viewer in an iframe :( Is there any kind of solution?

Is this just suitable for viewer.html? Can I utilize it within my customed viewer? Like a viewer in a div using canvas backend?

I think it should work but you would have to make appropriate changes as required by the back end that you make.

hello guys , when i implement and test it on my application ,it doesn't work

Thank you @meghrathod - It's working for BlazorWebView in MAUI Blazor

hi guys, if you use modern browser, please upgrade pdfjs to latest version or the supported version(version >=3.3.122, for more info see this PR), pdfjs now support pinch-to-zoom feature.
if unfortunately, not use modern browser(for example, you have to use pdfjs version v2.x), this code work perfectly!

hi guys, if you use modern browser, please upgrade pdfjs to latest version or the supported version(version >=3.3.122, for more info see this PR), pdfjs now support pinch-to-zoom feature. if unfortunately, not use modern browser(for example, you have to use pdfjs version v2.x), this code work perfectly!

example mobile-viewer not support pinch zoom, do you know how to enable?

mozilla/pdf.js#19004
https://github.com/mozilla/pdf.js/tree/master/examples/mobile-viewer