[JavaScript] input:file을 이용하지 않고 canvas에 이미지 그려서 POST로 전송하기 (Drawing an image onto a canvas without using input:file and sending it via POST)

 

 

// 이미지 그리기
const cnvs = document.createElement('canvas');
// 가로 세로
const w = 200;
const h = 40;
// canvas 사이즈 지정
cnvs.width = w;
cnvs.height = h;
const ctx = cnvs.getContext('2d');
// 배경 하얗게
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fillRect(0,0, w,h);
// 글자는 빨갛게
ctx.fillStyle = 'rgb(255,0,0)';
ctx.font = '15px Verdana serif';
// 현재 일시를 적어보자
const currentDateTime = new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().replace('T', ' ').substring(0, 19);
ctx.fillText(`TEST ${currentDateTime}`, 13, 23);

// blob으로 만들어서 
cnvs.toBlob(async function(blob){
    // File로 만들고
    const file = new File([blob], 'test.png', {type:'image/png', lastModified:new Date().getTime()}, 'utf-8');
    
    // FormData에 추가
    const frmData = new FormData();
    // 대충 제목, 본문, 이미지로 구성되어 있다고 가정함
    frmData.append('subject', '제목');
    frmData.append('body', '본문');
    frmData.append('img', file);
    
    // 보내기
    const f = await fetch(URL, {
        method: 'POST',
        body: frmData
    });
});