如何在反应中将blob字符串转换为图像

Question

我正在开发一个反应程序，从后端获取图像并将其显示在前端。 API 调用工作正常，我可以在测试 API 时在邮递员中获得图像预览。但我无法在前端将其转换为图像。

以下是我从后端收到的响应：

{data: '����\x00\x10JFIF\x00\x01\x01\x01\x00H\x00H\x00\x00��\x02(ICC_PROFILE\x00\x01\x01\x00\x00\x02\x18\x00\x00\x00\x00\x02\x10\x00\x00…��M�M�2(݃\x04�#�ɤ�j7�\x02�W\x137�1x�-��.b[�Y���7%���];�H��', status: 200, statusText: '', headers: {…}, config: {…}, …}

这里的数据是图像的字符串版本，我需要将其转换为前端的图像。下面是我的前端代码：

import './App.css';
import axios from 'axios';
import React, {useState, useEffect} from 'react';

function App() {
  const[imageUrl, setImageUrl] = useState('')

  useEffect(() => {
    axios.get('http://localhost:8080/userImage/[email protected]/download/', {
      headers: {
      }
    })
    .then(response => {
      console.log(response)
      const url = URL.createObjectURL(response.data);
      setImageUrl(response.data)
      console.log(url)
    })
    .catch(err => {
      console.log(err)
    })
  },[])

  return (
    <div className="App">
      <img src={imageUrl} alt="Image Placeholder"/>
    </div>
  );
}

export default App;

Answer 1

我不确定您是否使用响应类型。您需要将响应类型指定为 blob

return axios
    .get(url, {
      responseType: 'blob'
    }).then()

Answer 2

对于字符串，

<img src={`data:image;base64,${img}`} alt="img" />

另一种方式用于文件和 BLOB 等对象

const imgUrl = URL.createObjectURL(img);

Answer 3

您似乎正在将一个字符串传递给 URL.createObjectURL()。根据 docs 您应该传递目的;更具体地说，是 File、Blob 或 MediaSource 对象。

我花了一些时间想出了一个解决方案，虽然我怀疑它不是最有效的，但它至少可以工作

在后端确保发送一个base64字符串：

const fs = require('fs');
const path = require('path');

app.get('/photo-test', async (req, res) => {
  let base64 = await fs.readFileSync(path.join(__dirname, "photos", "testPhoto.png"), 'base64'); //change the path to your specific photo
  res.status(200).send(base64).end();
});

然后在react中将base64字符串转换为一个新的Blob并将其用于URL.createOjectURL([新 Blob])。

const [imageUrl, setImageUrl] = useState('')

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

useEffect(() => {
    axios.get('http://localhost:5000/photo-test', {
        headers: {
        }
    })
        .then(response => {
            const blob = base64toBlob(response.data);
            const url = URL.createObjectURL(blob);
            setImageUrl(url)
        })
        .catch(err => {
            console.log(err)
        })
}, [])

return (
    <div className="App">
        <img src={imageUrl} alt="Image Placeholder" />
    </div>

请注意取自this堆栈溢出的新函数base64toBlob邮政。