`map.getCanvas()`方法在React中无法正常运行

Question

我的目标是使用

componentDidMount()

函数将画布导出为 .png 格式。虽然

getShortSnap()

第一次工作正常，但第二次却无法按预期工作。

这是我的代码：

class Map extends Component {
    getShortSnap = (fileName) => {this.map.getCanvas().toBlob((blob) => {console.log(blob);})

    componentDidMount() {
        this.map = new mapboxgl.Map({
            container: "map",
            zoom: 1,
            center: [0, 0],
            maxZoom: 17.4,
            style: baseMaps
        });
    
        this.map.on("load", () => {
            this.getShortSnap() // print -> Blob{size:1212321,type:"image/png"}  it is the first
            setTimeout(()=>{
                this.getShortSnap() //print -> Blob{size:31295,type:"image/png"} it is the second
            },5)
        })        
    }
}

为什么结果不同？

我希望两个结果是一致的。

Answer 1

你能修复这个错误吗？