[英]Getting a data URI for cross-domain content?
出于所有意图和目的,假设我有一个带有输入字段的网页,用户可以在其中输入图像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!
我能做什么?
我读了一堆可用选项用于获取跨域数据在这里 。 解决方案大致分为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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.