JavaScript에서 이미지 데이터 URL을 얻는 방법은 무엇입니까?

javascript를 사용하여 Html 페이지 태그에서 데이터 URI로 이미지를 변환하려면 먼저 캔버스 요소를 만들고 너비와 높이를 이미지와 동일하게 설정하고 그 위에 이미지를 그리고 마지막으로 해당 요소에서 toDataURL 메서드를 호출해야 합니다.

그러면 이미지의 base64 인코딩 데이터 URI가 반환됩니다. 예를 들어, id가 my-image인 이미지가 있는 경우 다음을 사용할 수 있습니다. -

예시

function getDataUrl(img) {
   // Create canvas
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   // Set width and height
   canvas.width = img.width;
   canvas.height = img.height;
   // Draw the image
   ctx.drawImage(img, 0, 0);
   return canvas.toDataURL('image/jpeg');
}
// Select the image
const img = document.querySelector('#my-image');
img.addEventListener('load', function (event) {
   const dataUrl = getDataUrl(event.currentTarget);
   console.log(dataUrl);
});

출력

이것은 출력을 줄 것입니다 -

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB