js通过按钮下载图片到本地的代码

            <div class="content" style="margin-bottom:2.1rem;">

            <img id="haibao" style="width: 100%;height: 100%;" src="http://">

            </div>

            

            <!--下载图片开始-->

            <div>

            <button style="position:absolute;background: #ff7443;border-color: #ff7443;border: 0;color: #fff;padding: 5px 15px;" type="button" onclick="downloadImg()">下载海报</button>

                

            </div>

            <script>

                function downloadImg(){

                    var img = document.getElementById('haibao'); // 获取要下载的图片

                    var url = img.src;                            // 获取图片地址

                    var a = document.createElement('a');          // 创建一个a节点插入的document

                    var event = new MouseEvent('click')           // 模拟鼠标click点击事件

                    a.download = 'haibao_download'                  // 设置a节点的download属性值

                    a.href = url;                                 // 将图片的src赋值给a节点的href

                    a.dispatchEvent(event)                        // 触发鼠标点击事件

                 }

            </script>

            <!--下载图片结束-->

原理：

通过JS来触发<a>链接来实现图片下载，1、给img指定一个id，添加一个button新增一个点击事件，然后执行js代码。