selfhosted
/
pairdrop
mirror of https://github.com/schlagmichdoch/PairDrop.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Implement thumbnail creation for heic images

This commit is contained in:
schlagmichdoch 2023-12-11 17:19:56 +01:00
parent 3238d582cc
commit 86d1aa3560
5 changed files with 88 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/scripts/heic2any.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
public/scripts/main.js
View File

@ -16,7 +16,8 @@ class PairDrop {
"scripts/ui.js",
"scripts/qr-code.min.js",
"scripts/zip.min.js",
"scripts/no-sleep.min.js"
"scripts/no-sleep.min.js",
"scripts/heic2any.min.js"
];
this.registerServiceWorker();

7
public/scripts/network.js
View File

@ -450,13 +450,12 @@ class Peer {
Events.fire('set-progress', {peerId: this._peerId, progress: 0.8, status: 'prepare'})
let dataUrl;
let dataUrl = '';
if (files[0].type.split('/')[0] === 'image') {
try {
dataUrl = await getResizedImageDataUrl(files[0], 400, null, 0.9);
dataUrl = await getThumbnailAsDataUrl(files[0], 400, null, 0.9);
} catch (e) {
dataUrl = '';
console.error(e);
}
}

30
public/scripts/ui.js
View File

@ -276,14 +276,28 @@ class PeersUI {
files = await mime.addMissingMimeTypesToFiles(files);
if (files[0].type.split('/')[0] === 'image') {
getResizedImageDataUrl(files[0], 80, null, 0.9)
.then(dataUrl => {
this.$shareModeImageThumb.style.backgroundImage = `url(${dataUrl})`;
this.$shareModeImageThumb.removeAttribute('hidden');
})
.catch(_ => {
this.$shareModeFileThumb.removeAttribute('hidden');
});
try {
let image = files[0]
// Heic files can't be shown by browsers natively --> convert to jpeg
if (image.type === "image/heif" || image.type === "image/heic") {
let blob = await fileToBlob(image);
image = await heic2any({
blob,
toType: "image/jpeg",
quality: 0.9
});
}
let imageUrl = URL.createObjectURL(image);
this.$shareModeImageThumb.style.backgroundImage = `url(${imageUrl})`;
await waitUntilImageIsLoaded(imageUrl);
this.$shareModeImageThumb.removeAttribute('hidden');
} catch (e) {
console.error(e);
this.$shareModeFileThumb.removeAttribute('hidden');
}
} else {
this.$shareModeFileThumb.removeAttribute('hidden');
}

66
public/scripts/util.js
View File

@ -469,11 +469,30 @@ function base64ToArrayBuffer(base64) {
return bytes.buffer;
}
function getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = URL.createObjectURL(file);
image.onload = _ => {
async function fileToBlob (file) {
return new Blob([new Uint8Array(await file.arrayBuffer())], {type: file.type});
}
function getThumbnailAsDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
return new Promise(async (resolve, reject) => {
try {
if (file.type === "image/heif" || file.type === "image/heic") {
// browsers can't show heic files --> convert to jpeg before creating thumbnail
let blob = await fileToBlob(file);
file = await heic2any({
blob,
toType: "image/jpeg",
quality: quality
});
}
let imageUrl = URL.createObjectURL(file);
let image = new Image();
image.src = imageUrl;
await waitUntilImageIsLoaded(imageUrl);
let imageWidth = image.width;
let imageHeight = image.height;
let canvas = document.createElement('canvas');
@ -501,11 +520,46 @@ function getResizedImageDataUrl(file, width = undefined, height = undefined, qua
let dataUrl = canvas.toDataURL("image/jpeg", quality);
resolve(dataUrl);
} catch (e) {
console.error(e);
reject(new Error(`Could not create an image thumbnail from type ${file.type}`));
}
image.onerror = _ => reject(`Could not create an image thumbnail from type ${file.type}`);
})
}
// Resolves returned promise when image is loaded and throws error if image cannot be shown
function waitUntilImageIsLoaded(imageUrl, timeout = 10000) {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = imageUrl;
const onLoad = () => {
cleanup();
resolve();
};
const onError = () => {
cleanup();
reject(new Error('Image failed to load.'));
};
const cleanup = () => {
clearTimeout(timeoutId);
image.onload = null;
image.onerror = null;
URL.revokeObjectURL(imageUrl);
};
const timeoutId = setTimeout(() => {
cleanup();
reject(new Error('Image loading timed out.'));
}, timeout);
image.onload = onLoad;
image.onerror = onError;
});
}
async function decodeBase64Files(base64) {
if (!base64) throw new Error('Base64 is empty');