You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

从URL获取JPG图片并转发给客户端时出现乱码问题求助

解决服务器端获取并转发JPG图片时的乱码问题

你遇到的乱码问题本质是因为rp(request-promise)默认会把响应内容解析成字符串,但图片是二进制数据,字符串编码转换会破坏原始的二进制字节,导致返回的内容无法被正确识别为图片。下面是具体的解决步骤:

核心修改点

  • rp的请求选项添加encoding: null,让它返回原始的二进制Buffer,而不是解析后的字符串
  • 服务器端响应时设置正确的Content-Type头,并直接发送这个Buffer

修改后的服务器端代码

let _uri = "https.....xxxxxxxxxxx.jpg";
let _headers = { 
  'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8', 
  'Accept-Encoding': '*', 
  'Accept-Language': 'en-US,en', 
  'Cache-Control': 'max-age=0', 
  'Connection': 'keep-alive', 
  'Referer': 'http://www.google.com/', 
  'Upgrade-Insecure-Requests': '1', 
  'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36' 
};
var options = { 
  uri: _uri, 
  headers: _headers,
  encoding: null // 关键:不解析成字符串,返回原始Buffer
};
rp(options)
 .then(parsedBody => {
  response.setHeader('Content-Type', 'image/jpeg'); // 明确设置图片响应类型
  return response.status(200).send(parsedBody); // 直接发送二进制Buffer
 })
 .catch(err => { 
  response.status(400).send(err);
 });

为什么之前的方法不行?

  • 你尝试的response.json(parsedBody)完全错误:图片是二进制格式,强行转成JSON会把二进制数据当成字符串处理,必然输出乱码
  • 哪怕注释掉的send(parsedBody)也无效:因为没有添加encoding: nullparsedBody已经是被字符串编码破坏后的内容,无法还原成正常图片

客户端代码说明

你的客户端fetch代码是完全正确的:

fetch('https://...my server')
 .then(res => res.blob())
 .then(blob => { console.log(blob); })

res.blob()会正确把服务器返回的二进制数据解析成Blob对象,之后你可以用它创建图片URL、保存到本地或者做其他处理。

内容的提问来源于stack exchange,提问作者paul seems

火山引擎 最新活动