[英]Getting a data URI for cross-domain content?
For all intents and purposes, let's say I have a webpage with an input field where users can enter an image URL, click a button, and be given a data URI for the resource at the other end of their URL (eg, the Google logo). 出于所有意图和目的,假设我有一个带有输入字段的网页,用户可以在其中输入图像URL,单击按钮,并在其URL的另一端获得资源的数据URI(例如Google徽标) )。
Reading around, I learned that you can get data URIs for images like so: 仔细阅读,我了解到您可以为图像获取数据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;
}
However, a lot of people (myself included) are getting "SECURITY_ERR: DOM Exception 18" because canvas elements get tainted when cross-domain images are drawn on them and tainted canvases return the above error on canvas.toDataURL() (see Why does canvas.toDataURL() throw a security exception? ). 但是,许多人(包括我本人)正在获得“ SECURITY_ERR:DOM异常18”,因为在其上绘制跨域图像并且受污染的画布在canvas.toDataURL()上返回上述错误时,画布元素会受到污染(请参阅为什么这样做)。 canvas.toDataURL()抛出安全异常? )。 My problem is: I really need to support cross-domain URLs!
我的问题是:我真的需要支持跨域URL!
What can I do? 我能做什么?
I read about a bunch of available options for getting cross-domain data here . 我读了一堆可用选项用于获取跨域数据在这里 。 There are pretty much 3 categories of solutions:
解决方案大致分为3类:
If you can't afford #1, are not in #2, and have a node.js server at your disposal, here's a super-simple, plug-and-play node.js module that'll do #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();
};
Integrate it into your backend and you're home free for #3. 将其集成到您的后端中,您就可以免费使用#3。 Circling back to the original problem, imageToDataURI() now queries your node.js backend with a url, and your backend responds with the result of
回到原始问题,imageToDataURI()现在使用URL查询您的node.js后端,并且您的后端以以下结果响应
require('./dataurize').dataurize(...)
ie, with the desired dataURI. 即,具有所需的dataURI。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.