blocks|key|1232897|text|您已经说过要使用axios.get从服务器获取映像。您可能会得到一个Buffer、ArrayBuffer或Blob等等，但这取决于您如何处理从axios获得的响应。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1232898|我不使用axios+(从来不觉得有必要)，但是您可以通过fetch从服务器获得二进制数据的data+URI|1232899|//+1.
const+response+=+await+fetch("/path/to/resource");
//+2.
if+(!response.ok)+{
++++throw+new+Error("HTTP+error+"+%2B+response.status);
}
//+3.
const+buffer+=+await+response.arrayBuffer();
//+4.
const+byteArray+=+new+Uint8Array(buffer);
//+5.
const+charArray+=+Array.from(byteArray,+byte+=>+String.fromCharCode(byte));
//+6.
const+binaryString+=+charArray.join("");
//+7.
const+theImage+=+btoa(binaryString);|code-block|syntax|javascript|1232900|或者更简单地说：|1232901|const+response+=+await+fetch("/path/to/resource");
if+(!response.ok)+{
++++throw+new+Error("HTTP+error+"+%2B+response.status);
}
const+buffer+=+await+response.arrayBuffer();
const+binaryString+=+Array.from(new+Uint8Array(buffer),+byte+=>+String.fromCharCode(byte)).join("");
const+theImage+=+btoa(binaryString);|1232902|以下是它的工作原理：|1232903|我们要求提供图像数据。|ordered-list-item|1232904|我们检查请求是否有效(fetch只拒绝它对网络错误的承诺，而不是HTTP错误；这些错误是通过status和ok道具报告的)。|1232905|我们将响应体读入ArrayBuffer；缓冲区将具有二进制图像数据。|1232906|我们希望将缓冲区数据转换为https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary。为此，我们需要单独访问字节，因此我们创建了一个Uint8Array+(使用该缓冲区)来访问它们。|1232907|要将该字节数组转换为二进制字符串，我们需要将每个字节转换为它的等效字符，并将它们连接到一个字符串中。让我们通过使用Array.from及其映射函数(对每个字节调用)来实现这一点，我们将使用String.fromCharCode将字节转换为字符。(这并不是真正意义上的转换。例如，字节25成为字符串中字符代码25的字符。)|1232908|现在，我们通过将数组中的字符连接到一个字符串中来创建二进制字符串。|1232909|最后，我们将该字符串转换为Base64。|1232910|看一下这些文档，看起来axios让您可以提供选项responseType:+"arraybuffer"来获取数组缓冲区。如果我读得对，你可以像这样使用axios：|1232911|const+response+=+await+axios.get("/path/to/resource",+{responseType:+"arraybuffer"});
const+binaryString+=+Array.from(new+Uint8Array(response.body),+v+=>+String.fromCharCode(v)).join("");
const+theImage+=+btoa(binaryString);|1232912|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer|1|https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary|2|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array|3|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode^0|8|9|Y|6|15|B|1H|4|1Z|5|0|4|5|S|5|19|4|0|0|0|0|0|0|B|5|1A|6|1H|2|0|8|B|8|B|0|0|2U|A|D|1T|1|2U|A|2|0|1L|A|2M|J|2M|J|3|0|0|0|B|5|O|R|23|5|0|0^^$0|@$1|2|3|4|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|20|8|@$9|21|A|22|B|C]|$9|23|A|24|B|C]|$9|25|A|26|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|27|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|28|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|29|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|2A|8|@]|D|@]|E|$]]|$1|S|3|T|5|U|7|2B|8|@]|D|@]|E|$]]|$1|V|3|W|5|U|7|2C|8|@$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|U|7|2J|8|@$9|2K|A|2L|B|C]]|D|@$9|2M|A|2N|1|2O]]|E|$]]|$1|Z|3|10|5|U|7|2P|8|@$9|2Q|A|2R|B|C]]|D|@$9|2S|A|2T|1|2U]|$9|2V|A|2W|1|2X]]|E|$]]|$1|11|3|12|5|U|7|2Y|8|@$9|2Z|A|30|B|C]|$9|31|A|32|B|C]]|D|@$9|33|A|34|1|35]]|E|$]]|$1|13|3|14|5|U|7|36|8|@]|D|@]|E|$]]|$1|15|3|16|5|U|7|37|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|38|8|@$9|39|A|3A|B|C]|$9|3B|A|3C|B|C]|$9|3D|A|3E|B|C]]|D|@]|E|$]]|$1|19|3|1A|5|J|7|3F|8|@]|D|@]|E|$K|L]]|$1|1B|3|-4|5|6|7|3G|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I]]|1J|$5|1E|1F|1G|E|$1H|1K]]|1L|$5|1E|1F|1G|E|$1H|1M]]|1N|$5|1E|1F|1G|E|$1H|1O]]]]

