git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Downscale pasted PNG images based on metadata (#29123)

Browse source 
Some images like MacOS screenshots contain
[pHYs](http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8)
data which we can use to downscale uploaded images so they render in the
same dppx ratio in which they were taken.

Before:

<img width="584" alt="image"
src="50979e3a-5d5a-40dc-a0a4-36eb6e28f14a">

After:

<img width="329" alt="image"
src="0690902a-f2fe-4c6b-97b3-6fdd67c21bad">

(cherry picked from commit 5e72526da4e915791f03af056890e16821bde052)
This commit is contained in:
silverwind 2024-02-19 03:23:06 +01:00 • committed by Earl Warren
parent bb911b2d5f
commit b3f2447bc4
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
3 changed files with 93 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web_src/js/features/comp/ImagePaste.js
View file

@ -1,5 +1,7 @@
import $ from 'jquery';
import {htmlEscape} from 'escape-goat';
import {POST} from '../../modules/fetch.js';
import {imageInfo} from '../../utils/image.js';
async function uploadFile(file, uploadUrl) {
const formData = new FormData();
@ -109,10 +111,22 @@ const uploadClipboardImage = async (editor, dropzone, e) => {
const placeholder = `![${name}](uploading ...)`;
editor.insertPlaceholder(placeholder);
const data = await uploadFile(img, uploadUrl);
editor.replacePlaceholder(placeholder, `![${name}](/attachments/${data.uuid})`);
const $input = $(`<input name="files" type="hidden">`).attr('id', data.uuid).val(data.uuid);
const {uuid} = await uploadFile(img, uploadUrl);
const {width, dppx} = await imageInfo(img);
const url = `/attachments/${uuid}`;
let text;
if (width > 0 && dppx > 1) {
// Scale down images from HiDPI monitors. This uses the <img> tag because it's the only
// method to change image size in Markdown that is supported by all implementations.
text = `<img width="${Math.round(width / dppx)}" alt="${htmlEscape(name)}" src="${htmlEscape(url)}">`;
} else {
text = `![${name}](${url})`;
}
editor.replacePlaceholder(placeholder, text);
const $input = $(`<input name="files" type="hidden">`).attr('id', uuid).val(uuid);
$files.append($input);
}
};