mirrors/beerbrawl
1
0
Fork 0
mirror of https://codeberg.org/beerbrawl/beerbrawl.git synced 2024-11-11 19:47:33 +01:00
Code Wiki Activity

feat(#33): cropping to 4:3 Landscape Portrait respectively

Browse source
This commit is contained in:
Rafael Tanzer 2024-06-21 15:06:39 +02:00 committed by Rafael Tanzer
parent cebc71acdd
commit 5077cac435
2 changed files with 50 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/image-upload/image-upload.component.scss
View file

@ -2,7 +2,7 @@
max-width: 500px;
min-width: 400px;
min-height: 400px;
max-height: 500px;
max-height: 700px;
margin: 2em auto;
padding: 1em;

64
frontend/src/app/components/image-upload/image-upload.component.ts
View file

@ -27,14 +27,19 @@ export class ImageUploadComponent {
reader.onload = async (e: ProgressEvent<FileReader>) => {
const img = new Image();
img.onload = async () => {
const formattedImage = await this.formatImageTo4by3(img);
this.selectedImage = await this.blobToDataURL(formattedImage);
const formDataImage = new FormData().append(
'image',
formattedImage,
`t-${this.tournamentId}_${Date.now().toLocaleString()}_submission.jpg`,
);
//this.sharedMediaService.create(dto, formDataImage);
try {
const formattedImage = await this.formatImageTo4by3(img);
this.selectedImage = await this.blobToDataURL(formattedImage);
const formDataImage = new FormData().append(
'image',
formattedImage,
`t-${this.tournamentId}_${Date.now().toLocaleString()}_submission.jpg`,
);
//this.sharedMediaService.create(dto, formDataImage);
} catch (error) {
console.log(error);
this.errorMessage = 'Error while processing the image, try again please';
}
};
if (e.target && e.target.result) {
img.src = e.target.result as string;
@ -53,25 +58,54 @@ export class ImageUploadComponent {
if (ctx) {
const aspectRatio = 4 / 3;
let newWidth = image.width;
let newHeight = image.height;
const imageAspectRatio = image.width / image.height;
let newWidth, newHeight, offsetX, offsetY;
if (newWidth / newHeight > aspectRatio) {
newWidth = newHeight * aspectRatio;
if (imageAspectRatio > 1) {
// Landscape orientation
if (imageAspectRatio > aspectRatio) {
// Image is wider than the target aspect ratio
newHeight = image.height;
newWidth = image.height * aspectRatio;
offsetX = (image.width - newWidth) / 2;
offsetY = 0;
} else {
// Image is narrower than the target aspect ratio
newWidth = image.width;
newHeight = image.width / aspectRatio;
offsetX = 0;
offsetY = (image.height - newHeight) / 2;
}
} else {
newHeight = newWidth / aspectRatio;
// Portrait orientation
if (imageAspectRatio > 1 / aspectRatio) {
// Image is wider than the target aspect ratio for portrait
newHeight = image.height;
newWidth = image.height * (1 / aspectRatio);
offsetX = (image.width - newWidth) / 2;
offsetY = 0;
} else {
// Image is narrower than the target aspect ratio for portrait
newWidth = image.width;
newHeight = image.width * aspectRatio;
offsetX = 0;
offsetY = (image.height - newHeight) / 2;
}
}
// Manually checking if image is bigger than 10 MB not needed because of lossy JPG
// Only server should check
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(image, 0, 0, newWidth, newHeight);
ctx.drawImage(image, offsetX, offsetY, newWidth, newHeight, 0, 0, newWidth, newHeight);
canvas.toBlob(blob => {
if (blob) {
console.log(blob.size)
resolve(blob);
} else {
reject(new Error('Canvas is empty'));
reject(new Error('Error extracting cropped image'));
}
}, 'image/jpeg');
} else {