클라이언트 측 Base64로 다운로드 한 인라인 이미지를 변환하는 방법

Question

인라인 JPEG/GIF/등 - 이미 다운로드 한 이미지를 변환 할 수있는 방법이 있습니까? 웹 페이지에서 발생하는 이미지 - 클라이언트 측 JavaScript를 사용하여 Base64 데이터로 변환합니까?

다른 방법 (서버 측, 온라인 도구 등)을 사용하여 이미지를 Base64로 변환하는 방법에 대해 이야기하는 것이 아닙니다.

• 이미지는 사람의 앞에, 오른쪽 페이지, 현재 화면에 :

  이

  내 특정 유스 케이스의 제약이다. 이미 데이터 감각으로 다운로드되었습니다.
• 원시 이미지 데이터에서의 변환은 클라이언트 측에서 수행되어야합니다.
• 해당 이미지는 임의의 도메인에서 가져온 것입니다. 즉, 그들은 동일한 원산지 도메인 일 수도 있고 그렇지 않을 수도 있습니다.
• 사용자가 솔루션에 도움이되는 경우 필요에 따라 추가 사용 권한을 부여 할 수 있습니다 (예 : 도메인 간 및 기타 문제점을 해결할 수있는 FF 도구 모음 설치). 즉, 코드가 문제를 해결하는 데 도움이된다면 클라이언트 측에서 특별한 보증을 할 수 있습니다.

최종 목표는 페이지의 모든 이미지 (DOM에서)를 JavaScript 내부의 Base64 데이터로 변환하는 것입니다. 즉, 사용자가 페이지에서 볼 수있는 모든 이미지가 Base64 데이터가 포함 된 일종의 JavaScript 변수로 변환되었습니다.

지금까지 위의 모든 제약 조건에 머무르는 게시물은 없습니다.

Answer 1

나는 이것이 당신이 찾고있는 것에 가깝다고 생각하지만 유일한 문제는 로컬 호스팅 된 이미지와 HTML5에만 해당된다는 것입니다.

function toURL(image) { 
    var canvas = document.createElement("canvas"); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    var context = canvas.getContext("2d"); 
    context.drawImage(image, 0, 0); 
    var s = canvas.toDataURL(); 
    return s.substring(s.indexOf(",")); 
} 

var test = document.getElementById("myImage"); 

console.log(toURL(test)); 

자바 스크립트를 속여서 다음 코드로 이미지를 도메인의 것으로 생각할 수 있습니다.

<?php 
    $image = getAnImagePathAndTypeFromTheDatabaseByID($_GET["id"]); 
    //returns something like 
    //array("path" => "http://www.anotherwebsite.com/image.png", "type" => "png") 
    header("Content-type: image/$image[type]"); 
    echo file_get_contents($image["path"]); 
?> 

는 그런 다음 image.php로 이동 image.php? 예를 들면 ID = 1.