我有一个反应应用程序,它使用Plotly.js在前端动态生成图像。我想添加图像共享功能。我正在尝试为此使用react-share。社交平台需要图片 URL 进行图片分享,不支持 base64 编码等格式的图片。实现了后端,因此它可以接收 base64 格式的图像,存储在数据库中并返回图像的 URL,然后用于与react-share
.
由于图像是动态生成的(例如,每次用户调整图表大小时它都会改变),所以当用户单击共享图标时,一切都应该完成。
所以用户点击分享图标后,前端生成的图片应该保存到后端
let imgURI;
const handleClick = () => {
Plotly.toImage('chartContainer', {
format: 'png',
width: 1000,
height: 600
})
.then(dataUrl => api.post('/image/base64ToPng', { image: dataUrl })
.then(
(response) => {
imgURI = response.data.imgURI;
},
failure => console.error(failure)
));
};
收到响应后,像这样传递给共享组件
<FacebookShareButton
url={imgURI}
>
<FacebookIcon/>
</FacebookShareButton>
代码示例不是异步的,所以图片 URI 没有传递给共享组件,因此共享不起作用。我尝试使用条件传递道具,具体取决于它是否已定义并且没有提出解决方案。我还在react-share repo中查找了一些处理异步 url 的 问题 ,但似乎它们都没有处理点击时的动态图像共享。
我非常感谢有关如何完成此任务的提示。