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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2632 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

图片路径

具体链接

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

第 1 条附言 · 2017-08-21 20:18:29 +08:00

GIF 不清楚，我更新下图片，添加下步骤

点击投诉

投诉按钮

####弹出投诉按钮

####最后这个效果投诉按钮

DOM

feedback

实现

Google

4 条回复 • 2017-08-27 14:03:44 +08:00

autoxbc

2017-08-21 19:40:15 +08:00

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

safilar

2017-08-21 20:19:24 +08:00

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

autoxbc

2017-08-21 22:35:05 +08:00

选中 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

2017-08-27 14:03:44 +08:00

{
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，但是大概思路就是这样的。