獲取跨域內容的數據URI？

Question

出於所有意圖和目的，假設我有一個帶有輸入字段的網頁，用戶可以在其中輸入圖像URL，單擊按鈕，並在其URL的另一端獲得資源的數據URI（例如Google徽標） ）。

仔細閱讀，我了解到您可以為圖像獲取數據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異常18”，因為在其上繪制跨域圖像並且受污染的畫布在canvas.toDataURL（）上返回上述錯誤時，畫布元素會受到污染（請參閱為什么這樣做）。 canvas.toDataURL（）拋出安全異常？ ）。 我的問題是：我真的需要支持跨域URL！

我能做什么？

Answer 1

我讀了一堆可用選項用於獲取跨域數據在這里 。 解決方案大致分為3類：

1. 那些在您的網頁上造成巨大安全漏洞的網站
2. 那些不需要但需要控制跨域服務器的服務器
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。