localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

js 수정

Browse Source
This commit is contained in:
ckx6954 2024-12-24 13:32:17 +09:00
parent bd71a1528c
commit 32fd6897f2
4 changed files with 103 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "front",
"version": "0.0.0",
"version": "0.0.1",
"private": true,
"type": "module",
"scripts": {

1
src/App.vue
View File

@ -6,7 +6,6 @@
</normal-layout>
</template>
<script setup>
import { onMounted } from 'vue';
import NormalLayout from './layouts/NormalLayout.vue';
</script>
<style>

61
src/common/convertImageToWebp.js
View File

@ -4,7 +4,6 @@
const webpFile = await convertImageToWebp(this.attach);
attach = webpFile[0];
*/
import heic2any from 'heic2any';
import { imageConverter } from 'upload-images-converter';
const calculateAspectRatioSize = (originWidth, originHeight, maxWidthOrHeight) => {
@ -73,57 +72,27 @@ const convertImageToWebp = async (imageFile) => {
return dataTransfer.files;
}
const fileExtension = imageFile.name.split('.').pop().toLowerCase();
try {
const { originWidth, originHeight } = await getImageSize(imageFile);
const maxWidthOrHeight = 1200;
if (fileExtension === 'heic') {
try {
const webpBlob = await heic2any({
blob: imageFile,
toType: 'image/webp',
quality: 0.8,
});
const { width, height } = calculateAspectRatioSize(originWidth, originHeight, maxWidthOrHeight);
const { originWidth, originHeight } = await getImageSize(webpBlob);
const maxWidthOrHeight = 1200;
const compressedBlob = await imageConverter({ files: [imageFile], width, height });
const { width, height } = calculateAspectRatioSize(originWidth, originHeight, maxWidthOrHeight);
const outputWebpFile = new File([compressedBlob[0]], `${Date.now().toString()}.webp`);
const compressedBlob = await imageConverter({ files: [webpBlob], width, height });
const dataTransfer = new DataTransfer();
dataTransfer.items.add(outputWebpFile);
const outputWebpFile = new File([compressedBlob[0]], `${Date.now().toString()}.webp`);
const dataTransfer = new DataTransfer();
dataTransfer.items.add(outputWebpFile);
return dataTransfer.files;
} catch (error) {
console.error('HEIC 변환 오류:', error);
throw error;
} finally {
// 로딩있으면 여기서 끝
}
} else {
try {
const { originWidth, originHeight } = await getImageSize(imageFile);
const maxWidthOrHeight = 1200;
const { width, height } = calculateAspectRatioSize(originWidth, originHeight, maxWidthOrHeight);
const compressedBlob = await imageConverter({ files: [imageFile], width, height });
const outputWebpFile = new File([compressedBlob[0]], `${Date.now().toString()}.webp`);
const dataTransfer = new DataTransfer();
dataTransfer.items.add(outputWebpFile);
return dataTransfer.files;
} catch (error) {
console.error('HEIC 변환 오류:', error);
throw error;
} finally {
// 로딩있으면 여기서 끝
}
return dataTransfer.files;
} catch (error) {
console.error('HEIC 변환 오류:', error);
throw error;
} finally {
//로딩이 있다면 여기서 끝내자
}
};
export { convertImageToWebp };

87
src/common/resizeImage.js Normal file
View File

@ -0,0 +1,87 @@
import heic2any from 'heic2any';
/*
const resizedDataURL = await resizeImage(selectedFile); < 이미지 리사이징
const resizedBlob = dataURLToBlob(resizedDataURL); < blob url
const resizedFile = new File([resizedBlob], selectedFile.name, { type: fileType }); < File로 변경
*/
const resizeImage = async (file, maxWidth = 800, maxHeight = 600) => {
if (file.type === 'image/heic') {
// HEIC 파일 처리
const convertedFile = await convertHEICToJPG(file);
return resizeImageFromFile(convertedFile, maxWidth, maxHeight);
} else {
// 일반 이미지 파일 처리
return resizeImageFromFile(file, maxWidth, maxHeight);
}
}
const convertHEICToJPG = (file) => {
return new Promise((resolve, reject) => {
heic2any({
blob: file,
toType: 'image/jpeg', // JPG로 변환
})
.then(convertedBlob => {
const convertedFile = new File([convertedBlob], file.name, { type: 'image/jpeg' });
resolve(convertedFile);
})
.catch(error => {
reject(new Error('HEIC 변환 실패: ' + error.message));
});
});
}
const dataURLToBlob = (dataURL) => {
const byteString = atob(dataURL.split(',')[1]);
const mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];
const arrayBuffer = new ArrayBuffer(byteString.length);
const uintArray = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
uintArray[i] = byteString.charCodeAt(i);
}
return new Blob([arrayBuffer], { type: mimeString });
}
const resizeImageFromFile = (file, maxWidth, maxHeight) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = e => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let width = img.width;
let height = img.height;
const aspectRatio = width / height;
if (width > height) {
width = Math.min(maxWidth, width);
height = width / aspectRatio;
} else {
height = Math.min(maxHeight, height);
width = height * aspectRatio;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
// Base64 데이터 반환
resolve(canvas.toDataURL('image/jpeg'));
};
img.onerror = () => reject(new Error('이미지 로드 실패'));
img.src = e.target.result;
};
reader.onerror = () => reject(new Error('파일 읽기 실패'));
reader.readAsDataURL(file);
});
}
export { resizeImage , dataURLToBlob};