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中并且有奇怪的符号：

PNGIHDR，2PLTE   @Ai

...

我发现了this个问题，并试图将其转换为基数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 =＆＃34; img＆＃34; SRC =＆＃34;数据：图像/ 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 / RHP / SD9 / f1Y / X5xKi79 / F39 / WN9 / Vn9 / F1B / WYR / WVB / WX9 / Vn9HxAgd / 39 / F1 // Xf9 / F12 / f0t / F39 / T / 9dAJc / F0B / f1hMzT9 / f39BB39Bng0 / X59 / W4EHf0yGf39Zv12 / Vf9YXz9T39n / X79 / f79PP39 / F39 / Qj9 / TT9 / W2C / S8Z / F14 / f0bXj79 / XH9 / Q / wP3z9 / X79L / 39Fn0SBf1O / f1tZ / 0dczr9 / WR9 / f0ebv39O / 06N / 39G / 39 / f39Ov1l / F1N / f0W / Rr9 / XFld3Q4TX94Vf39Pv19P3N // Rz9 / Qr9f Q14PP0qQCa2J / 39Txb9Pxkfc / 39 / WJq / XS8 / SlAJv1YA379 / F39 / VlMH / 1O / TH9 / f39RRX9Ov1sA / 0fV / 39Bnz9 / WIbcP18 / F19 / QE5aP39dS94OG79ff0FH / 39 / WIV / W / 9 / F1O / QB5 / F1X / f1Dff1x / X79af1v / 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 / f0EGDFnSn57 / f39HVf9U4D9Dv39X / 1OSCf9 / 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 / f1CXi / 9 / f1MU1UVa / 1XDv1aVRX9 / f0leHf9aQFyW1kh / Xj9a / 0LXv39 / f19VP0a / Xj9bWv9 / F16 / F1H / W0DNv39 / Tb9av39 / R39 / f0FXx9ufF0W / Q / 9 / Wj9b1JZ / TX9 / f39Nf1r / W39 / VMhAv39fv02 / VNX / F39 / f0z / 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 / f39Ev1EV F39 / 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 /图/ TL9 / SxIWf1X / F1S / UX9 / W9y / SwIfP39 / f1eDgAAAAD9 / F39 / Sz9Rm79 / f0v / S8wcSn9 / f39d / 39ZDk2BQ9I / TP9 / TN + / f19OwtX / F1 + / X0Z / f39IzhZ / f39eH / 9fv1p / f0w / S79fH / 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 / XH9 / VH9 / QT9BT9m / F39 / f39Yf39 / f0F / VH9PDP9 / Xh8 / f0ZPy79E / 0vWP0f / f0HX / 1 + / f39BXX9W / 39 / VQ8M1Vr / QUP / Wz9 / U1D / F13 / f0FCv39vW9h / RZT / TP9cv1x / RK // F0H / Tf9eP0pGGj9Nnf9 / QUK / Rh9b2H9 / VD9MzP9VP3GAv39AAAAAAAAAAAA / Sf9H0o3 / f1y / VL9AAAAAElFTkT9QmD9＆＃34;＆GT;

图片仍然无法显示。我做错了什么？

Answer 1

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

请考虑以下代码：

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

console.log(base64_image);

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

因此，您可能希望删除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;

使用XMLHttpRequest响应文本中的图像数据显示图像

2 个答案: