|
@@ -36,23 +36,7 @@ export function getPageInfoClean() {
|
|
)
|
|
)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
-export function getPageInfoClean() {
|
|
|
|
- return new Promise((res, rej) => {
|
|
|
|
- chrome.runtime.sendMessage(
|
|
|
|
- {
|
|
|
|
- type: 'FROM_SIDE_PANEL_TO_GET_PAGE_INFO_CLEAN',
|
|
|
|
- },
|
|
|
|
- (response) => {
|
|
|
|
- if (chrome.runtime.lastError) {
|
|
|
|
- console.error('消息发送错误:', chrome.runtime.lastError, 555)
|
|
|
|
- rej(chrome.runtime.lastError)
|
|
|
|
- } else {
|
|
|
|
- res(response.data)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- })
|
|
|
|
-}
|
|
|
|
|
|
+
|
|
export function handleInput(xlsxData, formMap) {
|
|
export function handleInput(xlsxData, formMap) {
|
|
chrome.runtime.sendMessage({
|
|
chrome.runtime.sendMessage({
|
|
type: 'FROM_SIDE_PANEL_TO_INPUT_FORM',
|
|
type: 'FROM_SIDE_PANEL_TO_INPUT_FORM',
|
|
@@ -116,6 +100,7 @@ export function downloadFile(file) {
|
|
}
|
|
}
|
|
|
|
|
|
export function domToCanvas() {
|
|
export function domToCanvas() {
|
|
|
|
+
|
|
return new Promise((resolve, reject) => {
|
|
return new Promise((resolve, reject) => {
|
|
// 检查是否已经存在 Shadow Host
|
|
// 检查是否已经存在 Shadow Host
|
|
const existingHost = document.querySelector('[data-shadow-host="true"]')
|
|
const existingHost = document.querySelector('[data-shadow-host="true"]')
|
|
@@ -123,8 +108,25 @@ export function domToCanvas() {
|
|
existingHost.remove()
|
|
existingHost.remove()
|
|
}
|
|
}
|
|
const host = document.createElement('div')
|
|
const host = document.createElement('div')
|
|
|
|
+ // document.getElementsByTagName('html')[0].style.overflow = 'hidden'
|
|
host.setAttribute('data-shadow-host', 'true') // 标记 Shadow Host
|
|
host.setAttribute('data-shadow-host', 'true') // 标记 Shadow Host
|
|
document.body.appendChild(host)
|
|
document.body.appendChild(host)
|
|
|
|
+
|
|
|
|
+ let scrollX = window.pageXOffset || document.documentElement.scrollLeft
|
|
|
|
+ let scrollY = window.pageYOffset || document.documentElement.scrollTop
|
|
|
|
+ // 使用requestAnimationFrame优化滚动监听
|
|
|
|
+ let ticking = false;
|
|
|
|
+ function opServe() {
|
|
|
|
+ if (!ticking) {
|
|
|
|
+ window.requestAnimationFrame(function() {
|
|
|
|
+ scrollY = window.pageYOffset || document.documentElement.scrollTop
|
|
|
|
+ scrollX = window.pageXOffset || document.documentElement.scrollLeft
|
|
|
|
+ ticking = false;
|
|
|
|
+ });
|
|
|
|
+ ticking = true;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ window.addEventListener('scroll', opServe, { passive: true });
|
|
const shadowRoot = host.attachShadow({ mode: 'open' })
|
|
const shadowRoot = host.attachShadow({ mode: 'open' })
|
|
// 创建遮罩层
|
|
// 创建遮罩层
|
|
const overlay = document.createElement('div')
|
|
const overlay = document.createElement('div')
|
|
@@ -136,7 +138,9 @@ export function domToCanvas() {
|
|
overlay.style.height = '100%'
|
|
overlay.style.height = '100%'
|
|
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
|
|
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
|
|
overlay.style.zIndex = '9999'
|
|
overlay.style.zIndex = '9999'
|
|
- overlay.style.cursor = 'crosshair'
|
|
|
|
|
|
+ overlay.style.cursor = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="2" fill="red"/><line x1="16" y1="0" x2="16" y2="12" stroke="black" stroke-width="2"/><line x1="16" y1="20" x2="16" y2="32" stroke="black" stroke-width="2"/><line x1="0" y1="16" x2="12" y2="16" stroke="black" stroke-width="2"/><line x1="20" y1="16" x2="32" y2="16" stroke="black" stroke-width="2"/></svg>') 16 16, crosshair`
|
|
|
|
+
|
|
|
|
+ // overlay.style.cursor = 'crosshair'
|
|
shadowRoot.appendChild(overlay)
|
|
shadowRoot.appendChild(overlay)
|
|
|
|
|
|
// 创建选择框
|
|
// 创建选择框
|
|
@@ -148,6 +152,8 @@ export function domToCanvas() {
|
|
selectionBox.style.pointerEvents = 'none'
|
|
selectionBox.style.pointerEvents = 'none'
|
|
overlay.appendChild(selectionBox)
|
|
overlay.appendChild(selectionBox)
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
let isSelecting = false
|
|
let isSelecting = false
|
|
let startX, startY, endX, endY
|
|
let startX, startY, endX, endY
|
|
|
|
|
|
@@ -185,14 +191,17 @@ export function domToCanvas() {
|
|
x: parseInt(selectionBox.style.left),
|
|
x: parseInt(selectionBox.style.left),
|
|
y: parseInt(selectionBox.style.top),
|
|
y: parseInt(selectionBox.style.top),
|
|
width: parseInt(selectionBox.style.width),
|
|
width: parseInt(selectionBox.style.width),
|
|
- height: parseInt(selectionBox.style.height)
|
|
|
|
|
|
+ height: parseInt(selectionBox.style.height),
|
|
|
|
+ scrollX,
|
|
|
|
+ scrollY
|
|
}
|
|
}
|
|
- console.log(rect)
|
|
|
|
// 移除遮罩层和选择框
|
|
// 移除遮罩层和选择框
|
|
overlay.remove()
|
|
overlay.remove()
|
|
|
|
+ window.removeEventListener('scroll', opServe, { passive: true });
|
|
|
|
+ console.log(rect)
|
|
html2canvas(document.body, {
|
|
html2canvas(document.body, {
|
|
- x: rect.left,
|
|
|
|
- y: rect.top,
|
|
|
|
|
|
+ x: rect.x + rect.scrollX,
|
|
|
|
+ y: rect.y + rect.scrollY,
|
|
width: rect.width,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
height: rect.height,
|
|
backgroundColor: null, // 背景透明
|
|
backgroundColor: null, // 背景透明
|
|
@@ -203,6 +212,8 @@ export function domToCanvas() {
|
|
const base64Data = canvas.toDataURL('image/png', 0.9); // 可调整质量参数
|
|
const base64Data = canvas.toDataURL('image/png', 0.9); // 可调整质量参数
|
|
resolve(base64Data);
|
|
resolve(base64Data);
|
|
}).catch((error) => {
|
|
}).catch((error) => {
|
|
|
|
+ console.log(error);
|
|
|
|
+
|
|
reject(error)
|
|
reject(error)
|
|
})
|
|
})
|
|
})
|
|
})
|