Javascript canvas drawImage（）函数工作不正常

我正在尝试用react js在画布上绘制一幅图像（上传）

onChange=（e）=>{
var file=URL.createObjectURL（e.target.files[0]）
const logo=新图像（）
logo.crossOrigin=“匿名”；
const canvas=document.getElementById（“canvas3”）
const ctx=canvas.getContext（“2d”）
logo.onload=异步函数（）{
canvas.height=logo.naturalHeight
canvas.width=logo.naturalWidth
ctx.drawImage（徽标，0,0，徽标.naturalWidth，徽标.naturalHeight，0,0，ctx.canvas.width，
ctx.画布.高度）
}
logo.src=this.state.logo文件
const c=document.getElementById（“canvas3”）
console.log（c.toDataURL（））
}

上传图标

---

当我第一次尝试上传图像时，它不工作，但第二次它绘制。我不明白为什么会发生这种情况。

尝试将onChange语法切换为

onChange={（e）=>this.onChange（e）}

另一个选项可能是将输入包装在

中，并将onChange处理程序移动到那里

---

参考：

我通过将wait添加到

URL.createObjectURL（e.target.files[0]）

并使函数异步，解决了我的问题。问题是我在没有加载url的情况下更新img src。所以，wait起作用了。

只是猜测，但这可能与制作logo.onload异步函数有关。我做到了。没用：/我试过了。但是没有运气。当我上传第二个时间URL时，应该考虑它很好。CealObjutTurl（）是同步的，等待它只会移动到一个微任务。你可能被别的东西愚弄了，以为这是解决你问题的办法，但显然不是。