如何解决有没有办法调用从另一个组件中的 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 举报,一经查实,本站将立刻删除。