A ver, no puedo mostrarlo en un snippet, porque PDF.js hace un request de tipo POST para traerse el PDF y estos snippets no lo permiten. Pero te dejé un ejemplo en
https://examples.ffflabs.com/pdf2png.html
Básicamente, creas un canvas con el ancho deseado:
<body>
<div id="pdf-main-container">
<a id="download-image" href="#">Download PNG</a>
<canvas id="pdf-canvas" width="800"></canvas>
</div>
</body>
Ahí le puse 800px de ancho.
Ese canvas después exporta la imagen cuando el link de download recibe la salida de canvas.toDataUrl()
y el atributo download
que le indica al browser que debe descargar el link en vez de seguirlo:
$("#download-image").on('click', function() {
$(this).attr('href', __CANVAS.toDataURL()).attr('download', 'page.png');
});
Lo importante es que la dimensión original del PDF se redimensiona al tamaño del contenedor canvas. Si el contenedor es muy chico, se perderá calidad.
Todo lo anterior puede hacerse también con un PDF de varias páginas
https://examples.ffflabs.com/pdf-to-png2.html
Sólo que el paginador va cargando una página a la vez. Si quisieras exportar todo el documento habría que modificar el script y posiblemente alterar la altura del canvas.