Resize refactoring to create downsized image and thumbnails in one run

This commit is contained in:
Eric van der Vlist 2023-04-22 18:04:20 +02:00
parent 3ca64ad7eb
commit 06b2c60a4a
2 changed files with 53 additions and 48 deletions

View File

@ -21,7 +21,7 @@ import {
} from '@capacitor/filesystem'; } from '@capacitor/filesystem';
import piexif from 'piexifjs'; import piexif from 'piexifjs';
import { getDate, getGps } from '../../lib/exif'; import { getDate, getGps } from '../../lib/exif';
import { resize } from '../../lib/image'; import { downsize } from '../../lib/image';
interface Props { interface Props {
file: File; file: File;
@ -118,7 +118,10 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
const id = exifObj.Exif[piexif.ExifIFD.ImageUniqueID]; const id = exifObj.Exif[piexif.ExifIFD.ImageUniqueID];
const gps = getGps(exifObj); const gps = getGps(exifObj);
const date = getDate(exifObj); const date = getDate(exifObj);
const thumbnailUrl = await resize(reader.result, 128); const [downsizedUrl, thumbnailUrl] = await downsize(
reader.result,
[1024, 128]
);
// const gps = tags.gps; // const gps = tags.gps;
// const image = await Image.load(reader.result); // const image = await Image.load(reader.result);
// const thumbnail = image.resize({ // const thumbnail = image.resize({

View File

@ -1,35 +1,20 @@
export const resize = (imageUrl: string, maxSize: number) => { import { cloneDeep } from 'lodash';
let resolver = (resizedImageUrl: any) => {};
const img = document.createElement('img'); const downsizeCanvas = (canvas: HTMLCanvasElement, maxSize: number) => {
img.onload = () => { const currentMaxSize = Math.max(canvas.width, canvas.height);
const currentMaxSize = Math.max(img.width, img.height);
const ratio = currentMaxSize / maxSize; const ratio = currentMaxSize / maxSize;
const targetWidth = img.width / ratio; const targetWidth = canvas.width / ratio;
const targetHeight = img.height / ratio; const targetHeight = canvas.height / ratio;
const nbStepsReal = Math.log2(ratio); const nbStepsReal = Math.log2(ratio);
const nbSteps = Math.floor(nbStepsReal); const nbSteps = Math.floor(nbStepsReal);
let width = canvas.width;
const canvas = document.createElement('canvas'); let height = canvas.height;
canvas.width = img.width;
canvas.height = img.height;
const canvasCtx = canvas.getContext('2d'); const canvasCtx = canvas.getContext('2d');
let src: any = img;
let width = img.width;
let height = img.height;
for (let i = 0; i < nbSteps; i++) { for (let i = 0; i < nbSteps; i++) {
width = width / 2; width = width / 2;
height = height / 2; height = height / 2;
canvasCtx?.drawImage(src, 0, 0, canvas.width / 2, canvas.height / 2); canvasCtx?.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
src = canvas;
console.log({
caller: 'resize',
width,
height,
targetHeight,
targetWidth,
i,
});
} }
const finalCanvas = document.createElement('canvas'); const finalCanvas = document.createElement('canvas');
@ -48,12 +33,29 @@ export const resize = (imageUrl: string, maxSize: number) => {
targetHeight targetHeight
); );
const imageUrl = finalCanvas.toDataURL('image/jpeg'); return finalCanvas;
canvas.remove(); };
finalCanvas.remove();
resolver(imageUrl); export const downsize = (imageUrl: string, maxSizes: number[]) => {
let resolver = (resizedImageUrl: any) => {};
const img = document.createElement('img');
img.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const canvasCtx = canvas.getContext('2d');
canvasCtx?.drawImage(img, 0, 0);
img.remove();
const canvases = maxSizes.map((maxSize: number) => {
canvas = downsizeCanvas(canvas, maxSize);
return canvas.toDataURL('image/jpeg');
});
resolver(canvases);
}; };
img.src = imageUrl; img.src = imageUrl;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
resolver = resolve; resolver = resolve;