zenn
dbf02241e2
Express/SQLite API와 Docker 구성을 추가하고 로그인·덱 저장·공개 덱·관리자·프로필 화면을 구현했다. 결과 화면 저장 UX, 헤더 프로필, 애드센스용 app-shell 레이아웃(1280px) 및 문서를 반영했다. Co-authored-by: Cursor <cursoragent@cursor.com>
36 lines
1.4 KiB
JavaScript
36 lines
1.4 KiB
JavaScript
/**
|
|
* 이미지 파일을 PNG data URL로 리사이즈
|
|
* @param {File} file
|
|
* @param {number} [maxSize=320]
|
|
* @returns {Promise<string>}
|
|
*/
|
|
function resizeImageToPng(file, maxSize = 320) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onerror = () => reject(new Error('이미지를 읽을 수 없습니다.'));
|
|
reader.onload = () => {
|
|
const img = new Image();
|
|
img.onerror = () => reject(new Error('이미지 형식이 올바르지 않습니다.'));
|
|
img.onload = () => {
|
|
const scale = Math.min(maxSize / img.width, maxSize / img.height, 1);
|
|
const width = Math.max(1, Math.round(img.width * scale));
|
|
const height = Math.max(1, Math.round(img.height * scale));
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) {
|
|
reject(new Error('이미지 처리에 실패했습니다.'));
|
|
return;
|
|
}
|
|
ctx.drawImage(img, 0, 0, width, height);
|
|
resolve(canvas.toDataURL('image/png'));
|
|
};
|
|
img.src = reader.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
window.UaImageUtils = { resizeImageToPng };
|