在componentDidUpdate中设置img.src不能触发img.onload事件回调

Question

componentDidUpdate(prevProps, prevState, snapImg){
    if(this.props.bookImg!=null && this.props.bookImg!==prevProps.bookImg){
        var canvas= document.createElement('canvas');
        var ctx= canvas.getContext('2d');
        var img= new Image();
        img.crossOrigin= 'Anonymous';
        var dataURL;
        img.onload=function() {
            console.log('fn');
            ctx.drawImage(img, 0, 0);
            dataURL= canvas.toDataURL("image/jpeg");
            console.log(dataURL);
        }
        img.src=this.props.bookImg;
        console.log('end');
    }
}

这段代码，我在<script>标签内测试时是有效的，但用在componentDidUpdate里img.onload的回调不能触发；有谁知道为什么吗?

Answer 1

初始化第一次渲染这个生命周期是不会执行的， 因此应该不是onload不执行，是整个都不执行吧？

如果不是第一次渲染的情况的话， 那就需要你贴一下你的script中写的可行的代码来分析了

Answer 2

1. 确定componentDidUpdate成功执行
2. 确定src确实存在
3. 查看network看图片是否成功load
4. 看console是否有跨域错误

本人刚刚试了一下代码，除了设置crossOrigin出现跨域错误之外，都可以成功执行onload函数

Answer 3

我修改了几次代码，发现可以了，下面贴出代码：

componentDidUpdate(prevProps, prevState){
    if(this.props.bookImg!=null && this.props.bookImg!==prevProps.bookImg){
        var bookId= this.props.bookId;
        var _this= this;
        var canvas= document.createElement('canvas');
        var ctx= canvas.getContext('2d');
        var img= document.createElement('img'); //new Image() not work! ??????
        img.crossOrigin= 'Anonymous';
        var dataURL;
        img.onload=function() {
            canvas.width= img.width;
            canvas.height= img.height;
            ctx.drawImage(img, 0, 0);
            dataURL= canvas.toDataURL("image/jpeg");
            var info={id: bookId, url: dataURL};
            _this.props.actions.UpdateDataURL(info);
        }
        img.src=this.props.bookImg;
    }
}

发现好像将使用new Image 生成img对象 改为 document.createElement('img')就可以了；但是我还是不知道为什么？