獲取跨域內容的數據URI？

對於所有的意圖和目的，假設我有一個帶有輸入字段的網頁，用戶可以在其中輸入圖像URL，單擊按鈕，並在URL的另一端爲資源提供數據URI（例如， Google徽標）。獲取跨域內容的數據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異常18」，因爲畫布元素得到在跨域圖像被繪製時受到污染，並且受污染的canvas會在canvas.toDataURL（）上返回上述錯誤（請參閱Why does canvas.toDataURL() throw a security exception?）。我的問題是：我真的需要支持跨網域的網址！

我該怎麼辦？

來源

2012-07-20 rmanna

我讀了一堆可用於獲取跨域數據的選項here。有相當多3類解決方案：

那些在自己的網頁建立巨大的安全漏洞
那些不但需要控制跨域服務器
那些需要你把你的自己的服務器進入代理

如果您不能負擔＃1，不在＃2，在您的處置有一個node.js的服務器，這裏是一個超級簡單的，插件和播放節點。 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（）現在查詢您的Node.js的後端有一個網址，你的後端與

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

即結果響應，與所需的dataURI。

來源

2012-07-20 04:17:34 rmanna

獲取跨域內容的數據URI？

回答

相關問題