私は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);
});
}
キャンバスをラッパーの中に入れるだけです<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';
私は同じ問題を抱えています。 '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);
});
PAGE_SCALE = 1の問題のようです。ピクセルがPDF単位(後者は1/72インチ)に等しいページをレンダリングするように指示しているだけです。PDF単位の一般的なページサイズは612x792です。最近のディスプレイのほとんどは110〜146 dpiです。3008x1692の画面でページを取得したい場合は、2.0〜5.0倍のスケールを確認します。
人々が行う主な間違いは、CANVASにCSSスケールを適用することです。 CSSスケールが論理CANVASピクセルを画面ピクセルに配置しない場合、ぼやけた画像効果が得られます。 (参照 キャンバスの描画とRetinaディスプレイ:実行可能? )
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