reactjs - 使用反应钩子将本地 img 转换为 base64

Question

我在 React hooks 中试图利用 Stackoverflow question 这个问题中的代码- 但是，正如我认为有人指出的那样，在本地环境中实现这一点存在问题。

我有一个包含我的 src 路径的变量：

import avatar from '../../Assets/Photos/avatar.png'

然后我尝试将照片设置为 useState 状态：

 const [ photo, setPhoto ] = useState(avatar)

然后我使用 useEffect 等到变量加载完成：

useEffect(() => {
    if (photo) {
        console.log("PHOTO EXISTS!!!!!!!!!!!!!!", photo)
        console.log(convertImgToBase64())

    }
}, [photo])

convertImgToBase64 函数与我引用的问题中的函数几乎相同：

    function convertImgToBase64()
{
    var canvas = document.createElement('CANVAS');
    let img = document.createElement('avatar');
    img.src = photo;
    img.onload = function()
    {
        canvas.height = img.height;
        canvas.width = img.width;
        var dataURL = canvas.toDataURL('image/png');

        canvas = null;
        return dataURL
    };
}

这将返回 undefined - 请问这是为什么？

标签： reactjsbase64url