react+js根据图片的url下载图片到本地

思路用canvas画布把图像画出来然后用filesaver save

//导入filesaver
import FileSaver from 'file-saver';

//download方法
downLoad=()=>{
        var img=document.getElementById("qrCode");
        // console.log(img)
        var canvas=document.getElementById("canvas");
        
        var ctx=canvas.getContext("2d");
        canvas.setAttribute('width',600)
        canvas.setAttribute('height',600)
        ctx.drawImage(img,0,0,600,600);
        canvas.toBlob(function(blob) {
            FileSaver.saveAs(blob, 'test3.png')
          });
    }


//对应render的代码

                  <img crossOrigin={"anonymous"} id="qrCode" alt="" src={qrCodeUrl} style={{ marginTop: 10, width: 300, height: 300 }} />
                                <br/>
                                <canvas hidden={true} id="canvas" style={{width:300,height:300}}/> 

                    
                        </span>
                        
                        <Button type='primary' style={{ marginTop: 10, marginLeft: 10 }} onClick={this.downLoad}>保存图片</Button>