有没有办法调用从另一个组件中的 FileInput 上传的图像？

问题描述

我正在使用 grommet，我创建了两个 FileInput，然后从图像中生成了一个新图像。我的问题是：有没有办法调用我从按钮中的 FileInput 获得的图像？如果是，如何？感谢您的回答。

代码（取出一些无关的垃圾）：

function App() {
  function merge(pfpImage,overlayImage) {
    const pfpDimensions = sizeOf(pfpImage);
    const overlayDimensions = sizeOf(overlayImage);

    if (pfpDimensions == overlayDimensions) {
      return mergeImages([pfpImage,overlayImage]);
    } else {
      window.alert("Make sure the images have the same dimensions.");
    }
  }

  var mergedImage;

  return (
    <grommet theme={theme}>
      <Header background="neutral-3" pad="medium" height="xsmall">
        <Anchor label="Social Ribbon" icon={<Image className="logoImage" a11yTitle="Social Ribbon logo" src={logo} />} />
      </Header>
      <Main direction="column" pad="medium" gap="medium">
        <Box direction="row" gap="large">
          <Box direction="column" gap="medium">
            <Box direction="row" gap="small">
              <Text>Profile Picture: </Text>
              <FileInput
                name="pfp"
                multiple={false}
                onChange={event => {
                  const fileList = event.target.files;
                  for (let i = 0; i < fileList.length; i += 1) {
                    const pfpFile = fileList[i];
                  }
                }}
              />
            </Box>
            <Box direction="row" gap="small">
              <Text>Overlay: </Text>
              <FileInput
                name="overlay"
                multiple={false}
                onChange={event => {
                  const fileList = event.target.files;
                  for (let i = 0; i < fileList.length; i += 1) {
                    const overlayFile = fileList[i];
                  }
                }}
              />
            </Box>
          </Box>
          <Box>
            <Image src={mergedImage} />
          </Box>
        </Box>
        <Button primary size="small" label="Put overlay" onClick={mergedImage = merge(pfpFile,overlayFile)} />
      </Main>
    </grommet>
  )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）