self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Clipper: Fix screen ratio issue when taking a screenshot

Browse Source
This commit is contained in:
Laurent Cozic 2020-11-15 22:30:29 +00:00
parent f45029b2e8
commit a8e36f41d5
2 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/app-clipper/background.js
View File

@ -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.y *= zoom;
newArea.width *= zoom;
newArea.height *= zoom;
newArea.x *= ratio;
newArea.y *= ratio;
newArea.width *= ratio;
newArea.height *= ratio;
content.crop_rect = newArea;
fetch(`${command.api_base_url}/notes`, {

2
packages/app-clipper/content_scripts/index.js
View File

@ -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({