阅读 1679

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

关注下面的标签,发现更多相似文章
评论