使用书签实现所有图片一键下载-京东云开发者社区

## 思路
JS实现思路主要分为两部分，一是如何获取网页中所有的图片链接，二是如何在浏览器的控制台打印图片。封装形式用了便捷的书签的方式，可以点一个标签来运行。
## 获取网页中所有图片链接
网页中图片主要有三种形式：一是img标签，二是css中的背景图片，三是在style中设置的背景图片。我们分别获取一下这三种图片：
#### img标签
用dom查询的api获取所有的img标签，返回src的数组
```
function getDomImage() {
	let imgList = [].slice.call(document.querySelectorAll('img')).map(item => item.src);
	return imgList;
}

```
#### 有style属性的元素的背景图片
首先通过*[style]选出所有有style属性的标签，然后把内容拼成一个css格式的字符串。之后对这个字符串使用正则匹配url()中的链接，然后放到数组中返回。
```
function getStyleImage() {
	const imgList = [];
	let styleEles = [].slice.call(document.querySelectorAll("*[style]"));
	styleEles && styleEles.map(styleEle => {
		const styleStr = Object.entries(styleEle.style).filter(item => item[1]).map(item => item[0] + ':' + item[1]).join(';');
		let styleImages = styleStr.match(/url$(.*)$/g);
		styleImages = styleImages && styleImages.map(item => item.replace(/url$['"]*([^'"]*)['"]*$/,'$1'));
		if(styleImages) imgList.push(...styleImages);
	});
	return imgList;
}

```
#### css中的背景图片
首先选出所有的style元素，然后获取textContent，之后也是通过正则匹配url()中的链接，然后放入数组返回
```
function getCssImage() {
	const styleEles = document.querySelectorAll('style');
	return [].slice.call(styleEles).map(styleEle => {
		const css = styleEle.textContent;
		const cssImages = css.match(/url$(.*)$/g);
		return cssImages && cssImages.map(item => item.replace(/url$(.*)$/,'$1')) || [];
	});
}
```
##去重
获取到这三种图片之后，合并到一个数组中。
```
function getImages() {
	return getDomImage().concat(...getCssImage()).concat(...getStyleImage());
}

```
但现在的数组中可能有重复的图片，因为一个图片可能在页面上出现多次。我们可以通过set来去重。
```
function uniqueArr(arr) {
	return Array.from(new Set(arr))
}
```
## 控制台打印图片
现在有了所有图片的链接，下一步就是打印到控制台了。浏览器console支持%c指定css样式，可以通过background-image的方式来设置图片。这是一种hack的方式。

先打印了一堆的空格，留出空间来显示背景图，然后在这段空白的文字区域实现图片。
```
	function formatConsole(list) {
		
		if (window.console) {
			var cons = console;
			if (cons) {
				list.forEach(item => {
					cons.log("%c\n                                                          ","font-size:100px;background:url('"+ item+"') no-repeat;background-size:contain;");
					cons.log(item);
				});
			}
		}
	}

```
这三步完成之后组合调用一下：
```
let imgs = getImages();
imgs = uniqueArr(imgs);
formatConsole(imgs);
```
现在获取网页所有图片并打印到控制台的功能已经完成了。
##浏览器新建标签
功能已经完成了，可是怎么使用呢。开发一个chrome插件可以，而且不止可以打印到控制台，还可以传到服务器之类的，能做更多的事情。
但我们现在只想打印到控制台，可以使用一种简单的方式：浏览器书签。
在浏览器中新建一个书签，比如内容为javascript:alert(1);，那么你在书签栏点击这个标签的时候就会执行这段js。
基于此，我们只需要把上面的代码再包装一层就可以用了：
```
javascript: (function() {
    //xxx
})()
```
## 总结
至此，我们已经实现了一键打印网页中所有的图片。