<el-button class="btn" size="medium" type="primary">保存</el-button>点击这个按钮把图片img保存到本地
时间: 2023-10-10 15:09:38 浏览: 44
要实现点击按钮将图片保存到本地,你可以使用 JavaScript 来处理。以下是一个示例代码,其中包含了点击按钮保存图片的功能:
HTML 代码:
```html
<el-button class="btn" size="medium" type="primary" onclick="saveImage()">保存</el-button>
<img id="myImage" src="path/to/your/image.jpg" alt="Image">
```
JavaScript 代码:
```javascript
function saveImage() {
// 获取图片元素
var imgElement = document.getElementById("myImage");
// 创建一个链接元素
var link = document.createElement('a');
// 设置链接属性,将图片作为链接的 href
link.href = imgElement.src;
// 设置链接属性,指定下载的文件名
link.download = 'image.jpg';
// 模拟点击下载链接
link.click();
}
```
在上述代码中,通过 `onclick` 属性将按钮的点击事件绑定到 `saveImage()` 函数上。在该函数中,首先获取到图片元素,然后创建一个链接元素,并设置链接的 `href` 属性为图片的 URL,设置 `download` 属性为你想要保存的文件名。最后,通过模拟点击下载链接来触发文件下载。
请注意,在示例代码中,需要将 `src` 属性设置为你自己的图片路径,并将 `alt` 属性设置为适当的替代文本。
这样设置后,当用户点击保存按钮时,图片将被下载到本地。
希望以上解释和示例代码能够帮助你实现你的需求。如果还有其他问题,请随时提问。