【小书签】小截图(预览版)——截取页面元素

技术预览版,所以效果不用期待,依旧是万一成功呢了!

元素选择方式类似于以前 EverNote 的剪藏,点选+上下左右(W、A、S、D),上下在同级元素间跳转,左是上级元素,右是下级元素。

回车截图当前选中元素,目前用的是 Html2canvas,效果,呵呵哒吧,下一步打算开心的时候把他做成扩展,直接使用浏览器接口。

Esc 是退出,懒得写了,于是直接刷新页面。

嗯,开心再说吧。


2017-11-2 19:51:31

微调遮罩效果,一定程度上改善了瀑布流的适配性。反正现在的截图方法遇到跨域图片必跪。

2017-11-2 20:13:09

基本上完美搞定遮罩了,其实还有待更多测试。

2017-11-2 21:43:50

页面尺寸这个数值的准确性还有待商榷,关键是大家玩的花样百出……


javascript:(function(){
	var selector;
	function show_border(e){
		var x = e.offset().left;
		var y = e.offset().top;
		var w = e.outerWidth();
		var h = e.outerHeight();
		var bw = $("html").outerWidth()>document.body.scrollWidth?$("html").outerWidth():document.body.scrollWidth;
		var bh = $("html").outerHeight()>document.body.scrollHeight?$("html").outerHeight():document.body.scrollHeight;
		var left = $("body").offset().left;
		var top = $("body").offset().top;
		$("#capture-border").css({
			"width":w,
			"height":h,
			"top":y-3,
			"left":x-3
		});
		$("#capture-background-top").css({
			"width":bw-left,
			"height":y-top-3,
			"top":top,
			"left":left
		});
		$("#capture-background-left").css({
			"width":x-left-3,
			"height":h+6,
			"top":y-3,
			"left":left
		});
		$("#capture-background-right").css({
			"width":bw-x-w-3,
			"height":h+6,
			"top":y-3,
			"left":x+w+3
		});
		var btheight = bh-y-h-3>0?bh-y-h-3:window.screen.height;
		$("#capture-background-bottom").css({
			"width":bw,
			"height":btheight,
			"top":y+h+3,
			"left":left
		});
		$(".capture-background").show();
		$("#capture-border").show();
	};
	function main(){
		$("body").append('<div id="capture-background-top" class="capture-background" style="background-color:rgba(0,0,0,0.3);position:absolute;z-index:9999998;display:none;pointer-events: none;"></div>'+'<div id="capture-background-left" class="capture-background" style="background-color:rgba(0,0,0,0.3);position:absolute;z-index:9999998;display:none;pointer-events: none;"></div>'+'<div id="capture-background-right" class="capture-background" style="background-color:rgba(0,0,0,0.3);position:absolute;z-index:9999998;display:none;pointer-events: none;"></div>'+'<div id="capture-background-bottom" class="capture-background" style="background-color:rgba(0,0,0,0.3);position:absolute;z-index:9999998;display:none;pointer-events: none;"></div>'+'<div id="capture-border" style="border:3px solid #33AAFF;position:absolute;z-index:9999999;display:none;pointer-events: none;"></div>');
		$("*").not("#capture-border").click(function(){
			selector = $(this);
			show_border(selector);
			return false;
		});
		$(window).scroll(function(event){
			if(typeof selector != 'undefined'){
				show_border(selector);
			}
		});
		$(window).resize(function(event){
			if(typeof selector != 'undefined'){
				show_border(selector);
			}
		});
		$(document).keyup(function(event){
			var keycode = event.keyCode;
			if(keycode==27){
				window.location.href = window.location.href;
				return false;
			}else if(typeof selector != 'undefined'){
				if(keycode==37 || keycode==65){
					selector = selector.parent().length<1 ? selector:selector.parent();
					show_border(selector);
					return false;
				}else if(keycode==38 || keycode==87){
					selector = selector.prev().length<1 ? selector:selector.prev();
					show_border(selector);
					return false;
				}else if(keycode==39 || keycode==68){
					selector = selector.children().first().length<1 ? selector:selector.children().first();
					show_border(selector);
					return false;
				}else if(keycode==40 || keycode==83){
					selector = selector.next().length<1 ? selector:selector.next();
					show_border(selector);
					return false;
				}else if(keycode==13){
					console.log("开始截图");
					var getCanvas;
					html2canvas(selector, {
						onrendered: function(canvas){
							canvas.toBlob(function(blob){
								var a = document.createElement('a');
								var url = window.URL.createObjectURL(blob);
								var filename = window.location.href+new Date().getTime()+".png";
								a.href = url;
								a.download = filename;
								a.click();
								window.URL.revokeObjectURL(url);
							});
						}
					});
					return false;
				}
			}
		});
	};
	if(typeof jQuery == 'undefined' && typeof $ == 'undefined'){
		var jqscript = document.createElement("script");
		jqscript.src = "https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js";
		jqscript.onload = function(){
			main()
		};
		document.body.appendChild(jqscript);
	}else{
		main()
	}
	var h2cscript = document.createElement("script");
	h2cscript.src = 'https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js';
	document.body.appendChild(h2cscript);
})();

