self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

Clipper: Fixes #1058: Import images at correct size

Browse Source
This commit is contained in:
Laurent Cozic
2019-01-20 15:26:43 +00:00
parent cc91c77f9e
commit d7dc625042
9 changed files with 111 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CliClient/tests/HtmlToMd.js
View File

@@ -37,7 +37,7 @@ describe('HtmlToMd', function() {
const htmlPath = basePath + '/' + htmlFilename;
const mdPath = basePath + '/' + filename(htmlFilename) + '.md';
// if (htmlFilename !== 'anchor_with_url_with_spaces.html') continue;
// if (htmlFilename !== 'picture.html') continue;
const html = await shim.fsDriver().readFile(htmlPath);
let expectedMd = await shim.fsDriver().readFile(mdPath);

47
CliClient/tests/html_to_md/picture.html Normal file
View File

@@ -0,0 +1,47 @@
<figure itemprop="associatedMedia image" itemscope="" itemtype="http://schema.org/ImageObject" data-component="image" data-media-id="75583fcfe2eb74f1e89ea320355ff4156f4ade7b" id="img-1">
<meta itemprop="representativeOfPage" content="true">
<meta itemprop="url" content="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=700&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=2a6a7ba9738c6a6a79eab39ba46c34cd">
<meta itemprop="width" content="3904">
<meta itemprop="height" content="2342">
<a href="#img-1" data-link-name="Launch Article Lightbox" data-is-ajax="">
<div>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 980px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 980px) and (min-resolution: 120dpi)" sizes="620px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=620&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=bacff59339e5ba117f957c24218ef76b 1240w">
<source media="(min-width: 980px)" sizes="620px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=620&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=f1427ce6689688d3d6e0087fe9cb5c18 620w">
<source media="(min-width: 740px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 740px) and (min-resolution: 120dpi)" sizes="700px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=700&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=70accd3c6e7d2c36f5ccc7321eab097e 1400w">
<source media="(min-width: 740px)" sizes="700px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=700&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=2a6a7ba9738c6a6a79eab39ba46c34cd 700w">
<source media="(min-width: 660px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 660px) and (min-resolution: 120dpi)" sizes="620px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=620&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=bacff59339e5ba117f957c24218ef76b 1240w">
<source media="(min-width: 660px)" sizes="620px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=620&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=f1427ce6689688d3d6e0087fe9cb5c18 620w">
<source media="(min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 480px) and (min-resolution: 120dpi)" sizes="645px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=645&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=6751fcff1b880acc45ed5aab6511a2ca 1290w">
<source media="(min-width: 480px)" sizes="645px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=645&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=d18702564383ce5d613d22b96ec6d726 645w">
<source media="(min-width: 0px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 0px) and (min-resolution: 120dpi)" sizes="465px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=465&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=a7b87fb26b9813d197f3c236a5282ca4 930w">
<source media="(min-width: 0px)" sizes="465px" srcset="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=465&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=821ae9e950ae92371b40a35e98a31116 465w">
<!--[if IE 9]></video><![endif]-->
<img itemprop="contentUrl" alt="A blood moon" src="https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=300&amp;quality=85&amp;auto=format&amp;fit=max&amp;s=1e9b643d2c109a1e271f50046eac1324">
</picture>
</div>
<span>
<svg width="22" height="22" viewBox="0 0 22 22">
<path d="M3.4 20.2L9 14.5 7.5 13l-5.7 5.6L1 14H0v7.5l.5.5H8v-1l-4.6-.8M18.7 1.9L13 7.6 14.4 9l5.7-5.7.5 4.7h1.2V.6l-.5-.5H14v1.2l4.7.6"></path>
</svg>
</span>
</a>
<label for="show-caption">
<span>
<svg width="6" height="14" viewBox="0 0 6 14">
<path d="M4.6 12l-.4 1.4c-.7.2-1.9.6-3 .6-.7 0-1.2-.2-1.2-.9 0-.2 0-.3.1-.5l2-6.7H.7l.4-1.5 4.2-.6h.2L3 12h1.6zm-.3-9.2c-.9 0-1.4-.5-1.4-1.3C2.9.5 3.7 0 4.6 0 5.4 0 6 .5 6 1.3c0 1-.8 1.5-1.7 1.5z"></path>
</svg>
</span>
</label>
<figcaption itemprop="description">
<span>
<svg width="11" height="10" viewBox="0 0 11 10">
<path fill-rule="evenodd" d="M5.5 0L11 10H0z"></path>
</svg>
</span>
A blood moon last occurred in July 2018, though clouds largely obscured the celestial phenomenon in the UK.
Photograph: JM F Almeida/Getty Images
</figcaption>
</figure>

3
CliClient/tests/html_to_md/picture.md Normal file
View File

@@ -0,0 +1,3 @@
[![A blood moon](https://i.guim.co.uk/img/media/75583fcfe2eb74f1e89ea320355ff4156f4ade7b/0_49_3904_2342/master/3904.jpg?width=300&quality=85&auto=format&fit=max&s=1e9b643d2c109a1e271f50046eac1324)](#img-1)
A blood moon last occurred in July 2018, though clouds largely obscured the celestial phenomenon in the UK. Photograph: JM F Almeida/Getty Images

24
Clipper/joplin-webclipper/content_scripts/index.js
View File

@@ -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') {

1
Clipper/joplin-webclipper/popup/src/bridge.js
View File

@@ -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 });

48
ElectronClient/app/package-lock.json generated
View File

@@ -59,16 +59,16 @@
},
"dependencies": {
"acorn": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.2.tgz",
"integrity": "sha512-GXmKIvbrN3TV7aVqAzVFaMW8F8wzVX7voEBRO3bDA64+EX37YSayggRJP5Xig6HYHBkWKpFg9W5gg6orklubhg=="
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.5.tgz",
"integrity": "sha512-i33Zgp3XWtmZBMNvCr4azvOFeWVw1Rk6p3hfi3LUDvIFraOMywb1kAtrbi+med14m4Xfpqm3zRZMT+c0FNE7kg=="
}
}
},
"acorn-walk": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.0.tgz",
"integrity": "sha512-ugTb7Lq7u4GfWSqqpwE0bGyoBZNMTok/zDBXxfEG0QM50jNlGhIWjRC1pPN7bvV1anhF+bs+/gNcRw+o55Evbg=="
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.1.tgz",
"integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw=="
},
"ajv": {
"version": "6.5.0",
@@ -1720,12 +1720,12 @@
}
},
"data-urls": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.0.1.tgz",
"integrity": "sha512-0HdcMZzK6ubMUnsMmQmG0AcLQPvbvb47R0+7CCZQCYgcd8OUWG91CG7sM6GoXgjz+WLl4ArFzHtBMy/QqSF4eg==",
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
"integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
"requires": {
"abab": "^2.0.0",
"whatwg-mimetype": "^2.1.0",
"whatwg-mimetype": "^2.2.0",
"whatwg-url": "^7.0.0"
},
"dependencies": {
@@ -3992,9 +3992,9 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
},
"joplin-turndown": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/joplin-turndown/-/joplin-turndown-4.0.9.tgz",
"integrity": "sha512-8MOxX4t5Ai22muHhXPMGNoKc/AB7gSo0eUvNh6dyd6b3vcSiMIRZE8UHpMjS9ruJQ+8e+8TtJXc0nfbexeHwrA==",
"version": "4.0.11",
"resolved": "https://registry.npmjs.org/joplin-turndown/-/joplin-turndown-4.0.11.tgz",
"integrity": "sha512-2oiwWX0nKYi1NVcaprSsrXQkYdGoRtPWFmnXdWQnQW44jlgjFV38B4VrgliwX5ZMq7cbx6A9IBwfXcBL2YV2NA==",
"requires": {
"jsdom": "^11.9.0"
}
@@ -4594,7 +4594,7 @@
},
"nan": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
"resolved": "http://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
"integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA=="
},
"nanomatch": {
@@ -6651,17 +6651,17 @@
"integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
},
"whatwg-encoding": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.4.tgz",
"integrity": "sha512-vM9KWN6MP2mIHZ86ytcyIv7e8Cj3KTfO2nd2c8PFDqcI4bxFmQp83ibq4wadq7rL9l9sZV6o9B0LTt8ygGAAXg==",
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
"integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
"requires": {
"iconv-lite": "0.4.23"
"iconv-lite": "0.4.24"
},
"dependencies": {
"iconv-lite": {
"version": "0.4.23",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
"integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"requires": {
"safer-buffer": ">= 2.1.2 < 3"
}
@@ -6674,9 +6674,9 @@
"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
},
"whatwg-mimetype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz",
"integrity": "sha512-5YSO1nMd5D1hY3WzAQV3PzZL83W3YeyR1yW9PcH26Weh1t+Vzh9B6XkDh7aXm83HBZ4nSMvkjvN2H2ySWIvBgw=="
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
"integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
},
"whatwg-url": {
"version": "6.5.0",

2
ElectronClient/app/package.json
View File

@@ -96,7 +96,7 @@
"highlight.js": "^9.12.0",
"html-entities": "^1.2.1",
"image-type": "^3.0.0",
"joplin-turndown": "^4.0.9",
"joplin-turndown": "^4.0.11",
"joplin-turndown-plugin-gfm": "^1.0.7",
"jssha": "^2.3.1",
"katex": "^0.10.0",

2
ReactNativeClient/lib/MdToHtml.js
View File

@@ -606,8 +606,8 @@ class MdToHtml {
border-bottom: 1px solid ` + style.htmlDividerColor + `;
}
img {
/* width: auto; */
max-width: 100%;
height: auto;
}
.inline-code {
border: 1px solid ` + style.htmlCodeBorderColor + `;

17
ReactNativeClient/lib/services/rest/Api.js
View File

@@ -323,6 +323,9 @@ class Api {
if (request.method === 'POST') {
const requestId = Date.now();
const requestNote = JSON.parse(request.body);
const imageSizes = requestNote.image_sizes ? requestNote.image_sizes : {};
let note = await this.requestNoteToNote(requestNote);
const imageUrls = markdownUtils.extractImageUrls(note.body);
@@ -335,7 +338,7 @@ class Api {
result = await this.createResourcesFromPaths_(result);
await this.removeTempFiles_(result);
note.body = this.replaceImageUrlsByResources_(note.body, result);
note.body = this.replaceImageUrlsByResources_(note.body, result, imageSizes);
this.logger().info('Request (' + requestId + '): Saving note...');
@@ -455,7 +458,7 @@ class Api {
return new Promise(async (resolve, reject) => {
const imagePath = await this.downloadImage_(url);
if (imagePath) output[url] = { path: imagePath };
if (imagePath) output[url] = { path: imagePath, originalUrl: url };
resolve();
});
}
@@ -493,12 +496,18 @@ class Api {
}
}
replaceImageUrlsByResources_(md, urls) {
replaceImageUrlsByResources_(md, urls, imageSizes) {
let output = md.replace(/(!\[.*?\]\()([^\s\)]+)(.*?\))/g, (match, before, imageUrl, after) => {
const urlInfo = urls[imageUrl];
if (!urlInfo || !urlInfo.resource) return before + imageUrl + after;
const imageSize = imageSizes[urlInfo.originalUrl];
const resourceUrl = Resource.internalUrl(urlInfo.resource);
return before + resourceUrl + after;
if (imageSize && (imageSize.naturalWidth !== imageSize.width || imageSize.naturalHeight !== imageSize.height)) {
return '<img width="' + imageSize.width + '" height="' + imageSize.height + '" src="' + resourceUrl + '"/>';
} else {
return before + resourceUrl + after;
}
});
return output;