diff --git a/frontend/components/messenger/ScreenCapture.tsx b/frontend/components/messenger/ScreenCapture.tsx index c01f27f8..2b1901df 100644 --- a/frontend/components/messenger/ScreenCapture.tsx +++ b/frontend/components/messenger/ScreenCapture.tsx @@ -61,26 +61,29 @@ export function ScreenCapture({ onCapture, onCancel }: ScreenCaptureProps) { // Capture via modern-screenshot try { const { domToPng } = await import("modern-screenshot"); - const dpr = window.devicePixelRatio || 1; const dataUrl = await domToPng(document.body, { width: window.innerWidth, height: window.innerHeight, - style: { - transform: "none", - transformOrigin: "top left", - }, }); - // Crop the captured region + // Crop the captured region — image is at CSS pixel scale const img = new Image(); img.src = dataUrl; await new Promise((res) => { img.onload = res; }); + // Scale factor between actual image size and CSS pixels + const scaleX = img.naturalWidth / window.innerWidth; + const scaleY = img.naturalHeight / window.innerHeight; + const canvas = canvasRef.current!; - canvas.width = r.w * dpr; - canvas.height = r.h * dpr; + canvas.width = r.w * scaleX; + canvas.height = r.h * scaleY; const ctx = canvas.getContext("2d")!; - ctx.drawImage(img, r.x * dpr, r.y * dpr, r.w * dpr, r.h * dpr, 0, 0, r.w * dpr, r.h * dpr); + ctx.drawImage( + img, + r.x * scaleX, r.y * scaleY, r.w * scaleX, r.h * scaleY, + 0, 0, r.w * scaleX, r.h * scaleY, + ); canvas.toBlob((blob) => { if (!blob) { onCancel(); return; }