You've said you're using <code>axios.get</code> to get the image from the server. What you'll presumably get back will be a <code>Buffer</code> or <code>ArrayBuffer</code> or <code>Blob</code>, etc., but it depends on what you do with the response you get from <code>axios</code>.
I don't use <code>axios</code> (never felt the need to), but you can readily get a <code>data</code> URI for binary data from the server via <code>fetch</code>:
<pre><code>// 1.
const response = await fetch(&quot;/path/to/resource&quot;);
// 2.
if (!response.ok) {
 throw new Error(&quot;HTTP error &quot; + response.status);
}
// 3.
const buffer = await response.arrayBuffer();
// 4.
const byteArray = new Uint8Array(buffer);
// 5.
const charArray = Array.from(byteArray, byte =&gt; String.fromCharCode(byte));
// 6.
const binaryString = charArray.join(&quot;&quot;);
// 7.
const theImage = btoa(binaryString);
</code></pre>
Or more concisely:
<pre><code>const response = await fetch(&quot;/path/to/resource&quot;);
if (!response.ok) {
 throw new Error(&quot;HTTP error &quot; + response.status);
}
const buffer = await response.arrayBuffer();
const binaryString = Array.from(new Uint8Array(buffer), byte =&gt; String.fromCharCode(byte)).join(&quot;&quot;);
const theImage = btoa(binaryString);
</code></pre>
Here's how that works:
<ol>
<li>We request the image data.</li>
<li>We check that the request worked (<code>fetch</code> only rejects its promise on network errors, not HTTP errors; those are reported via the <code>status</code> and <code>ok</code> props.</li>
<li>We read the body of the response into an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" rel="nofollow noreferrer"><code>ArrayBuffer</code></a>; the buffer will have the binary image data.</li>
<li>We want to convert that buffer data into a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary" rel="nofollow noreferrer">binary string</a>. To do that, we need to access the bytes individually, so we create a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array" rel="nofollow noreferrer"><code>Uint8Array</code></a> (using that buffer) to access them.</li>
<li>To convert that byte array into a binary string, we need to convert each byte into its equivalent character, and join those together into a string. Let's do that by using <code>Array.from</code> and in its mapping function (called for each byte), we'll use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode" rel="nofollow noreferrer"><code>String.fromCharCode</code></a> to convert the byte to a character. (It's not really much of a conversion. The byte 25 [for instance] becomes the character with character code 25 in the string.)</li>
<li>Now we create the binary string by joining the characters in that array together into one string.</li>
<li>Finally, we convert that string to Base64.</li>
</ol>
<hr />
Looking at the docs, it looks like <code>axios</code> lets you provide the option <code>responseType: &quot;arraybuffer&quot;</code> to get an array buffer. If I'm reading right, you could use <code>axios</code> like this:
<pre><code>const response = await axios.get(&quot;/path/to/resource&quot;, {responseType: &quot;arraybuffer&quot;});
const binaryString = Array.from(new Uint8Array(response.body), v =&gt; String.fromCharCode(v)).join(&quot;&quot;);
const theImage = btoa(binaryString);
</code></pre>

blocks|key|1232935|text|将您的图像从其中获取为水滴和生成一个。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1232936|数据://URL是完全没有效率的，比blob://+URL需要更多的内存空间。数据://+URL比它所表示的实际数据占用34%25的空间，并且它必须存储在DOM+%2B解码后的二进制文件中，然后由图像解码器读取。另一方面，blob://+URI只是一个指向内存中二进制数据的指针。|1232937|blob://+URL并不完美，但是在浏览器正确实现srcDoc之前，它仍然是我们所拥有的最好的。|style|CODE|1232938|因此，如果按照在浏览器中使用axios的注释，您可以这样做|1232939|const+blob+=+await+axios.get("/path/to/resource",+{responseType:+"blob"});
const+theImage+=+URL.createObjectURL(blob);|code-block|syntax|javascript|1232940|如果您想使用fetch+API|1232941|const+response+=+await+fetch("/path/to/resource");
if+(!response.ok)+{
++++throw+new+Error("HTTP+error+"+%2B+response.status);
}
const+blob+=+await+response.blob();
const+theImage+=+URL.createObjectURL(blob);|1232942|Ps：|1232943|如果您没有任何特殊的理由通过AJAX+(例如凭据或特殊的POST+params)获取此映像，那么直接将资源的src传递为图像的：|1232944|<img+src="/path/to/resource"+/>|1232945|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Blob/|1|https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL^0|B|2|0|E|4|1|0|0|Q|6|0|0|0|0|0|0|1I|3|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]|$A|1E|B|1F|1|1G]]|C|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1I|8|@$A|1J|B|1K|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1L|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1M|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@]|C|$]]|$1|S|3|T|5|N|7|1O|8|@]|9|@]|C|$O|P]]|$1|U|3|V|5|6|7|1P|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1Q|8|@$A|1R|B|1S|H|I]]|9|@]|C|$]]|$1|Y|3|Z|5|N|7|1T|8|@]|9|@]|C|$O|P]]|$1|10|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]|18|$5|13|14|15|C|$16|19]]]]

