web-dev-qa-db-ja.com

pdf.jsを使用するとPDFの画質が悪い

私はpdf.jsを使用しています。

ただし、PDFの画質は低品質です。

解決方法を教えてください。

var TARGET_PAGE = 1; 
var PAGE_SCALE = 1; 

function viewPDF(targetPage,pageScale){

PDFJS.getDocument(targetPath).then(function (pdf) {
    return pdf.getPage(targetPage);
}).then(function (page) {
    var scale = pageScale;
    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.body.appendChild(canvas);
});
}
javascriptpdfpdf.js
14
ryo.ss

キャンバスをラッパーの中に入れるだけです<div>、およびラッパーを基準にしてレンダリングされたサイズを設定します。次に、キャンバスの論理サイズをビューポートと同じ大きさに設定して、画面上の実際のサイズを変更せずに高dpiを実現できます。例えば、

var scale = 5;
var viewport = page.getViewport(scale);
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "100%";
canvas.style.height = "100%";
wrapper.style.width = Math.floor(viewport.width/scale) + 'pt';
wrapper.style.height = Math.floor(viewport.height/scale) + 'pt';
19
user2840912

私は同じ問題を抱えています。 'scale'属性を1から2に変更しただけで、品質が大幅に向上しました。

pdfDoc.getPage(1)
  .then(function (page) {
       var canvas = document.getElementById('myCanvas');
       var ctx = canvas.getContext('2d');

       var viewport = page.getViewport(2); // 2 is the 'scale' attr
       canvas.height = viewport.height;
       canvas.width = viewport.width;

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

       page.render(renderContext);
});
6
Wiesio Pie

PAGE_SCALE = 1の問題のようです。ピクセルがPDF単位（後者は1/72インチ）に等しいページをレンダリングするように指示しているだけです。PDF単位の一般的なページサイズは612x792です。最近のディスプレイのほとんどは110〜146 dpiです。3008x1692の画面でページを取得したい場合は、2.0〜5.0倍のスケールを確認します。

人々が行う主な間違いは、CANVASにCSSスケールを適用することです。 CSSスケールが論理CANVASピクセルを画面ピクセルに配置しない場合、ぼやけた画像効果が得られます。 （参照 キャンバスの描画とRetinaディスプレイ：実行可能？ ）

5
async5

GetViewportでスケールをズームしてから、cssスタイルでキャンバスのズームを解除することで機能させます。

var viewport = page.getViewport(10);//Paint with zoom 10X to reach "high definition" PDF drawing
canvas.width = viewport.width;//keep high definition drawing canvas
canvas.style.width = "100%";//de-zoom canvas with style (maybe you can directly use CSS), reaching de-zoom of higher definition PDF
0
Luca C.