데이터 URL에서 HTML5 캔버스로 이미지 그리기

데이터 URL이 있는 경우 캔버스에 이미지를 만들 수 있습니다. 이것은 다음 코드 스니펫에 표시된 대로 수행할 수 있습니다. -

var myImg = new Image;
myImg.src = strDataURI;

drawImage() 메서드는 이미지, 캔버스 또는 비디오를 캔버스에 그립니다. drawImage() 메서드는 이미지의 일부를 그리거나 이미지 크기를 늘리거나 줄일 수도 있습니다.

아래에 제공된 코드는 시퀀스에도 적합합니다. 이미지를 생성하고 새 이미지를 사용하도록 onload를 설정한 다음 src −

// load image from data url
Var Obj = new Image();
Obj.onload = function() {
   context.drawImage(myImg, 0, 0);
};
Obj.src = dataURL;