如何在客户端将下载的嵌入式图像转换为Base64

Question

是否有任何技术可以转换已下载的图像–内联JPEG / GIF / etc。 网页中出现的图像–使用客户端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));

您可以使用以下代码诱使javascript认为图像来自您的域。

image.php

<?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？id = 1。