pdfPage2ImageDataURI

pdf.jsで取得したPDFのページを画像データのdata URIに変換するscript

処理の流れ

1. PDF pageのviewportを取得する

たぶん描画情報が含まれているんだと思う

2. <canvas>を生成する

ここでprintResolutionをいじれば解像度を変えられるらしい

2021-01-27 23:48:20 適用してみた

3. canvasにPDF pageを書き込む

4. data URIを生成する

2021-01-28 00:02:43 解像度を設定できるoption printResolutionを追加した。

初期値は600(dpi)

code:script.js

export async function pdfPage2ImageDataURI(pdfPage, {type = 'image/png', printResolution = 600} = {}) {

const viewport = pdfPage.getViewport({

scale: window.devicePixelRatio ?? 1.5,

});

const PRINT_UNITS = printResolution / 72.0;

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

const renderContext = {canvasContext: ctx, viewport: viewport, transform: PRINT_UNITS, 0, 0, PRINT_UNITS, 0, 0,};

canvas.height = Math.floor(viewport.height * PRINT_UNITS);

canvas.width = Math.floor(viewport.width * PRINT_UNITS);

await pdfPage.render(renderContext).promise;

return canvas.toDataURL(type);

}