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 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.width = viewport.width;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Enable high-quality rendering
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: ctx,
|
||||
viewport: viewport
|
||||
|
||||
Reference in New Issue
Block a user