canvas drawImage 저장 질문입니다. 채택완료

</p>

<p><script type="text/javascript">

var canvas = document.getElementById('signature-pad');</p>

<p>function resizeCanvas() {

 var ratio =  Math.max(window.devicePixelRatio || 1, 1);

 canvas.width = canvas.offsetWidth * ratio;

 canvas.height = canvas.offsetHeight * ratio;

 canvas.getContext("2d").scale(ratio, ratio);

}</p>

<p>window.onresize = resizeCanvas;

resizeCanvas();</p>

<p>document.getElementById('save-png').addEventListener('click', function () {

var data = signaturePad.toDataURL("image/png");</p>

<p>

document.getElementById('clear').addEventListener('drawimage', function () {    

var ctx = canvas.getContext('2d');

var backgroundImage = new Image();

 ctx = canvas.getContext("2d");

 backgroundImage.src= '<a href="https://t1.daumcdn.net/cfile/tistory/25679E435319402A2B';" target="_blank" rel="noopener noreferrer">https://t1.daumcdn.net/cfile/tistory/25679E435319402A2B';</a>

 ctx.drawImage(backgroundImage, 0, 0);</p>

<p>});</p>

<p>var imgData = atob(data.split(',')[1]);

var len = imgData.length;

var buf = new ArrayBuffer(len);

var view = new Uint8Array(buf);

var blob, i;</p>

<p>for(i = 0; i < len; i++){

    view[i] = imgData.charCodeAt(i) & 0xff;

}</p>

<p>blob = new Blob([view], {type: 'image/png'});

console.log(blob);</p>

<p>var url = URL.createObjectURL(blob);

var a = document.createElement('a');

a.style = "display:none";

a.href = url;

a.download = "review_comment.png";</p>

<p>document.body.appendChild(a);

a.click();</p>

<p>setTimeout(function(){

    document.body.removeChild(a);

    URL.revokeObjectURL(url); //메모리 해제

}, 100);

});</p>

<p></script></p>

<p>