>웹 프론트엔드 >JS 튜토리얼 >JavaScript에 이미 로드된 이미지에서 Base64로 인코딩된 이미지 데이터를 어떻게 얻을 수 있습니까?

JavaScript에 이미 로드된 이미지에서 Base64로 인코딩된 이미지 데이터를 어떻게 얻을 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-15 22:56:11625검색

How Can I Get Base64-Encoded Image Data from Already Loaded Images in JavaScript?

JavaScript에서 이미지 데이터 URL 추출

문제:

base64-를 어떻게 얻을 수 있나요? HTML 태그를 사용하여 브라우저에 이미 로드된 이미지의 인코딩된 콘텐츠 다시 다운로드하시겠습니까?

Greasemonkey 및 Firefox용 솔루션:

Greasemonkey 및 Firefox를 사용하여 완전히 로드된 이미지의 콘텐츠를 추출하려면 다음 단계를 수행하세요.

  1. 캔버스 만들기: 이미지와 일치하는 크기로 캔버스 요소를 생성합니다. size.
  2. 이미지 데이터 복사: drawImage 함수를 활용하여 이미지 데이터를 캔버스로 전송합니다.
  3. 데이터 URL 가져오기: toDataURL 사용 base64로 인코딩된 이미지 데이터를 검색하는 함수 canvas.
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

참고: 이 솔루션은 이미지 데이터가 페이지와 동일한 도메인에서 사용 가능하거나 서버 지원을 통해 crossOrigin="anonymous" 속성이 활성화되어 있다고 가정합니다. CORS. 또한 반환된 이미지가 다시 인코딩될 수 있습니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.