[JavaScript] 사용자 선택없이 canvas에 그린 이미지로 input:file 세팅하기 (Setting input:file with an image drawn on the canvas without user selection)

 

 

 

// html이 대략 이런 모양이라 가정하고
<form id="frm" method="POST" enctype="multipart/form-data" action="URL">
    <input type="file" id="upload" name="upload">
</form>



// canvas에 그린 이미지를 input:file에 세팅하고 form submit까지 하는 예제

// canvas에 그리기
const cnvs = top.document.createElement('canvas');
const w = 200;
const h = 40;
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(function(blob){
    // File에 세팅
    const file = new File([blob], 'mytest.png', {type:'image/png',lastModified:new Date().getTime()}, 'utf-8');
    // DataTransfer에 세팅
    const container = new DataTransfer();
    container.items.add(file);
    // input:file에 세팅
    document.querySelector('#upload').files = container.files;
    // form submit
    document.getElementById('frm').submit();
});