html页面有一个输入框,右边有个下载按钮,在输入框中输入一个展示图片的网页地址,点击下载,可以直接下载该网页的所有类型图片,用JavaScript和css html实现
时间: 2023-11-29 13:05:24 浏览: 33
实现这个功能需要用到 JavaScript 和 HTML5 的 File API,可以按照以下步骤实现:
1. 在 HTML 页面中添加一个输入框和一个下载按钮:
```html
<input type="text" id="urlInput">
<button type="button" id="downloadBtn">Download</button>
```
2. 给下载按钮添加点击事件监听器,当用户点击下载按钮时,获取输入框中的网页地址,并使用 XMLHttpRequest 对象获取网页内容:
```javascript
document.getElementById("downloadBtn").addEventListener("click", function() {
var url = document.getElementById("urlInput").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理获取到的网页内容
}
};
xhr.send();
});
```
3. 在获取到网页内容后,使用 DOMParser 对象解析 HTML,并获取所有图片元素:
```javascript
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, "text/html");
var images = doc.getElementsByTagName("img");
```
4. 使用 Canvas 对象将图片转换为 Blob,并创建一个 ZIP 文件并将所有图片添加到 ZIP 文件中:
```javascript
var zip = new JSZip();
for (var i = 0; i < images.length; i++) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = images[i].naturalWidth;
canvas.height = images[i].naturalHeight;
ctx.drawImage(images[i], 0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
zip.file("image-" + i + ".jpg", blob);
}, "image/jpeg");
}
```
5. 最后,使用 FileSaver.js 将 ZIP 文件保存到用户的计算机中:
```javascript
zip.generateAsync({type:"blob"}).then(function(content) {
saveAs(content, "images.zip");
});
```
这样就可以实现在 HTML 页面中输入一个展示图片的网页地址,点击下载按钮,可以直接下载该网页的所有类型图片的功能了。