如何在反應中將blob字串轉換為影像

我正在開發一個反應程式以從后端獲取影像并將其顯示在前端。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;

uj5u.com熱心網友回復：

我不確定您是否使用回應型別。您需要將回應型別指定為 blob

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

uj5u.com熱心網友回復：

對于字串

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

File 和 BLOB 等物件的另一種方式

const imgUrl = URL.createObjectURL(img);

uj5u.com熱心網友回復：

看來您正在將字串傳遞給URL.createObjectURL(). 根據檔案，您應該傳遞一個物件；更具體地說是 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();
});

然后在反應中將 base64 字串轉換為新的 Blob 并將其用于URL.createOjectURL([new 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>

請注意取自此堆疊溢位帖子的新函式 base64toBlob。

標籤：javascript 反应 图片 斑点

上一篇：我無法在我的引導網站中水平添加影像

下一篇：運行影像轉換腳本給我“沒有這樣的檔案”