获取跨域内容的数据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？

回答

相关问题