pdfPage2ImageDataURI
処理の流れ
1. PDF pageのviewportを取得する
たぶん描画情報が含まれているんだと思う
2021-01-27 23:48:20 適用してみた
3. canvasにPDF pageを書き込む
2021-01-28 00:02:43 解像度を設定できるoption printResolution を追加した。
初期値は 600(dpi)
script.jsexport 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);
}