如何在反应中使用保存的图像 - Javascript

在前端开发中，我们常常需要展示图片。有些时候，我们需要在用户操作之前将图片保存到本地并在用户操作完成后展示出来。因此在本文中，我们将介绍如何在反应中保存图像并在反应中使用保存的图像。

保存图像

首先，我们需要将图像保存到本地。可以使用以下代码示例：

function saveImgToFile(imgUrl, fileName) {
  var canvas = document.createElement('canvas');
  var img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');

  img.onload = function(){
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    var link = document.createElement("a");
    link.download = fileName;
    link.href = canvas.toDataURL("image/png");
    link.click();
  };
  img.src = imgUrl;
}

上述函数将图像保存为 PNG 文件。我们需要提供图像的 URL 和要保存的文件名，该函数将自动下载 PNG 文件。

在反应中展示图像

接下来，我们可以使用以下代码将已保存的图像展示在反应应用程序中：

import React, { useState } from 'react';

function App() {
  const [image, setImage] = useState('');

  const handleImageChange = (e) => {
    const selectedFile = e.target.files[0];
    const reader = new FileReader();
    reader.onloadend = () => {
      setImage(reader.result);
    };
    if (selectedFile) {
      reader.readAsDataURL(selectedFile);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      {image && (
        <img src={image} alt="Selected" />
      )}
    </div>
  );
}

export default App;

上述代码将创建一个文件选择输入，然后将选择的图像保存并在反应应用中展示出来。当用户从文件系统中选择图像时，我们将其保存在 image 变量中，并使用 <img> 元素在屏幕上显示出来。

结论

通过上述代码示例，我们可以在反应中保存和展示图像。可以使用这些示例作为起点来构建更复杂的应用程序。