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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!