Improve PDF rendering quality and sharpness
Increased the scale for rendering PDF pages from 0.2 to 0.5 in the `getViewport` method to enhance resolution and sharpness. Although CSS scales the canvas down, the higher scale ensures better visual quality. Enabled high-quality rendering for the canvas context by setting `ctx.imageSmoothingEnabled` to `true` and `ctx.imageSmoothingQuality` to `'high'`, resulting in smoother and sharper PDF content rendering.
This commit is contained in:
@@ -255,12 +255,19 @@ window.pdfViewer = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const page = await this.pdfDoc.getPage(pageNum);
|
const page = await this.pdfDoc.getPage(pageNum);
|
||||||
const viewport = page.getViewport({ scale: 0.2 });
|
// Use higher scale for better quality (0.5 instead of 0.2)
|
||||||
|
// CSS will scale it down but maintain sharpness
|
||||||
|
const viewport = page.getViewport({ scale: 0.5 });
|
||||||
|
|
||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
|
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Enable high-quality rendering
|
||||||
|
ctx.imageSmoothingEnabled = true;
|
||||||
|
ctx.imageSmoothingQuality = 'high';
|
||||||
|
|
||||||
const renderContext = {
|
const renderContext = {
|
||||||
canvasContext: ctx,
|
canvasContext: ctx,
|
||||||
viewport: viewport
|
viewport: viewport
|
||||||
|
|||||||
Reference in New Issue
Block a user