Improve PDF rendering quality and HiDPI support
Enhanced thumbnail rendering in `envelope-viewer.css` by adding `image-rendering` properties for better visual quality. Updated `pdf-viewer.js` to support high-quality rendering with HiDPI support: - Replaced fixed scale with dynamic scaling using `devicePixelRatio` (capped at 2x) and a base scale of 0.75. - Adjusted canvas resolution to match scaled viewport dimensions. - Removed inline canvas styles to delegate display size to CSS. - Retained high-quality rendering settings for the canvas context. These changes improve visual fidelity while maintaining performance.
This commit is contained in:
@@ -182,6 +182,8 @@ body.resizing {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
.pdf-thumbnail__label {
|
||||
|
||||
@@ -255,16 +255,25 @@ window.pdfViewer = {
|
||||
}
|
||||
|
||||
const page = await this.pdfDoc.getPage(pageNum);
|
||||
// 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;
|
||||
// High-quality rendering with HiDPI support
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const baseScale = 0.75; // Increased base scale for better quality
|
||||
const scale = baseScale * Math.min(dpr, 2); // Cap at 2x for performance
|
||||
|
||||
const viewport = page.getViewport({ scale: scale });
|
||||
|
||||
// Set actual canvas pixel dimensions (internal resolution)
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
|
||||
// Remove any inline styles - let CSS handle display size
|
||||
canvas.style.width = '';
|
||||
canvas.style.height = '';
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Enable high-quality rendering
|
||||
// Enable maximum quality rendering
|
||||
ctx.imageSmoothingEnabled = true;
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user