使用 Canvas 实现一个类似 Google 的可视化的页面错误反馈库

使用 Canvas 实现一个类似 Google 的可视化的页面错误反馈库

iframe 嵌套 iframe

iframe 包含 复制的 HTML 页面 和支持可以拖拽的工具栏

鼠标经过上面，智能识别 block 元素，高亮突出显示

mouseover / hover

CSS 黑科技

UI 结构检测，加 1px 边框

// UI 结构检测，加 1px 边框

[].forEach.call($$("*"), function(a){
   a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

// OR
Array.prototype.forEach.call(document.querySelectorAll('*'),  dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`);

Command Line API

Chrome

$;
ƒ $(selector, [startNode]) { [Command Line API] }
$$;
ƒ $$(selector, [startNode]) { [Command Line API] }

Google Translate

https://translate.google.cn/?sl=en&tl=zh-CN&text=%3F%3F%3F&op=translate

发送反馈

有反馈意见？我们非常期待收到您的宝贵意见，但请勿透露敏感信息。有问题？请访问帮助中心或联系支持团队。

附上屏幕截图

屏幕截图预览

点击可突显或隐藏信息

要出于法律原因请求更改内容，请前往法律帮助页面。系统可能会将部分帐号和系统信息发送给 Google。

我们将根据我们的隐私权政策和服务条款使用您提供的信息帮助解决技术问题和改进我们的服务。

发送

标上黄色可用于突显问题，涂黑则可用来隐藏敏感信息

标注

Base64 image

HTML Custom Elements

<div key="feedback-panel-container" style="">
<uf-annotate-page>
<div style="align-items: center; display: -webkit-flex; flex-direction: column; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2;">

<div aria-atomic="true" aria-live="polite" style="background-color: rgba(255, 255, 255, 0.6); border-radius: 12px; color: rgb(117, 117, 117); font: 400 34px / 40px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; margin-bottom: 72px; padding: 22px 0px; text-align: center; visibility: hidden; width: 656px;">标上黄色可用于突显问题，涂黑则可用来隐藏敏感信息</div>

<div key="toolbar" role="toolbar" style="align-items: center; background-color: white; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px, rgba(0, 0, 0, 0.2) 0px 11px 15px -7px; cursor: pointer; display: -webkit-inline-flex; flex-direction: row; height: 56px; min-width: 232px; pointer-events: auto;">

<div key="grippy" role="button" aria-describedby="ADC667D4-7BC0-4A0C-8441-CE1CEC590BEB" style="cursor: -webkit-grab; height: 56px; padding: 0px 12px; position: relative;">
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="Drag" fill="#BDBDBD" height="56" width="16" viewBox="-2 2 12 12"><circle cx="1.5" cy="1.5" r="1.5"></circle><circle cx="1.5" cy="7.5" r="1.5"></circle><circle cx="1.5" cy="13.5" r="1.5"></circle><circle cx="6.5" cy="1.5" r="1.5"></circle><circle cx="6.5" cy="7.5" r="1.5"></circle><circle cx="6.5" cy="13.5" r="1.5"></circle>
</svg>

<div id="ADC667D4-7BC0-4A0C-8441-CE1CEC590BEB" key="tooltip" style="background-color: rgb(97, 97, 97); border-radius: 2px; box-sizing: border-box; color: white; display: none; left: 50%; font: 400 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 32px; opacity: 0.9; padding: 6px 16px; position: absolute; top: 70px; transform: translateX(-50%); white-space: nowrap;">移动工具栏</div>
</div>

<uf-annotator-button key="highlight" style="display: -webkit-flex; position: relative;">
<button type="button" aria-pressed="true" aria-describedby="F801D60C-16A7-4E50-9E21-2F57D94C4C7D" key="highlight" style="align-items: center; background-color: rgb(224, 224, 224); border: none; box-sizing: border-box; cursor: pointer; display: -webkit-flex; justify-content: center; outline: none; padding: 10px; pointer-events: auto; position: relative; height: 56px; width: 56px;">
<span style="display: inline-block; position: relative; height: 36px; width: 36px;">
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" height="36" width="36" fill="#FDD835"><path d="M3 3h18v18H3z"></path></svg>
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#757575" viewBox="0 0 24 24" height="36" width="36" style="left: 0px; position: absolute; top: 0px;"><path d="M21 17h-2.58l2.51 2.56c-.18.69-.73 1.26-1.41 1.44L17 18.5V21h-2v-6h6v2zM19 7h2v2h-2V7zm2-2h-2V3.08c1.1 0 2 .92 2 1.92zm-6-2h2v2h-2V3zm4 8h2v2h-2v-2zM9 21H7v-2h2v2zM5 9H3V7h2v2zm0-5.92V5H3c0-1 1-1.92 2-1.92zM5 17H3v-2h2v2zM9 5H7V3h2v2zm4 0h-2V3h2v2zm0 16h-2v-2h2v2zm-8-8H3v-2h2v2zm0 8.08C3.9 21.08 3 20 3 19h2v2.08z"></path>
</svg>
</span>
</button>

<div id="F801D60C-16A7-4E50-9E21-2F57D94C4C7D" key="tooltip" style="background-color: rgb(97, 97, 97); border-radius: 2px; box-sizing: border-box; color: white; display: none; left: 50%; font: 400 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 32px; opacity: 0.9; padding: 6px 16px; position: absolute; top: 70px; transform: translateX(-50%); white-space: nowrap;">突显问题</div>

</uf-annotator-button>

<uf-annotator-button key="blackout" style="display: -webkit-flex; position: relative;">

<button type="button" aria-pressed="false" aria-describedby="429CB63E-C571-47F8-A9FF-31D8740609BD" key="blackout" style="align-items: center; background-color: rgb(255, 255, 255); border: none; box-sizing: border-box; cursor: pointer; display: -webkit-flex; justify-content: center; outline: none; padding: 10px; pointer-events: auto; position: relative; height: 56px; width: 56px;">
<span style="display: inline-block; position: relative; height: 36px; width: 36px;">
<svg xmlns="https://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24" height="36" width="36" fill="#000"><path d="M3 3h18v18H3z"></path></svg>
</span>
</button>
<div id="429CB63E-C571-47F8-A9FF-31D8740609BD" key="tooltip" style="background-color: rgb(97, 97, 97); border-radius: 2px; box-sizing: border-box; color: white; display: none; left: 50%; font: 400 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 32px; opacity: 0.9; padding: 6px 16px; position: absolute; top: 70px; transform: translateX(-50%); white-space: nowrap;">隐藏敏感信息</div>

</uf-annotator-button>

<uf-material-button key="done" style="display: inline-flex;">

<label style="align-items: center; align-self: stretch; box-sizing: border-box; cursor: pointer; display: -webkit-inline-flex; min-height: 48px; padding: 0px 8px; color: rgb(66, 133, 244); pointer-events: auto;">
<button type="button" key="done" style="background-color: transparent; border-color: transparent; border-radius: 2px; box-sizing: border-box; color: inherit; cursor: pointer; font: 500 14px / 20px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 36px; margin: 0px; min-width: 64px; opacity: 1; outline: none; padding: 0px 8px;">
<span style="pointer-events: none;">完成</span>
</button>
</label>

</uf-material-button>

</div>
</div>

</uf-annotate-page>
</div>

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---