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
})()
复制代码

总结

至此，咱们已经实现了一键打印网页中全部的图片。能够新建一个书签，而后内容复制下面连接中的代码，以后点击书签栏的书签就能够运行了。

代码连接

console-all-image