dojo/request 使用 NodeJS 的 png 图像数组缓冲区,以及 return 图像到客户端
dojo/request a png image array buffer using NodeJS, and return the image to the client
我正在尝试使用 NodeJS 和 dojo/request 从 ArcGIS Server REST 提要请求 png 图像,然后 return 将图像发送给客户端。
我需要 nodeJS 将令牌作为查询参数添加到请求中,因为我的服务是安全的,我想通过节点而不是在资源服务器 (ArcGIS Server 10.3) 上控制它们的安全性。图片中没有 nodeJS,png 在浏览器中加载。这是调用 returning png 图像的(开放)示例,使用他们的标准 REST 提要:
https://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer/1/images/257104fa1b21d7b483c160ee8f3943bb
我正在使用 dojo/request 访问此资源。似乎 png 图像恢复正常,但是当我 res.send() 返回客户端时,我在 Fiddler 中得到了 'not an image'。我可以在 hexview 中看到 PNG header 以及 IHDR 和 IEND,但是很明显,编码(?或其他)与直接从 returned 资源时不同弧服务器。当客户端从节点 return 接收到 png 时,content-length 比直接从 ArcServer 接收到相同的 png 时要少一些。 (默认情况下,节点尝试使用 Transfer-Encoding: Chunked。我将 content-length 设置为响应的长度,因此它一次发送,我相信这是客户端期望的行为.)
ESRI(ArcGIS Server)有一个新的示例存根,它完全符合我的要求,但是他们使用 esri/request(建立在 dojo/request)客户端,并利用 Blob 库为客户创建正确的响应。 https://developers.arcgis.com/javascript/jssamples/data_requestArrayBuffer.html
我们可以看到他们使用 handleAs: "arrayBuffer",我已经在 dojo/request 上尝试过,它似乎对 returned png 的内容没有影响。当他们收到响应时,他们创建一个新的 Blob,然后使用 FileReader(我有一个节点端实现)将其作为数据 URL 读取,并直接将该结果用作 png。
我已经尝试 ad-nausuem 来复制它,但节点似乎没有可靠的 Blob 库(我已经尝试 "Blob" 但没有成功)并且我在节点中读到你是应该改用缓冲区。无论我将什么传递给 fileReader,我都会收到错误 "Cannot read as File"(我已经尝试了所有 fileReader 方法)。 fileReader 库:https://www.npmjs.com/package/filereader
ESRI 代码:
esriRequest(url, {handleAs: "arrayBuffer"}).then(function(response) {
reader.readAsDataURL(new Blob([response], {
type: "image/png"
}));
//reader.result is png ready to use client side
});
我的尝试:
//试过 handleAs: "arrayBuffer"
//尝试过 npm Blob 库
request(url, {handleAs: "arrayBuffer"}).then(function(response) {
var reader = new FileReader();
reader.addEventListener("loadend", function() {
res.setHeader('Content-Type', 'image/png');
res.setHeader('Content-Length', reader.result.length);
res.send(reader.result);
});
reader.readAsDataURL(new Blob([response], {
type: "image/png"
}));
});
我正在使用节点包 filereader 和 Blob,但没有成功创建 blob 以传递给 fileReader。如果 nodeJS 使用缓冲区而不是 Blob,假设服务 return 编辑的内容似乎是 ArrayBuffer png,我如何通过节点将其传回客户端?
我也曾尝试使用 ArrayBuffer 来缓冲方法(通过 Uint8Array),但是一旦我拥有缓冲区形式的 png,我就永远无法读取它。
简而言之,我只是想将 png 从源代理到客户端,添加一个令牌查询参数。
欢迎评论完善问题
交叉发布:
我想做类似的操作,但没有找到任何答案。经过反复试验,我似乎明白了。
在您的请求选项中添加选项 encoding: null
,这将从原始来源获取 base64 格式的图像。
request({
url: yoururl,
method: 'GET',
encoding: null
}, function (error, response, body) {
if (!error && response.statusCode === 200) {
res.send(response.statusCode, body);
} else {
res.send(response.statusCode, body.toString('utf8'));
}
});
然后在我的客户端中,我自己执行了一个 GET url,它为您提供了 base64 字符串。对于客户端上的图像,您可以将来源设置为 data:image/PNG;base64,{result}
var result = getBase64FromMyUrl();
var src = 'data:image/PNG;base64,' + result;
我正在尝试使用 NodeJS 和 dojo/request 从 ArcGIS Server REST 提要请求 png 图像,然后 return 将图像发送给客户端。
我需要 nodeJS 将令牌作为查询参数添加到请求中,因为我的服务是安全的,我想通过节点而不是在资源服务器 (ArcGIS Server 10.3) 上控制它们的安全性。图片中没有 nodeJS,png 在浏览器中加载。这是调用 returning png 图像的(开放)示例,使用他们的标准 REST 提要: https://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer/1/images/257104fa1b21d7b483c160ee8f3943bb
我正在使用 dojo/request 访问此资源。似乎 png 图像恢复正常,但是当我 res.send() 返回客户端时,我在 Fiddler 中得到了 'not an image'。我可以在 hexview 中看到 PNG header 以及 IHDR 和 IEND,但是很明显,编码(?或其他)与直接从 returned 资源时不同弧服务器。当客户端从节点 return 接收到 png 时,content-length 比直接从 ArcServer 接收到相同的 png 时要少一些。 (默认情况下,节点尝试使用 Transfer-Encoding: Chunked。我将 content-length 设置为响应的长度,因此它一次发送,我相信这是客户端期望的行为.)
ESRI(ArcGIS Server)有一个新的示例存根,它完全符合我的要求,但是他们使用 esri/request(建立在 dojo/request)客户端,并利用 Blob 库为客户创建正确的响应。 https://developers.arcgis.com/javascript/jssamples/data_requestArrayBuffer.html
我们可以看到他们使用 handleAs: "arrayBuffer",我已经在 dojo/request 上尝试过,它似乎对 returned png 的内容没有影响。当他们收到响应时,他们创建一个新的 Blob,然后使用 FileReader(我有一个节点端实现)将其作为数据 URL 读取,并直接将该结果用作 png。
我已经尝试 ad-nausuem 来复制它,但节点似乎没有可靠的 Blob 库(我已经尝试 "Blob" 但没有成功)并且我在节点中读到你是应该改用缓冲区。无论我将什么传递给 fileReader,我都会收到错误 "Cannot read as File"(我已经尝试了所有 fileReader 方法)。 fileReader 库:https://www.npmjs.com/package/filereader
ESRI 代码:
esriRequest(url, {handleAs: "arrayBuffer"}).then(function(response) {
reader.readAsDataURL(new Blob([response], {
type: "image/png"
}));
//reader.result is png ready to use client side
});
我的尝试:
//试过 handleAs: "arrayBuffer"
//尝试过 npm Blob 库
request(url, {handleAs: "arrayBuffer"}).then(function(response) {
var reader = new FileReader();
reader.addEventListener("loadend", function() {
res.setHeader('Content-Type', 'image/png');
res.setHeader('Content-Length', reader.result.length);
res.send(reader.result);
});
reader.readAsDataURL(new Blob([response], {
type: "image/png"
}));
});
我正在使用节点包 filereader 和 Blob,但没有成功创建 blob 以传递给 fileReader。如果 nodeJS 使用缓冲区而不是 Blob,假设服务 return 编辑的内容似乎是 ArrayBuffer png,我如何通过节点将其传回客户端?
我也曾尝试使用 ArrayBuffer 来缓冲方法(通过 Uint8Array),但是一旦我拥有缓冲区形式的 png,我就永远无法读取它。
简而言之,我只是想将 png 从源代理到客户端,添加一个令牌查询参数。
欢迎评论完善问题
交叉发布:
我想做类似的操作,但没有找到任何答案。经过反复试验,我似乎明白了。
在您的请求选项中添加选项 encoding: null
,这将从原始来源获取 base64 格式的图像。
request({
url: yoururl,
method: 'GET',
encoding: null
}, function (error, response, body) {
if (!error && response.statusCode === 200) {
res.send(response.statusCode, body);
} else {
res.send(response.statusCode, body.toString('utf8'));
}
});
然后在我的客户端中,我自己执行了一个 GET url,它为您提供了 base64 字符串。对于客户端上的图像,您可以将来源设置为 data:image/PNG;base64,{result}
var result = getBase64FromMyUrl();
var src = 'data:image/PNG;base64,' + result;