上面是用的四个 div 拼接的遮罩,代码略多;

下面是用网上流行的方式,边框做遮罩,代码少点,但是一旦错位就是整体错位;

好像我把这里当做版本管理用了,emmmmm,反正青蛙看不懂。

javascript:(function(){
	var selector;
	function show_border(e){
		var x = e.offset().left;
		var y = e.offset().top;
		var w = e.outerWidth();
		var h = e.outerHeight();
		var bw = $("html").outerWidth()>document.body.scrollWidth?$("html").outerWidth():document.body.scrollWidth;
		var bh = $("html").outerHeight()>document.body.scrollHeight?$("html").outerHeight():document.body.scrollHeight;
		var left = $("body").offset().left;
		var top = $("body").offset().top;
		$("#capture-border").css({
			"width": w,
			"height": h,
			"top": y-3,
			"left": x-3
		});
		$("#capture-background").css({
			"width": w+3,
			"height": h+3,
			"top": -3,
			"left": -3,
			"border-left-width": x>0?x:0,
			"border-top-width": y>0?y:0,
			"border-right-width": bw-x-w-3>0?bw-x-w-3:0,
			"border-bottom-width": bh-y-h-3>0?bh-y-h-3:0
		});
		$("#capture-background").show();
		$("#capture-border").show();
	};
	function main(){
		$("body").append('<div id="capture-background" style="border:0 solid rgba(0,0,0,0.3);position:absolute;z-index:9999998;display:none;pointer-events: none;"></div><div id="capture-border" style="border:3px solid #33AAFF;position:absolute;z-index:9999999;display:none;pointer-events: none;"></div>');
		$("*").not("#capture-border").click(function(){
			selector = $(this);
			show_border(selector);
			return false;
		});
		$(window).scroll(function(event){
			if(typeof selector != 'undefined'){
				show_border(selector);
			}
		});
		$(window).resize(function(event){
			if(typeof selector != 'undefined'){
				show_border(selector);
			}
		});
		$(document).keyup(function(event){
			var keycode = event.keyCode;
			if(keycode==27){
				window.location.href = window.location.href;
				return false;
			}else if(typeof selector != 'undefined'){
				if(keycode==37 || keycode==65){
					selector = selector.parent().length<1 ? selector:selector.parent();
					show_border(selector);
					return false;
				}else if(keycode==38 || keycode==87){
					selector = selector.prev().length<1 ? selector:selector.prev();
					show_border(selector);
					return false;
				}else if(keycode==39 || keycode==68){
					selector = selector.children().first().length<1 ? selector:selector.children().first();
					show_border(selector);
					return false;
				}else if(keycode==40 || keycode==83){
					selector = selector.next().length<1 ? selector:selector.next();
					show_border(selector);
					return false;
				}else if(keycode==13){
					console.log("开始截图");
					var getCanvas;
					html2canvas(selector, {
						onrendered: function(canvas){
							canvas.toBlob(function(blob){
								var a = document.createElement('a');
								var url = window.URL.createObjectURL(blob);
								var filename = window.location.href+new Date().getTime()+".png";
								a.href = url;
								a.download = filename;
								a.click();
								window.URL.revokeObjectURL(url);
							});
						}
					});
					return false;
				}
			}
		});
	};
	if(typeof jQuery == 'undefined' && typeof $ == 'undefined'){
		var jqscript = document.createElement("script");
		jqscript.src = "https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js";
		jqscript.onload = function(){
			main()
		};
		document.body.appendChild(jqscript);
	}else{
		main()
	}
	var h2cscript = document.createElement("script");
	h2cscript.src = 'https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js';
	document.body.appendChild(h2cscript);
})();

大概就是这么个意思,根据网站不同,效果千奇百怪……


一想到去写需要安装的扩展,就变得毫无兴趣了……

1赞