使用 XMLHttpRequest responsetext 中的图像数据来显示图像

Question

我正在使用 JavaScript 从 XMLHttpRequest 响应文本中获取图像并将图像 src 设置为它：

document.getElementById("img").src = "data:image/png;base64," +  xhr.responseText;

从 nodejs 脚本，图像发送如下：

var img = fs.readFileSync('image.png');
res.end(img, 'base64');

响应文本不是 base64 格式并且有奇怪的符号：

�PNG����IHDR����������，����2PLTE �������������������������@����Ai����

...

我找到了this 问题并尝试将其转换为base 64：

for (var responseText = xhr.responseText, responseTextLen = responseText.length, bin = "", i = 0; i < responseTextLen; ++i) {
    bin += String.fromCharCode(responseText.charCodeAt(i) & 255);
}
document.getElementById("img").src = "data:image/png;base64," + btoa(bin);

结果是：

img id="img" SRC =“数据：图像/ PNG; BASE64，/ VBORw0KGgoAAAANSUhEUgAAAv0AAAH9CAMAAAACDyz9AAABMlBMVEX9 / f0AAAD9 / f39AAAA / QAA / f39AP0A / f39QAD9 / QBBaf39 / SAA / UD9 / f0wYP39AABA / QD9 / F1 // SUqKv39AED9 / QAAABoaGjMzM01NTWZmZn9 / F / 39 / F39 / F39 / F39 / F39 / F39 / f0yMv0t / f39Vf39 / f39Qv39 / F39 / f39AAD9AABkAAD9fyL9Ii79VwAA / QAA / RkZcAAA / QAAR / 39AP39 / QD9AP39 / RT9 / X9Q / F39 / UUA / f1y / Xr9Pf1r /在f0L / f0g / SD9 / QD9 / QD9YFBQQFVrL / 0UAP0UFP1AFP1A / F1G / F1G / f39AP39QP39QP39YP39cP39 / F39 / F39 / Xf9 / F39 / F39 / F39 / Xz9QP39IP39 / F39 / V9fXx8fHz8 / P / 39 / F39 / VFqAAAMV0lEQVR4 / f39C1b9 / Rr9URhV / Qo6 / Qf9fxf9AR8I / SH9C / 39Dv39 / Tb9VyH9 / f1sAAAAAAAAAAD9N2j9 / f14a3j9 / Q5l /f39dv39/bD9S/1vdAxwzh/9fXRR/f39Af39/f39C/39dAz9O2z9DV79/W7T/W9//f0RIFFe/f39/RP9/f1qAv39MEz9a3L9/f39LDP9/TQLUhT9Vwf9/WIR/QZZ/RhP79/SD9/f39/Wn9/f39/Wn9 f1b/WYR/WVB/WX9/Vn9HxAgd/39/f1//Xf9/f12/f0t/f39/T/9dAJc/f0B/f1hMzT9/f39BB39Bng0/X59/W4EHf0yGf39Zv12/Vf9YXz9T39n/X79/f79TTPP39/f39/Qjc9/ /S8Z/f14/f0bXj79/XH9/Q/wP3z9/X79L/39Fn0SBf1O/f1tZ/0dczr9/Wr9/f0ebv39O/06N/39G/39/f39Ov1l/f1n/f0W/Rr9/XFld3Q4TX94Vf39Pv19P3N//Rz9/Qr P0qQCa2J/39Txb9Pxkfc/39/WJq/Xs8/SlAJv1YA379/f39/VlMH/1O/TH9/f39RRX9Ov1sA/0fV/39Bnz9/WIbcP18/f19/QE5aP39dS94OG79ff0FH/39/WIv/W/1/f1O/xvxf7f/9/f1O/xvxf7f/ F04 / f1UXNwNI0D9S / 1ECf0oARIlQP0ESP0A / RL9 / R79enH9bf06cf18QP0wP / 39 / W798ygC / Q79AX79 / QsBcv39U / 3E / f39cgJk / Uf9 / W / 9C / 0F / V / 9 / V95 / UgtAf3DU / 39Zv1n / F39 / StvGf39 / f37CHD9 / Uz9H / 39dmv9 / f39d / 39 / R8AV2mU / f39Bf39Of1Z / Tv9PwH9vCn9H / 39DwQ4 / T8B / RWP / R8V / f39L / 2A / XpkSv39 / WFOdkL9T0z9Cf0NBwf9 / F39 / F09 / F39 / QX9CP0oARIlQP0ESP0A / RIgUQJc / f0TUi9 + Gf39MP3Y / T9Oe / 39Uv0A / f39Gf0H / f0zc23M / Wz9AwI8 / fn9WGH9/SUm/f39/f0R/T79/f39/f0KBf39Zk/9P379/f39ZP39D/39/f39KlD9Of39/f39KyX9/f39/SsO/f16/QIMef39/T39/f1L/Xn9/W39/f1//f39/f9EGDFnSn57/f939/f0EGDFnSnDv39/fX39 / TBjSv0dHP04 / TB9 / F39 / F39 / F1F / WH9bf39Ev0UZkz93f39Xn39 / U39 / f1DbSH9 / F20 / F1P / f397gD9XgP9 / F03 / eJ0eP14YEr9 / F0 / Xv0yfv39 / f0t / W39 / Vv9y / 0lASZN / F1 // Qp5PxV3 / F1E / F39 / VpoeFb9ZAT9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9lHT9 / U4CqkK+Gf1KdnH9Iv1Z/f1CX i/9/f1MU1UVa/1XDv1aVRX9/f0leHf9aQFyW1kh/Xj9a/0LXv39/f19VP0a/Xj9bWv9/f16/f1H/W0DNv39/Tb9av39/R39/f0FXx9ufF0W/Q/9/Wj9b1JZ/TX9/f39Nf1r/W/V39/VNxNvH/FVMA f39Cf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUQIk / f1acf0WGv39 / S1kd379YAFyW20h / UsWLjY8 / VNaSP0vOjwrVFr9 / RUyVWUh / f1CBf39 / SZ9 / S06PGtUWP39DUsO / SoVFnJxDGb9enj9 / Vv9Kv11XFkBWgP9P / 0K / V8c / SKD / XX9K / 1vFh39dTIZ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQVXin9 / Xb9F / 1EZf39 / F39 / UxWVf1le / 3zVlX9 / WLzVlX9dP1 + / eX9Z / 39Cnn9ARn9ff0sNDz9 / Xv9 / f39BXj9Af39Zv0AA / 1ufk5 / DS / 9 / EUP / f0JMP39 / ez9 / f0AR0XC / F39 / SR9 / XsJfh79cQ39 / F08 / V / 9Df0Z / F1H / f39O / 39M / 39 / Qn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RAn9KAESJUD9BEj9AP0SIFECJEr9RP0V / F16 / TkBcltd / f0O / UOJ / SgBElUXYP39 / WH9 / Vn9/f0FN/1h/Xr9TFRb/Sv9M1FtIf39cAKlA/12cBAO/f39Ev1EVf39/ f1OCP1VFbQO / f0A / RH9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRIVGUhQ3cx / QD9 / f39fi9AJiosZP1e / SZAbv0r / YwmQG79K2T9Uv0A / F39 / XZ3bTQBTv0n / QDR / XL9 / f39BDj9AB / 9DVdHE / 1kAnxs / TdXPl39LX79P0f9 / f0m / XVYA / 39W / 17Jf1nI / 39 / QQ4 / QB // f39eAIkSv1ECf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUQIkSv1ECf0oARIlQP0ESP0A / RIgUWX9a239bf39Gv39 / SR9 / Q / 9 / f13Cw39Wv0WMv0PJ0BuKw79W3R4p / 0QL / 1MVVf9eP39fv39Wf39Qv19Zw39NP39NP0B / F39 / F39 / VH9 / WA1 / f0GZP39A / 39MG4DNgsN / VR9 / F1R / f39Z / 1MRiBK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBRAiRK / UQJ / SgBEiVA / QRI / QD9EiBR / RF9 / f39Df1aVRX9 / U39XRQoQG79Kv1w / F39 / Vr9Av1 // RZyMf0A / F39 / X39 /在f0L / f0sC / 0sYzxCVAY4XFz9 / XkW / VKW / Vn9eP0FKQxw / UX9 / XgvMP39LEhd / Vf9f0/9/fIg/TL9/SxIWf1X/f1s/UX9/W9y/SwIfP39/f1eDgAAAAD9/f39/Sz9Rm79/f0v/S8wcSn9/f39d/39ZDk2BQ9I/TP9/TN+/f19OwtX/f1+/X0Z/f39IzhZ/f039eH/9fpv1 S79f H / 9cmwKHv39Z / 3X / F39 / f39PP39 / VtzH / 0vFP03tXP9THz9fv39S / 1VT / 1ybCoe / F1N / Xj9a / 39JPtWPP1faP39Uf39KSYg / F39 / VT5 / F0H / f39Af39 / XT9If3yFP39Pv0OWwn9 / VH9 / QAV / S8wbTFmP / 01 / VH9VDwz / f39Tf17fP39D1H9 / V79Bv1 + GP0z / Wn9/U9YEP39/WL9T3+j/QH9eWb9/Sf9bgIe/f39/SJvX/0eXv39/f0//f39L3X9C0xS/Tj9Xv39B/39/R0j/f0GXCb9/VT9bv1m/f0Y/S/9/f39/WVrXin9/WP9S/39Hf39/ /QT9BT9m/f39/f39Yf39/f0F/VH9PDP9/Xh8/f0ZPy79E/0vWP0f/f0HX/1+/f39BXX9W/39/VQ8M1Vr/QUP/Wz9/U1D/f13/f0FCv39vW9h/RZT/TP9cv1x/Rk//f0HX/Tf9UKef0 /Rh9b2H9/VD9MzP9VP3GAv39AAAAAAAAAAAA/Sf9H0o3/f1y/VL9AAAAAAElFTkT9QmD9">

图像仍然没有显示。我做错了什么？

Answer 1

听起来您正在寻找buf.toString([encoding][, start][, end])。

考虑以下代码：

var fs = require('fs');
var base64_image = fs.readFileSync('image.png').toString('base64');

console.log(base64_image);

这将在控制台中以 base64 编码字符串的形式返回 image.png。

所以您可能想要删除 for () 循环并进行更改：

var img = fs.readFileSync('image.png');

到这里：

var img = fs.readFileSync('image.png').toString('base64');

希望对你有帮助！

Answer 2

按照 Dal 的建议，我在服务器端进行了 base64 编码：

var img = fs.readFileSync('plot.png', 'base64');
res.end(img);

我将'base64' 编码选项添加到readFileSync() 而不是res.end()，因此img 将作为字符串而不是here 所述的缓冲区发送。

在客户端，我使用了这个：

document.getElementById("img").src = "data:image/png;base64," + xhr.responseText;