技术预览版，所以效果不用期待，依旧是万一成功呢了！
元素选择方式类似于以前 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);
})();
大概就是这么个意思，根据网站不同，效果千奇百怪……
一想到去写需要安装的扩展，就变得毫无兴趣了……