Question

我需要将来自网址的图片编码为base64。我最初尝试使用画布：

function convertImgToBase64(url, callback, outputFormat) {
    console.log('converting image to base 64');
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image;
    img.crossOrigin = 'Anonymous';
    console.log('have image context');
    img.onload = function() {
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        console.log('data url: ' + dataURL);
        callback.call(this, dataURL);
        // Clean up
        canvas = null;
    };
    img.src = url;
}

但img.onload永远不会被调用。这并不让我感到惊讶，因为我只在没有HTML页面的javascript中工作。我基本上需要从这个站点复制功能：

http://www.freeformatter.com/base64-encoder.html

我已尝试对网站进行逆向工程，但我还未能弄清楚他们如何将输入网址编码为base64。有什么建议？

Answer 1

画布不能保存（例如）jpg。 jpg是有损的。当您将其加载到画布中时，它会被解压缩＆＃39;。当您使用内置canvas方法输出dataURL时，它将首先将原始画布数据（每像素包含32位）重新压缩到（有损级别，具体取决于内部参数）您选择作为输出的格式，然后将该数据转换为base64。

我在这里想说的是，画布不会产生原始文件的真正base64编码;相反，它会产生canvas-content的base64编码（canvas＆＃39;支持的输出格式之一）。换句话说：你不是对原始二进制文件进行base64编码。

正在说和解释..还有更多..你可能会偶然发现浏览器中的跨网站安全问题（假设您希望能够提供任何 > URL）。

因此解决上述两个问题的解决方案（也被您引用的网站使用）是将URL（或输入的文本或文件已上传）传递到服务器获取的服务器image（data）和base64对它进行编码（实际的原始二进制文件）并将其传递回客户端（浏览器）（例如通过AJAX / JSON /等）。

但是，你也说你只是在没有HTML页面的情况下在javascript中工作＆＃34;。那有点模糊。在我上面的回答中，无论如何我假设了一个浏览器（作为主机）（否则你会提到node.js（或类似的东西）并且你得到关于document的错误消息）。但是，如果您确实使用了node，那么可能有一些东西可以从URL下载二进制内容（然后您可以通过base64的javascript实现（同样可能已经在node.js中提供））。

Answer 2

该网站最有可能使用服务器端技术（ASP，PHP等）下载图像并获得它的base64编码。您无法对在服务器端执行的操作进行反向工程。

如果您使用客户端技术（如JavaScript），您可能会遇到＆＃34;跨源资源共享＆＃34; -problems。

您提供的代码可以正常工作，您可以通过执行以下2个调用来查看。请注意，维基百科允许资源共享，而jshell.net（JSFiddle）没有 - 所以检查控制台日志以查看＆＃34;跨源资源共享＆＃34; -error消息。

// Works fine:
convertImgToBase64("http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png", function(data){alert(data)});

// Does not work due to "Cross-Origin Resource Sharing"
convertImgToBase64("http://jsfiddle.net/img/logo.png", function(data){alert(data)});

在没有画布的情况下将图像从URL编码到Base64

2 个答案: