javascript - 如何在客户端将下载的内联图像转换为 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));

您可以使用以下代码欺骗 JavaScript，使其认为图像来自您的域。

图像.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 例如。