JavaScript를 사용하여 이미지의 Base64 데이터 URL을 어떻게 얻을 수 있습니까?

JavaScript를 사용하여 이미지 데이터 URL을 검색하는 방법

웹 개발에서는 웹 페이지의 이미지 콘텐츠에 액세스하는 것이 유용한 경우가 많습니다. 이는 JavaScript를 통해 달성할 수 있으므로 개발자는 이미지 데이터를 별도로 다운로드하지 않고도 조작하고 활용할 수 있습니다.

이러한 사용 사례 중 하나는 브라우저에서 이미 로드한 이미지의 base64 인코딩 표현을 얻는 것입니다. 이는 Mozilla Firefox에서 Greasemonkey 스크립트로 작업할 때 특히 유용합니다.

이미지 데이터 URL을 얻으려면 캔버스 요소가 사용됩니다. 사용할 수 있는 코드는 다음과 같습니다.

function getBase64Image(img) {
  // Create a canvas with dimensions matching the image
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  // Copy the image data onto the canvas
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  // Get the base64-encoded image
  const dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

그러나 이 방법은 페이지와 동일한 도메인의 이미지에만 작동한다는 점에 유의하는 것이 중요합니다. 또는 이미지 태그에 crossOrigin="anonymous" 속성을 지정하고 서버가 CORS를 지원하는지 확인할 수 있습니다.

이 방법은 원본 파일이 아닌 이미지의 다시 인코딩된 버전을 제공한다는 점을 기억하세요. 동일한 결과를 얻으려면 Kaiido의 답변과 같은 다른 방법을 사용해보십시오.

위 내용은 JavaScript를 사용하여 이미지의 Base64 데이터 URL을 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!