PDFJs 在 iPad 上模糊 PDF答案

【问题标题】：PDFJs Blurry PDF on iPADPDFJs 在 iPad 上模糊 PDF
【发布时间】：2016-10-18 02:50:06
【问题描述】：

我正在 Cordova APP 中处理 PDJS 视图。

一切正常，只是 pdf 有点模糊。我知道这在某种程度上是因为视网膜显示，但我怎样才能改变这个 oder 如何获得正确的比例？

目前我正在尝试这个

pdfFile.getPage(data.page).then(function (page) {


    canvas.width = $('#pdfContainer').width();
    var viewport = page.getViewport(canvas.width / (page.getViewport(1).width));
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    var height= $('#pdfContainer').height();



    if (canvas.height > height) {
        canvas.height = height;
        var viewport = page.getViewport(canvas.height / (page.getViewport(1).height));
        canvas.width = viewport.width;
        canvas.height = viewport.height;
    }

    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };

    page.render(renderContext);
});

【问题讨论】：

你有没有设法解决这个问题？我有完全相同的问题。
是的，还需要这方面的帮助吗？
@distante 紧急？否则我稍后会提供答案
我找到了一个使用设备像素比的修复程序。这和你的一样吗？我也会发布“我的”答案。

标签： jquery html canvas pdfjs

【解决方案1】：

为此我首先禁用了图像平滑：

canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;
canvasContext.imageSmoothingEnabled = false;
canvasContext.webkitImageSmoothingEnabled = false;
canvasContext.mozImageSmoothingEnabled = false;
canvasContext.oImageSmoothingEnabled = false;

然后乘以我使用window.devicePixelRatio找到的devicePixelRatio

    if (window.devicePixelRatio > 1) {
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;

        canvas.width = canvasWidth * window.devicePixelRatio;
        canvas.height = canvasHeight * window.devicePixelRatio;
        canvas.style.width = canvasWidth + "px";
        canvas.style.height = canvasHeight + "px";

        canvasContext.scale(window.devicePixelRatio, window.devicePixelRatio);
    }

这也修复了带有 Retina 显示器的 Macbocks 的模糊效果。

【讨论】：