放大画布时浏览器崩溃

在这里,我试图放大包含PDF的画布,并使用PDFJS将其渲染到画布上。 我在画布上添加了缩放比例,以避免模糊PDF的内容。

发生的事情是,当我尝试放大画布时,当我尝试将画布放大到更深时,chrome经常崩溃。

这里是供您更好地理解的小提琴,当我加载最大尺寸的PDF并尝试放大浏览器崩溃时 https://jsfiddle.net/ra70vq9b/1/

    var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

    var pdfDoc = null,pageNum = 1,pageRendering = false,pageNumPending = null,scale = 0.8,canvas = document.getElementById('the-canvas'),ctx = canvas.getcontext('2d');

    /**
     * Get page info from document,resize canvas accordingly,and render page.
     * @param num Page number.
     */
    function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function (page) {
            var viewport = page.getViewport({ scale: scale });
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,viewport: viewport
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function () {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

        // Update page counters
        document.getElementById('page_num').textContent = num;
    }
    document.querySelector("#pdf-upload").addEventListener("change",function (e) {
        var file = e.target.files[0]
        if (file.type != "application/pdf") {
            console.error(file.name,"is not a pdf file.")
            return
        }

        var fileReader = new FileReader();

        fileReader.onload = function () {
            var typedarray = new Uint8Array(this.result);
            /**
             * Asynchronously downloads PDF.
             */
            pdfjsLib.getDocument(typedarray).promise.then(function (pdfDoc_) {
                pdfDoc = pdfDoc_;
                document.getElementById('page_count').textContent = pdfDoc.numPages;

                // Initial/first page rendering
                renderPage(pageNum);
            });

        };
        fileReader.readAsArrayBuffer(file);
    });
    /**
     * If another page rendering in progress,waits until the rendering is
     * finised. Otherwise,executes rendering immediately.
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

    /**
     * Displays previous page.
     */
    function onPrevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        queueRenderPage(pageNum);
    }
    document.getElementById('prev').addEventListener('click',onPrevPage);

    /**
     * Displays next page.
     */
    function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
            return;
        }
        pageNum++;
        queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click',onNextPage);
    if (canvas.addEventListener) {
        // IE9,Chrome,Safari,Opera
        canvas.addEventListener("mousewheel",MouseWheelHandler,false);
        // Firefox
        canvas.addEventListener("DOMMouseScroll",false);
    }

    function MouseWheelHandler(e) {
        var e = window.event || e;
        console.log(e);
        var delta = Math.max(-1,Math.min(1,(e.wheelDelta || -e.detail)));
        console.log(delta);
        if (delta == 1) {
            scale = scale + 0.2;
        }
        else {
            scale = scale - 0.2;
        }
        renderPage(pageNum,scale);
    }
    /**
     * Asynchronously downloads PDF.
     */
    pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // Initial/first page rendering
        renderPage(pageNum);
    });
nghnyh 回答:放大画布时浏览器崩溃

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2913773.html

大家都在问