Clipper: Fix screen ratio issue when taking a screenshot

packages/app-clipper/background.js

@@ -49,21 +49,52 @@ browser_.runtime.onInstalled.addListener(function() {
 	}
 });
 
+async function getImageSize(dataUrl) {
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+
+		image.onload = function() {
+			resolve({ width: image.width, height: image.height });
+		};
+
+		image.onerror = function(event) {
+			reject(event);
+		};
+
+		image.src = dataUrl;
+	});
+}
+
 browser_.runtime.onMessage.addListener(async (command) => {
 	if (command.name === 'screenshotArea') {
+		const browserZoom = await browserGetZoom();
 
-		const zoom = await browserGetZoom();
+		// The dimensions of the image returned by Firefox are the regular ones,
-
+		// while the one returned by Chrome depend on the screen pixel ratio. So
+		// it would return a 600*400 image if the window dimensions are 300x200
+		// and the screen pixel ratio is 2.
+		//
+		// Normally we could rely on window.devicePixelRatio to tell us that but
+		// since Firefox and Chrome handle this differently, we need to
+		// calculate the ratio ourselves. It's simply the image dimensions
+		// divided by the window inner width.
+		//
+		// The crop rectangle is always in real pixels, so we need to multiply
+		// it by the ratio we've calculated.
 		const imageDataUrl = await browserCaptureVisibleTabs(null);
+		const imageSize = await getImageSize(imageDataUrl);
+		const imagePixelRatio = imageSize.width / command.content.windowInnerWidth;
+
 		const content = Object.assign({}, command.content);
 		content.image_data_url = imageDataUrl;
 		if ('url' in content) content.source_url = content.url;
 
+		const ratio = browserZoom * imagePixelRatio;
 		const newArea = Object.assign({}, command.content.crop_rect);
-		newArea.x *= zoom;
+		newArea.x *= ratio;
-		newArea.y *= zoom;
+		newArea.y *= ratio;
-		newArea.width *= zoom;
+		newArea.width *= ratio;
-		newArea.height *= zoom;
+		newArea.height *= ratio;
 		content.crop_rect = newArea;
 
 		fetch(`${command.api_base_url}/notes`, {

packages/app-clipper/content_scripts/index.js

@@ -513,6 +513,8 @@
 						url: pageLocationOrigin() + location.pathname + location.search,
 						parent_id: command.parent_id,
 						tags: command.tags,
+						windowInnerWidth: window.innerWidth,
+						windowInnerHeight: window.innerHeight,
 					};
 
 					browser_.runtime.sendMessage({