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