zuma/Tapage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

Add possibility to send picture through the app for certains questions

Browse source
This commit is contained in:
Lucien Astié 2024-08-09 23:20:04 +02:00
parent cbd500e13b
commit 28e1a0c4f8
5 changed files with 171 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/page.tsx
View file

@ -5,6 +5,7 @@ import { useState, useEffect, useRef } from 'react'
import { IconPencilMinus, IconCamera, IconDice6 } from "@tabler/icons-react"
import { defaultAvatarImage } from './avatarImage'
import { getUsername } from './usernameGenerate'
import { resizeBase64Image, getBase64OfImage } from './utils'
import Webcam from 'react-webcam'
export default function Home() {
@ -40,41 +41,6 @@ export default function Home() {
setShowWebcam(false)
}
function getBase64OfImage(file, cb) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
cb(reader.result)
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
function resizeBase64Image(base64Image) {
return new Promise((resolve, reject) => {
const maxSizeInKB = 500;
const maxSizeInBytes = maxSizeInKB * 1024;
const img = new Image();
img.src = base64Image;
img.onload = function () {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
const width = img.width;
const height = img.height;
const aspectRatio = width / height;
const newWidth = Math.sqrt(maxSizeInBytes * aspectRatio);
const newHeight = Math.sqrt(maxSizeInBytes / aspectRatio);
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
let quality = 0.8;
let dataURL = canvas.toDataURL('image/jpeg', quality);
resolve(dataURL);
};
});
}
useEffect(() => {
let localName = localStorage.getItem("name")
let localAvatar = localStorage.getItem("avatar")