V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
safilar
V2EX  ›  JavaScript

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

  •  
  •   safilar · 2017-08-21 18:57:12 +08:00 · 2729 次点击
    这是一个创建于 2652 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    图片路径

    具体链接

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

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

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

    点击投诉

    投诉按钮

    ####弹出投诉按钮 投诉按钮

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

    4 条回复    2017-08-27 14:03:44 +08:00
    autoxbc
        1
    autoxbc  
       2017-08-21 19:40:15 +08:00
    gif 看不清,贴图最好贴原始尺寸的
    safilar
        2
    safilar  
    OP
       2017-08-21 20:19:24 +08:00
    不好意思,@autoxbc 我更新了下图片。
    autoxbc
        3
    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
        4
    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,但是大概思路就是这样的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5034 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 09:52 · PVG 17:52 · LAX 01:52 · JFK 04:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.