PDFJ在iPAD上模糊PDF

Mar*_*_HH 4 html jquery canvas pdfjs

我正在使用cordova APP中的PDJS View.

一切正常,但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);
});
Run Code Online (Sandbox Code Playgroud)

dis*_*nte 6

我为此做的首先是停用图像平滑:

canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;
canvasContext.imageSmoothingEnabled = false;
canvasContext.webkitImageSmoothingEnabled = false;
canvasContext.mozImageSmoothingEnabled = false;
canvasContext.oImageSmoothingEnabled = false;
Run Code Online (Sandbox Code Playgroud)

然后乘以devicePixelRatio我发现的使用window.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);
    }
Run Code Online (Sandbox Code Playgroud)

这也解决了使用Retina显示器对Macbocks的模糊效果.