Eisen's Blog

© 2023. All rights reserved.

提取页面上图片的 bookmarklet

April 20, 2012

bookmarkletjavascriptlinkedin

不多说,这个 bookmarklet() 就是用来抽取当前页面上指定大小的图片的工具。点击这个 bookmarklet 之后,就可以生成一个只有图片的页面。

那么如果我 ctrl+s 保存 [网页,全部],当前页面的图片就会随着页面保存到本地了。

代码放在这里

void (function() {
	var minWidth = parseInt(prompt("请输入最小宽度,默认为 200"), 10) || 200;
	var minHeight = parseInt(prompt("请输入最小高度,默认为 200"), 10) || 200;
	var imgs = [];
	var common = minWidth;

	function format(str, param) {
		return str.replace(/#{(\w+)}/gi, function(all, one) {
			return param[one.toLowerCase()];
		});
	}

	var tmp = Array.prototype.slice
			  .call(document.getElementsByTagName("img"));
	var inputs = document.getElementsByTagName('input');
	for(var i = 0, n = inputs.length; i < n; i++) {
		if(inputs[i].getAttribute('type') &&
		   inputs[i].getAttribute('type').toLowerCase() == 'image')
			tmp.push(inputs[i]);
	}

	for(var i = 0, n = tmp.length; i < n; i++) {
		if(tmp[i].tagName.toLowerCase() == 'input'
		   && (!tmp[i].getAttribute('type') ||
		   tmp[i].getAttribute('type')
		   && tmp[i].getAttribute('type') != 'image'))
			break;
		var src    = tmp[i].getAttribute('src'),
			box    = tmp[i].getBoundingClientRect(),
			width  = tmp[i].getAttribute('width') ||
					 (box.width || box.right - box.left),
			height = tmp[i].getAttribute('height') ||
					 (box.height || box.bottom - box.top);
		if(src && (src.indexOf('.jpg') || src.indexOf('.png'))
		   && width >= minWidth && height >= minHeight) {

			tmp[i].setAttribute('data-src', src);
			tmp[i].setAttribute('data-height', height);
			tmp[i].setAttribute('data-width', width);
			imgs.push(tmp[i]);
		}
	}
	var container = '';
	for(var i = 0, n = imgs.length; i < n; i++) {
		container += format('<img src="#{src}"  />', {
			'src'    : imgs[i].getAttribute('data-src'),
			'height' : imgs[i].getAttribute('data-height') * common /
					   imgs[i].getAttribute('data-width'),
			'width'  : common
		});
	}
	if(/firefox/i.test(navigator.userAgent))
		window.open('javascript: \'' + container + '\'');
	else
		document.write(container);
})();