前端 react点击按钮下载图片到本地

经过不懈努力(主要是百度哈哈哈哈)终于实现了！！！

直接上代码吧！！！

  //点击下载图片
 const downloadImage = (imgsrc, name, type = 'png') => {
    var src = imgsrc;
        var canvas = document.createElement('canvas');
        var img = document.createElement('img');
        img.onload = function(e) {
            canvas.width = img.width;
            canvas.height = img.height;
            var context = canvas.getContext('2d');
            context.drawImage(img, 0, 0, img.width, img.height);         
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob((blob)=>{
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = name; 
                link.setAttribute("crossOrigin",'Anonymous');
                link.click();  
            }, "image/jpeg");           
        }
        img.src ="data:image/png;base64,"+ src;
  }

<Button onClick={()=>downloadImage(post,"post","png")} style={{backgroundColor:"#ff951d",color:"white"}}>保存海报</Button>


<img id={"postsId"} style={{width:"85%"}} src={"data:image/png;base64,"+post}/>

这里要注意的是图片从后端返回的时候最好是base64地址，不然的话可能会报其他的错误(我就因为后端直接返回的图片网址报跨域错误 也没想着咋解决 直接叫他返回base64试试结果成功了) 我们后端返回的时候没有带data:image/png;base64,我就自己手动加上了

最后实现效果如图

有其他办法的大佬欢迎多多指教 ！！！