获取跨域内容的数据 URI？答案

【问题标题】：Getting a data URI for cross-domain content?获取跨域内容的数据 URI？
【发布时间】：2012-07-20 13:01:06
【问题描述】：

出于所有意图和目的，假设我有一个带有输入字段的网页，用户可以在其中输入图像 URL，单击按钮，并在其 URL 的另一端获得资源的数据 URI（例如，谷歌徽标）。

阅读后，我了解到您可以像这样获取图像的数据 URI：

function imageToDataURI(src,callback)
{
    var canvas = document.createElement('canvas'),
        img    = document.createElement('img');

    img.onload = 
        function()
        {
            canvas.width  = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0);
            callback(canvas.toDataURL());
        };
    img.src = src;
}

但是，很多人（包括我自己）都收到“SECURITY_ERR: DOM Exception 18”，因为在画布元素上绘制跨域图像时会受到污染，并且受污染的画布会在 canvas.toDataURL() 上返回上述错误（见Why does canvas.toDataURL() throw a security exception?)。我的问题是：我真的需要支持跨域网址！

我能做什么？

【问题讨论】：

标签： javascript node.js canvas cross-domain data-uri

【解决方案1】：

我读到了一堆获取跨域数据的可用选项here。几乎有 3 类解决方案：

在您的网页中造成巨大安全漏洞的那些
不需要但需要控制跨域服务器的那些
需要您将自己的服务器变成代理的那些

如果您负担不起 #1 的费用，不在 #2 中，并且有一个 node.js 服务器供您使用，那么这里有一个超级简单的即插即用 node.js 模块，可以完成 #3 .

/* return a datauri encoding of the resource at the given url */
exports.dataurize = 
    function(url,callback)
    {
        var request = 
            require('http').request(
                {'host':url.host || 'localhost', 
                 'port':url.port || 80, 
                 'path':url.path || '/'},
                function(resp)
                {
                    var data = '';
                    resp.setEncoding('binary');
                    resp.on('data', function(chunk) {data += chunk;});
                    resp.on('end',
                        function()
                        {
                            if( resp.statusCode == 200 )
                                callback(
                                    undefined,
                                    'data:'+resp.headers['content-type']+';base64,'+
                                       new Buffer(data,'binary').toString('base64'));
                            else
                                callback({'statusCode':resp.statusCode, 'reason':data});
                        });
                });
        request.on('error',
            function(err)
            {
                callback({'statusCode':0, 'reason':err});
            });

        request.end();
    };

将它集成到您的后端，您就可以免费使用#3。回到原来的问题，imageToDataURI() 现在用一个 url 查询你的 node.js 后端，你的后端用

的结果来响应

require('./dataurize').dataurize(...)

即，使用所需的 dataURI。

【讨论】：