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

29
web_src/js/utils/image.test.js Normal file
View file

@ -0,0 +1,29 @@
import {pngChunks, imageInfo} from './image.js';
const pngNoPhys = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAADUlEQVQIHQECAP3/AAAAAgABzePRKwAAAABJRU5ErkJggg==';
const pngPhys = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAEElEQVQI12OQNZcAIgYIBQAL8gGxdzzM0A==';
const pngEmpty = 'data:image/png;base64,';
async function dataUriToBlob(datauri) {
return await (await globalThis.fetch(datauri)).blob();
}
test('pngChunks', async () => {
expect(await pngChunks(await dataUriToBlob(pngNoPhys))).toEqual([
{name: 'IHDR', data: new Uint8Array([0, 0, 0, 1, 0, 0, 0, 1, 8, 0, 0, 0, 0])},
{name: 'IDAT', data: new Uint8Array([8, 29, 1, 2, 0, 253, 255, 0, 0, 0, 2, 0, 1])},
{name: 'IEND', data: new Uint8Array([])},
]);
expect(await pngChunks(await dataUriToBlob(pngPhys))).toEqual([
{name: 'IHDR', data: new Uint8Array([0, 0, 0, 2, 0, 0, 0, 2, 8, 2, 0, 0, 0])},
{name: 'pHYs', data: new Uint8Array([0, 0, 22, 37, 0, 0, 22, 37, 1])},
{name: 'IDAT', data: new Uint8Array([8, 215, 99, 144, 53, 151, 0, 34, 6, 8, 5, 0, 11, 242, 1, 177])},
]);
expect(await pngChunks(await dataUriToBlob(pngEmpty))).toEqual([]);
});
test('imageInfo', async () => {
expect(await imageInfo(await dataUriToBlob(pngNoPhys))).toEqual({width: 1, dppx: 1});
expect(await imageInfo(await dataUriToBlob(pngPhys))).toEqual({width: 2, dppx: 2});
expect(await imageInfo(await dataUriToBlob(pngEmpty))).toEqual({width: 0, dppx: 1});
});