javascript - img.onload 在 new Image() 声明后拒绝触发

Question

我正在尝试将图像加载到 Canvas 上，以便我可以在上面写一些文本，也许稍后可以保存它。我有以下两个功能:

openImage = (memeURL, index) => {

    this.setState({currentMeme: index}, () => {

        const base_image = new Image();

        base_image.crossOrigin = "anonymous";
        base_image.src = memeURL;

        const base64 = this.getBase64Image(base_image);

        this.setState({currentImagebase64: base64});
    })


}

getBase64Image(img) {

    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
}

openImage函数绑定(bind)到 onClick事件，因此当我单击图像时，它会启动上述操作，以便我的 <img src="">可以从状态馈送并显示图像。

问题是，当我单击图像时，它永远不会显示，而我的 currentImagebase64状态值始终为 data; 但是如果使用网络工具进行调试，它看起来很好，因为有足够的时间来加载图像。显然解决方案在下面的答案中:

canvas.toDataUrl() returns 'data:,'

但是，如果我写类似建议的 onload 的内容函数永远不会触发。例如，下面的代码由于某种原因不会触发加载，它只是在到达它时停止执行:

openImage = (memeURL, index) => {

    this.setState({currentMeme: index}, () => {

        const base_image = new Image();

        base_image.onload = function() {

            this.crossOrigin = "anonymous";

        }

        //Set src AFTER the image has loaded
        base_image.src = memeURL;

        const base64 = this.getBase64Image(base_image);

        this.setState({currentImagebase64: base64});
    })


}

有学科专家可以帮忙吗？

Answer 1

const base64 = this.getBase64Image(base_image);
this.setState({currentImagebase64: base64});

图像加载后需要执行

和

base_image.crossOrigin = "anonymous";

需要在设置src之前完成

因此，代码变为

openImage = (memeURL, index) => {
    this.setState({currentMeme: index}, () => {
        const base_image = new Image();
        base_image.crossOrigin = "anonymous";
        base_image.onload = () => { // use arrow function so `this` will be what is needed
            const base64 = this.getBase64Image(base_image);
            this.setState({currentImagebase64: base64});
        }
        base_image.src = memeURL;
    })
}

您的评论

//Set src AFTER the image has loaded

建议你不知道onload是如何工作的...你设置了src来开始加载图像，然后当图像加载完成时触发onload