Fetch your image as a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob/" rel="nofollow noreferrer">Blob</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL" rel="nofollow noreferrer">generate a blob:// URI</a> from it.
data:// URLs are completely inefficient and require far more memory space than blob:// URLs. The data:// URL takes 34% more space than the actual data it represents and it must be stored in the DOM + decoded as binary again to be read by the image decoder. The blob:// URI on the other hand is just a pointer to the binary data in memory.
blob:// URLs are not perfect, but until browsers implement <code>srcDoc</code> correctly, it's still the best we have.
So if as per the comments you are using axios in a browser, you can do
<pre><code>const blob = await axios.get(&quot;/path/to/resource&quot;, {responseType: &quot;blob&quot;});
const theImage = URL.createObjectURL(blob);
</code></pre>
And if you want to use the fetch API
<pre><code>const response = await fetch(&quot;/path/to/resource&quot;);
if (!response.ok) {
 throw new Error(&quot;HTTP error &quot; + response.status);
}
const blob = await response.blob();
const theImage = URL.createObjectURL(blob);
</code></pre>
<hr />
Ps: 
If you don't have any particular reason to fetch this image through AJAX (e.g credentials or special POST params), then pass directly the URL of the resource as the <code>src</code> of your image:
<pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;/path/to/resource&quot; /&gt;
</code></pre>

I am new to React and want to display an image downloaded as binary data. I download the image data from api call to adobe lightroom api. The api call works since the image is displayed in Postman without problems. I can also save the image data to a jpeg-file and it is displayed ok.
In React I want to do <code>&lt;img src={`data:image/jpeg;base64,${theImage}`} /&gt;</code> and for that to work I need to convert the binary data to a base64 encoded string. When i convert the downloaded jpeg using <code>cat image.jpeg|base64 &gt; base64.txt</code> the resulting string works in my React app.
But when I try <code>var theImage = btoa(binarydata)</code> in React I get <code>Unhandled Rejection (InvalidCharacterError): Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.</code>
After searching the issue I try use <code>var theImage = btoa(unescape(encodeURIComponent( binarydata )))</code> and similar proposed solution but resulting strings from those does not turn out to be a valid base64 encodings of the jpeg as it seem (I try the result from the conversions in online base64-&gt;image services and no image is shown). I have also tried other proposed solution such as base64-js and js-base64 libraries and non of those create a valid base64 valid image that can be shown in my React code.
How do you convert jpeg binary data to valid Base64 image encoding when <code>btoa</code> throws latin1 exception?

Convert binary data to base64 does not work with btoa unescape

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我是新的反应，并希望显示一个图像下载为二进制数据。我将图像数据从api调用下载到。api调用工作，因为图像显示在邮递员中，没有问题。我还可以将图像数据保存到jpeg文件中，并显示为ok。在React中，我想做<img src={`data:image/jpeg;base64,${theImage}`} />，为此，我需...

问将二进制数据转换为base64不适用于btoa反转义。
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将二进制数据转换为base64不适用于btoa反转义。EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将二进制数据转换为base64不适用于btoa反转义。
EN