이미지를 다시 다운로드하지 않고 JavaScript로 이미지의 데이터 URL을 얻으려면 어떻게 해야 합니까?

JavaScript에서 이미지 데이터 URL 가져오기

이 질문은 이미 로드된 이미지의 데이터 URL을 검색하는 방법을 찾습니다. JavaScript를 사용하는 웹 페이지, 특히 Firefox의 Greasemonkey 스크립트에 사용됩니다. 목표는 이미지를 다시 다운로드하는 오버헤드 없이 base64로 인코딩된 이미지 콘텐츠를 얻는 것입니다.

해결책:

1. 캔버스 만들기 요소: 만들려는 이미지와 크기가 일치하는 빈 캔버스 요소를 만듭니다. 인코딩됩니다.
2. 이미지 데이터 복사: "drawImage" 기능을 사용하여 이미지 데이터를 캔버스 요소에 복사합니다. 이 단계에서는 이미지가 이미 완전히 로드되었다고 가정합니다.
3. 데이터 URL 획득: "toDataURL" 기능을 사용하여 원하는 형식의 데이터 URL을 검색합니다. PNG 또는 JPEG. 제공된 솔루션은 RegExp를 사용하여 데이터 URL에서 base64로 인코딩된 콘텐츠만 추출합니다.

참고:

a. 이 방법은 이미지가 웹페이지와 동일한 도메인에 호스팅된 경우에만 작동합니다.
b. 결과 이미지는 원본 파일의 정확한 복제본이 아닌 다시 인코딩된 버전입니다.
c. 제공된 JavaScript 코드는 Greasemonkey 환경을 가정합니다.

위 내용은 이미지를 다시 다운로드하지 않고 JavaScript로 이미지의 데이터 URL을 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!