从后端 dataURL 在 React 中创建图像

Question

我正在尝试获取 HTML canvas 的快照，如下所示：

    const canvas = canvasRef.current
    let image = canvas.toDataURL('image/jpeg');
    await axios.post('/api/entries/', { dataURL: image })

这似乎在工作，并且正确连接到数据库。

但我不知道如何使用 dataURL 在 React 前端创建图像组件

我能够很好地从后端获取它们并记录 dataURL。

    const pics = await axios.get('/api/entries/')
    pics.data.map((pic) => { console.log(pic.dataURL) })

我想我只是不确定将每个 dataURL 放入一个元素的后续步骤

这是我的 getPics 函数：

  const getPics = async () => {
    const pics = await axios.get('/api/entries/')

    return (
      pics.data.map((pic) => (
        <img src={pic.dataURL} key={pic.dataURL} />
      ))
    )
  }

它的用法就像：

<div>
  {getPics()}
</div>

Answer 1

将图像放入状态并将提取放入 useEffect() 函数。

const [pic,setPics] = useState();

useEffect(() => {
  const getPics = async () => await axios.get('/api/entries/')
    .then(res => {
    setPics(res.data);
    })
  getPics();
}, [])

映射是正确的方法...映射时，您可以将数据放入 img 元素中，这会将每个图像呈现到页面上。键值是为了让反应知道每个元素之间的区别。

return (
  {pics.data.map((pic) => (
    <img src={pic.dataURL} key={pic.dataURL} />
  ))}
)

从后端 dataURL 在 React 中创建图像

create image in React from backend dataURL

javascript

reactjs

canvas

axios

html5-canvas