html点击按钮把图片保存到本地
时间: 2023-08-10 17:18:09 浏览: 104
您可以使用HTML5的File API和Canvas API来实现将网页图片保存到本地的功能。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Save Image</title>
</head>
<body>
<img src="image.jpg" id="image">
<button onclick="saveImage()">Save Image</button>
<script>
function saveImage() {
var canvas = document.createElement("canvas");
var img = document.getElementById("image");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
canvas.toBlob(function(blob) {
var link = document.createElement("a");
link.download = "image.png";
link.href = URL.createObjectURL(blob);
link.click();
}, "image/png");
}
</script>
</body>
</html>
```
在这个示例中,我们创建一个canvas元素,将图片绘制到canvas上,并使用toBlob()方法将canvas转换为Blob对象。然后,我们创建一个带有下载属性的链接,并将Blob对象作为链接的href,最后通过click()方法触发链接来下载图片。