Блог

Я использую втулку, и я создал два файла, и из изображений, которые они получают, создается новое изображение. Мой вопрос: Есть ли способ вызвать изображение, которое я получил из файла, введенного в мою кнопку? Если да, то как? Спасибо за любой ответ.

Код (Достал какой-то несвязанный хлам):

 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>
  )
}