关于pdfviewer中pdf.js的分辨率

Question

我是pdfviewer的新手，对于如何通过pdf.js设置上下文的分辨率有一些问题，以下是我的代码片段：

<script type="text/javascript">
PDFJS.getDocument('https://cdn.rawgit.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf').then(function (pdf) {
        for (var pageNum = 1; pageNum < pdf.numPages; ++pageNum) {
            pdf.getPage(pageNum).then(function (page) {
                // you can now use *page* here

                var scale = 2;
                var viewport = page.getViewport(scale);

                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);

                document.getElementById('pdf-container').appendChild(canvas);
            });
        }
    })

</script>

<form id="form1" runat="server">
    <div>
    </div> 
      <div id="pdf-container"></div>
</form>

主要问题是页面分辨率低，导致内容不干净，不像在视图中 http://mozilla.github.io/pdf.js/web/viewer.html。如何使用 pdf.js 设置分辨率使其像查看器一样。非常感谢。

Answer 1

我找到了一种提高分辨率的方法，但我没有找到一个数学方程式来表示它。

 <script type="text/javascript">
        PDFJS.getDocument('https://cdn.rawgit.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf').then(function (pdf) {
            for (var pageNum = 1; pageNum < pdf.numPages; ++pageNum) {
                pdf.getPage(pageNum).then(function (page) {
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.style.height = "1000px";
                    canvas.style.width = "900px";
                    var scale = 2.5;
                    var viewport = page.getViewport(scale);
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    console.log("canvas.height=" + canvas.height);
                    console.log("canvas.width=" + canvas.width);
                    console.log("canvas.style.height=" + canvas.style.height);
                    console.log("canvas.style.width=" + canvas.style.width);
                    console.log("scale="+scale);
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                    document.getElementById('pdf-container').appendChild(canvas);
                });
            }
        })

    </script>

设置canvas静态值的宽高样式，然后使用getViewport的scale，设置canvas的宽高。在这种情况下，context的dpi会更好，scale越高，dpi的提升就越大。

关于pdfviewer中pdf.js的分辨率

About the resolution of pdf.js in pdfviewer

javascript

pdf

pdf.js