Clipper: Fixes #1058: Import images at correct size

Clipper/joplin-webclipper/content_scripts/index.js

@@ -30,6 +30,21 @@
 		return output;
 	}
 
+	function getImageSizes(element) {
+		const images = element.getElementsByTagName('img');
+		const output = {};
+		for (let i = 0; i < images.length; i++) {
+			const img = images[i];
+			output[img.src] = {
+				width: img.width,
+				height: img.height,
+				naturalWidth: img.naturalWidth,
+				naturalHeight: img.naturalHeight,
+			};
+		}
+		return output;
+	}
+
 	// Cleans up element by removing all its invisible children (which we don't want to render as Markdown)
 	function cleanUpElement(element) {
 		const childNodes = element.childNodes;
@@ -74,7 +89,7 @@
 	async function prepareCommandResponse(command) {
 		console.info('Got command: ' + command.name);
 
-		const clippedContentResponse = (title, html) => {
+		const clippedContentResponse = (title, html, imageSizes) => {
 			return {
 				name: 'clippedContent',
 				title: title,
@@ -83,6 +98,7 @@
 				url: location.origin + location.pathname + location.search,
 				parent_id: command.parent_id,
 				tags: command.tags || '',
+				image_sizes: imageSizes,
 			};			
 		}
 
@@ -99,20 +115,20 @@
 				response.warning = 'Could not retrieve simplified version of page - full page has been saved instead.';
 				return response;
 			}
-			return clippedContentResponse(article.title, article.body);
+			return clippedContentResponse(article.title, article.body, getImageSizes(document));
 
 		} else if (command.name === "completePageHtml") {
 
 			const cleanDocument = document.body.cloneNode(true);
 			cleanUpElement(cleanDocument);
-			return clippedContentResponse(pageTitle(), cleanDocument.innerHTML);
+			return clippedContentResponse(pageTitle(), cleanDocument.innerHTML, getImageSizes(document));
 
 		} else if (command.name === "selectedHtml") {
 
 		    const range = window.getSelection().getRangeAt(0);
 		    const container = document.createElement('div');
 		    container.appendChild(range.cloneContents());
-		    return clippedContentResponse(pageTitle(), container.innerHTML);
+		    return clippedContentResponse(pageTitle(), container.innerHTML, getImageSizes(document));
 
 		} else if (command.name === 'screenshot') {
 

Clipper/joplin-webclipper/popup/src/bridge.js

@@ -29,6 +29,7 @@ class Bridge {
 					source_url: command.url,
 					parent_id: command.parent_id,
 					tags: command.tags || '',
+					image_sizes: command.image_sizes || {},
 				};
 
 				this.dispatch({ type: 'CLIPPED_CONTENT_SET', content: content });