Google feedback 的效果 DOM 元素选中是如何实现的？

[safilar]

具体见效果图，里面最后那个选择 DOM 的实现

有没有 V 友有过相关的实现思路。

具体链接

https://www.google.com/tools/feedback/reports

[autoxbc]

gif 看不清，贴图最好贴原始尺寸的

[safilar]

不好意思，@autoxbc 我更新了下图片。

[autoxbc]

选中 dom 元素可以看这个问答，高票答案给了好几个项目
https://stackoverflow.com/questions/742210/does-anyone-know-a-dom-inspector-javascript-library-or-plugin

后面从 dom 生成 png，大概先用 dom 生成 svg，然后画到 canvas 里，最后输出 png
http://blog.csdn.net/jaylongli/article/details/50216553
http://www.jianshu.com/p/092496e772d4
https://juejin.im/entry/58b91491570c35006c4f7fdf

从 google 的压缩代码里，只翻出一个 canvg 的项目说明，是其中一步的工具。

[flowfire]

{
let theShadow = document.createElement("div");
theShadow.style.pointerEvents = "none";
theShadow.style.position = "fixed";
theShadow.style.top = "0px";
theShadow.style.left = "0px";
theShadow.style.right = "0px";
theShadow.style.bottom = "0px";
theShadow.style.background = "rgba(0,0,0,.2)";
document.body.appendChild(theShadow);
document.addEventListener("mouseover", e => {
let dom = e.target;
let position = dom.getBoundingClientRect();
let X = position.left;
let Y = position.top;
let width = position.width;
let height = position.height;
let chosen = dom.cloneNode();
chosen.innerHTML = dom.innerHTML;
Array.prototype.forEach.call(theShadow.childNodes, dom => dom.remove());
chosen.style.position = "fixed";
chosen.style.top = Y + "px";
chosen.style.left = X + "px";
chosen.style.width = width + "px";
chosen.style.height = height + "px";
chosen.style.border = "solid 2px yellow";
chosen.style.background = "#FFF";
theShadow.appendChild(chosen);

});
}

一个简单的 demo，还有挺多 bug，但是大概思路就是这样的。