mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
Clipper: Fixes #1058: Import images at correct size
This commit is contained in:
Laurent Cozic
parent
cc91c77f9e
commit
d7dc625042
@ -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
47
CliClient/tests/html_to_md/picture.html
Normal 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&quality=85&auto=format&fit=max&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&quality=45&auto=format&fit=max&dpr=2&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&quality=85&auto=format&fit=max&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&quality=45&auto=format&fit=max&dpr=2&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&quality=85&auto=format&fit=max&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&quality=45&auto=format&fit=max&dpr=2&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&quality=85&auto=format&fit=max&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&quality=45&auto=format&fit=max&dpr=2&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&quality=85&auto=format&fit=max&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&quality=45&auto=format&fit=max&dpr=2&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&quality=85&auto=format&fit=max&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&quality=85&auto=format&fit=max&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
3
CliClient/tests/html_to_md/picture.md
Normal file
@ -0,0 +1,3 @@
|
||||
[](#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
|
||||
@ -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') {
|
||||
|
||||
|
||||
@ -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
48
ElectronClient/app/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 + `;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user