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

是否有任何技术来转换已经下载的图像 - 内联JPEG/GIF /等。发生在网页中的图像 - 使用客户端JavaScript转换为Base64数据？如何将下载的内嵌图像转换为客户端的Base64

我不是在谈论如何使用其他方式（服务器端，在线工具等）将图像转换为Base64。

这些是我的特殊情况下使用的限制：

的影像出现在屏幕现在，就在网页，在人面前。它已经在数据意义上被下载。
原始图像数据的转换必须在客户端进行。
有问题的图像来自任意域。也就是说，他们可能也可能不会，属于同一起源领域。
如果需要（如果对解决方案有帮助），用户可以提供其他权限（例如，FF工具栏安装以帮助避免跨域和其他问题）。也就是说，如果有助于解决问题，代码可以在客户端得到特别的认可。

最终目标是将页面上的所有图像（在DOM中）转换为JavaScript内部的Base64数据。换句话说，用户可以在页面上看到的每个图像都被转换为某种包含Base64数据的JavaScript变量。

到目前为止，我看不到留在所有上述限制内的帖子。

来源

2013-07-31 user2639068

http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript –

我认为这与您正在寻找的接近，但唯一的问题是，它只适用于本地托管的图像和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。

来源

2013-07-31 17:44:06

洛根，我看到很多这样的帖子，但它是不可谈判的图像可以从任何地方供应。任何域名。我想知道javascript是否可以将从其他域提供的所有图像进行“复制”，然后在副本上进行编码。那么也许副本可以被认为是一个非跨域项目（从JS安全角度来看）？思考？ – user2639068

我提供了可能解决安全问题的代码。不确定你使用的是什么服务器，但这是我知道的唯一方法。 –

是的，我想到了'代理'方法。我想我需要看看Firefox浏览器插件环境中提供的功能。到目前为止，我认为onyl的方式是让用户安装特殊插件，然后该插件可以捕获所有页面下载的数据。或者，可以在某处解决跨域问题，因为它是经过批准的（用户同意安装）插件。这里的总体目标是捕捉*完全*用户在屏幕上看到的内容。要做到这一点，新的请求（图像等）会破坏这一目标。 – user2639068

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

回答

相关问题