feat: v2.0 — 插件改造，集成 PPTX 导出
改造内容： - 改名 Web to Pixso → Web to PPT - 删除 pixso-plugin/、element-picker.js、popup-panel.js - 新增 convert-browser.js（浏览器版转化逻辑） - 新增 lib-pptxgen.js（pptxgenjs 浏览器 bundle） - 重写 popup.js（触发捕获→转化→下载） - 重写 background.js（缓存采集数据，支持 WEB_TO_PPT_GET_DATA） - manifest.json 改名 + 添加 default_popup 流程：popup 点击导出 → background 抓取 DOM → popup 运行转化 → chrome.downloads 下载 PPTX
This commit is contained in:
李进
+46
-191
@@ -1,7 +1,5 @@
|
||||
const CAPTURE_FILE = "capture.js";
|
||||
const RUNNER_FILE = "runner.js";
|
||||
const POPUP_PANEL_FILE = "popup-panel.js";
|
||||
const ELEMENT_PICKER_FILE = "element-picker.js";
|
||||
const SETTINGS_KEY = "webToPixsoSettings";
|
||||
const DEFAULT_SETTINGS = {
|
||||
useProxy: false,
|
||||
@@ -12,6 +10,9 @@ const DEFAULT_SETTINGS = {
|
||||
const MIN_CAPTURE_WIDTH = 320;
|
||||
const MAX_CAPTURE_WIDTH = 3840;
|
||||
|
||||
// 缓存最近一次采集数据，供 popup 获取
|
||||
let lastCaptureData = null;
|
||||
|
||||
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
function normalizeSettings(value = {}) {
|
||||
@@ -43,7 +44,6 @@ function assertCaptureableTab(tab) {
|
||||
if (!tab?.id || !tab.url) {
|
||||
throw new Error("没有可采集的当前标签页");
|
||||
}
|
||||
|
||||
if (/^(chrome|edge|about|devtools|chrome-extension):/i.test(tab.url)) {
|
||||
throw new Error("浏览器内置页面不支持采集，请切换到普通网页");
|
||||
}
|
||||
@@ -60,22 +60,18 @@ async function runCapture(tabId, options) {
|
||||
target: { tabId },
|
||||
files: [CAPTURE_FILE]
|
||||
});
|
||||
|
||||
await chrome.scripting.executeScript({
|
||||
target: { tabId },
|
||||
files: [RUNNER_FILE]
|
||||
});
|
||||
|
||||
const [{ result }] = await chrome.scripting.executeScript({
|
||||
target: { tabId },
|
||||
func: captureOptions => window.__webToPixsoRunCapture(captureOptions),
|
||||
args: [options]
|
||||
});
|
||||
|
||||
if (!result) {
|
||||
throw new Error("页面没有返回采集结果");
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -133,9 +129,7 @@ async function prepareCaptureViewport(tab, requestedWidth) {
|
||||
await chrome.windows.update(tab.windowId, { state: originalState });
|
||||
}
|
||||
await delay(250);
|
||||
} catch {
|
||||
// Restoring the user's window is best effort only.
|
||||
}
|
||||
} catch {}
|
||||
};
|
||||
|
||||
try {
|
||||
@@ -157,7 +151,7 @@ async function prepareCaptureViewport(tab, requestedWidth) {
|
||||
}
|
||||
|
||||
if (Math.abs(currentViewportWidth - targetWidth) > 2) {
|
||||
throw new Error(`采集视口未生效：目标 ${targetWidth}px，实际 ${currentViewportWidth}px。请退出全屏或手动放宽浏览器窗口后重试。`);
|
||||
throw new Error(`采集视口未生效：目标 ${targetWidth}px，实际 ${currentViewportWidth}px`);
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -203,7 +197,7 @@ async function downloadCapture(data) {
|
||||
.replace(/[\\/:*?"<>|]+/g, "-")
|
||||
.replace(/\s+/g, "-")
|
||||
.slice(0, 64) || "webpage";
|
||||
const filename = `web-to-pixso/${safeTitle}-${Date.now()}.json`;
|
||||
const filename = `web-to-ppt/${safeTitle}-${Date.now()}.json`;
|
||||
|
||||
await chrome.downloads.download({
|
||||
url,
|
||||
@@ -214,206 +208,67 @@ async function downloadCapture(data) {
|
||||
return filename;
|
||||
}
|
||||
|
||||
async function startCapture(options) {
|
||||
const settings = normalizeSettings(options);
|
||||
await chrome.storage.local.set({ [SETTINGS_KEY]: settings });
|
||||
const tab = await getActiveTab();
|
||||
const data = await captureCurrentTab(tab, settings);
|
||||
const filename = await downloadCapture(data);
|
||||
return {
|
||||
ok: true,
|
||||
filename,
|
||||
actualViewportWidth: data.source?.actualViewportWidth,
|
||||
requestedViewportWidth: data.source?.requestedViewportWidth,
|
||||
usedTemporaryWindow: Boolean(data.capture?.usedTemporaryWindow)
|
||||
};
|
||||
}
|
||||
|
||||
async function startCaptureFromSender(options, sender) {
|
||||
const settings = normalizeSettings(options);
|
||||
await chrome.storage.local.set({ [SETTINGS_KEY]: settings });
|
||||
const tab = sender?.tab || await getActiveTab();
|
||||
assertCaptureableTab(tab);
|
||||
const data = await captureCurrentTab(tab, settings);
|
||||
const filename = await downloadCapture(data);
|
||||
return {
|
||||
ok: true,
|
||||
filename,
|
||||
actualViewportWidth: data.source?.actualViewportWidth,
|
||||
requestedViewportWidth: data.source?.requestedViewportWidth,
|
||||
usedTemporaryWindow: Boolean(data.capture?.usedTemporaryWindow)
|
||||
};
|
||||
}
|
||||
|
||||
async function captureClipboardFromSender(options, sender) {
|
||||
const settings = normalizeSettings(options);
|
||||
await chrome.storage.local.set({ [SETTINGS_KEY]: settings });
|
||||
const tab = sender?.tab || await getActiveTab();
|
||||
assertCaptureableTab(tab);
|
||||
const data = await captureCurrentTab(tab, settings);
|
||||
return {
|
||||
ok: true,
|
||||
json: JSON.stringify(data, null, 2),
|
||||
actualViewportWidth: data.source?.actualViewportWidth,
|
||||
requestedViewportWidth: data.source?.requestedViewportWidth,
|
||||
usedTemporaryWindow: Boolean(data.capture?.usedTemporaryWindow)
|
||||
};
|
||||
}
|
||||
|
||||
async function startElementCapture(options, sender) {
|
||||
const settings = {
|
||||
...normalizeSettings(options),
|
||||
captureWidth: null,
|
||||
selectionId: options?.selectionId,
|
||||
selectionWidth: Math.max(1, Math.round(Number(options?.selectionWidth || 0))),
|
||||
captureMode: "mixed"
|
||||
};
|
||||
const tab = sender?.tab || await getActiveTab();
|
||||
assertCaptureableTab(tab);
|
||||
const data = await runCapture(tab.id, settings);
|
||||
const filename = await downloadCapture(data);
|
||||
return {
|
||||
ok: true,
|
||||
filename,
|
||||
actualViewportWidth: data.source?.actualViewportWidth,
|
||||
requestedViewportWidth: data.source?.requestedViewportWidth,
|
||||
selectionWidth: data.import?.defaultWidth
|
||||
};
|
||||
}
|
||||
|
||||
async function fetchWithTimeout(url, timeout = 10000) {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), timeout);
|
||||
|
||||
try {
|
||||
return await fetch(url, {
|
||||
signal: controller.signal,
|
||||
credentials: "include",
|
||||
cache: "force-cache"
|
||||
});
|
||||
} finally {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
}
|
||||
|
||||
function arrayBufferToBase64(buffer) {
|
||||
const bytes = new Uint8Array(buffer);
|
||||
const chunkSize = 0x8000;
|
||||
let binary = "";
|
||||
|
||||
for (let index = 0; index < bytes.length; index += chunkSize) {
|
||||
binary += String.fromCharCode(...bytes.subarray(index, index + chunkSize));
|
||||
}
|
||||
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
async function proxyFetchAsset(url) {
|
||||
if (!/^https?:\/\//i.test(url)) {
|
||||
return { ok: false, error: "仅支持 http/https 图片代理" };
|
||||
}
|
||||
|
||||
const response = await fetchWithTimeout(url, 12000);
|
||||
if (!response.ok) {
|
||||
return { ok: false, status: response.status, error: `HTTP ${response.status}` };
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type") || "application/octet-stream";
|
||||
const buffer = await response.arrayBuffer();
|
||||
|
||||
// 消息处理
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
// 采集并下载 JSON（兼容旧流程）
|
||||
if (message?.type === "PIXSO_CAPTURE_START") {
|
||||
(async () => {
|
||||
const settings = normalizeSettings(message.options);
|
||||
await chrome.storage.local.set({ [SETTINGS_KEY]: settings });
|
||||
const tab = sender?.tab || await getActiveTab();
|
||||
assertCaptureableTab(tab);
|
||||
const data = await captureCurrentTab(tab, settings);
|
||||
lastCaptureData = data; // 缓存数据
|
||||
const filename = await downloadCapture(data);
|
||||
return {
|
||||
ok: true,
|
||||
status: response.status,
|
||||
contentType,
|
||||
base64: arrayBufferToBase64(buffer)
|
||||
filename,
|
||||
actualViewportWidth: data.source?.actualViewportWidth,
|
||||
requestedViewportWidth: data.source?.requestedViewportWidth
|
||||
};
|
||||
}
|
||||
|
||||
async function captureVisibleTab(sender) {
|
||||
if (!sender?.tab?.windowId || !chrome.tabs?.captureVisibleTab) {
|
||||
return { ok: false, error: "当前标签页截图不可用" };
|
||||
})()
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
const dataUrl = await chrome.tabs.captureVisibleTab(sender.tab.windowId, {
|
||||
format: "png"
|
||||
});
|
||||
return { ok: true, dataUrl };
|
||||
} catch (error) {
|
||||
return {
|
||||
ok: false,
|
||||
error: error.message || String(error),
|
||||
nonFatal: true
|
||||
};
|
||||
// 获取最近一次采集数据（供 popup 转化用）
|
||||
if (message?.type === "WEB_TO_PPT_GET_DATA") {
|
||||
if (lastCaptureData) {
|
||||
sendResponse({ ok: true, data: lastCaptureData });
|
||||
} else {
|
||||
// 如果没有缓存，重新采集
|
||||
(async () => {
|
||||
const settings = normalizeSettings({});
|
||||
const tab = await getActiveTab();
|
||||
const data = await captureCurrentTab(tab, settings);
|
||||
lastCaptureData = data;
|
||||
return { ok: true, data };
|
||||
})()
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
async function showInPagePanel(tab) {
|
||||
assertCaptureableTab(tab);
|
||||
await chrome.scripting.executeScript({
|
||||
target: { tabId: tab.id },
|
||||
files: [ELEMENT_PICKER_FILE, POPUP_PANEL_FILE]
|
||||
});
|
||||
await chrome.scripting.executeScript({
|
||||
target: { tabId: tab.id },
|
||||
func: () => window.__webToPixsoShowPanel?.()
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
// 安装时初始化设置
|
||||
chrome.runtime.onInstalled.addListener(() => {
|
||||
chrome.storage.local.get({ [SETTINGS_KEY]: DEFAULT_SETTINGS }).then(result => {
|
||||
chrome.storage.local.set({ [SETTINGS_KEY]: normalizeSettings(result[SETTINGS_KEY]) });
|
||||
});
|
||||
});
|
||||
|
||||
chrome.action.onClicked.addListener(tab => {
|
||||
showInPagePanel(tab).catch(error => {
|
||||
console.warn("[Web to Pixso] Failed to open panel", error);
|
||||
});
|
||||
});
|
||||
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
if (message?.type === "PIXSO_CAPTURE_START") {
|
||||
startCapture(message.options)
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
return true;
|
||||
}
|
||||
|
||||
if (message?.type === "PIXSO_CAPTURE_ELEMENT_START") {
|
||||
startElementCapture(message.options, sender)
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
return true;
|
||||
}
|
||||
|
||||
if (message?.type === "PIXSO_CAPTURE_CURRENT_TAB") {
|
||||
startCaptureFromSender(message.options, sender)
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
return true;
|
||||
}
|
||||
|
||||
if (message?.type === "PIXSO_CAPTURE_CLIPBOARD") {
|
||||
captureClipboardFromSender(message.options, sender)
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
return true;
|
||||
}
|
||||
|
||||
if (message?.type === "PIXSO_CAPTURE_FETCH_ASSET") {
|
||||
proxyFetchAsset(message.url)
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
return true;
|
||||
}
|
||||
|
||||
if (message?.type === "PIXSO_CAPTURE_VISIBLE_TAB") {
|
||||
captureVisibleTab(sender)
|
||||
.then(sendResponse)
|
||||
.catch(error => sendResponse({ ok: false, error: error.message || String(error) }));
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
// 点击图标打开 popup（MV3 默认行为）
|
||||
|
||||
@@ -0,0 +1,580 @@
|
||||
/**
|
||||
* convert-browser.js — 浏览器兼容版转化逻辑
|
||||
*
|
||||
* 从 convert-w2p.js 移植，去掉了 fs/path/https/child_process 依赖。
|
||||
* 用 fetch() 替代 https.get()，用 jszip 替代 zip 命令行。
|
||||
*
|
||||
* 导出：convertToPptx(jsonData) → Promise<Blob>
|
||||
*/
|
||||
|
||||
// ===== 颜色工具 =====
|
||||
function rgbaToHex(rgbaStr) {
|
||||
if (typeof rgbaStr !== 'string') return null;
|
||||
rgbaStr = rgbaStr.trim();
|
||||
if (rgbaStr === 'transparent' || rgbaStr === 'rgba(0,0,0,0)' || rgbaStr === 'rgba(0, 0, 0, 0)') return null;
|
||||
const match = rgbaStr.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([\d.]+))?\s*\)$/);
|
||||
if (!match) return null;
|
||||
const r = parseInt(match[1], 10);
|
||||
const g = parseInt(match[2], 10);
|
||||
const b = parseInt(match[3], 10);
|
||||
const a = match[4] !== undefined ? parseFloat(match[4]) : 1;
|
||||
if (a === 0) return null;
|
||||
return ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
|
||||
}
|
||||
|
||||
// ===== 图片下载 =====
|
||||
async function downloadImage(url) {
|
||||
try {
|
||||
const response = await fetch(url, { signal: AbortSignal.timeout(8000) });
|
||||
if (!response.ok) return null;
|
||||
const buffer = await response.arrayBuffer();
|
||||
const bytes = new Uint8Array(buffer);
|
||||
let binary = '';
|
||||
for (let i = 0; i < bytes.length; i += 0x8000) {
|
||||
binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
|
||||
}
|
||||
return 'data:image/png;base64,' + btoa(binary);
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
// ===== Slide 识别 =====
|
||||
const SLIDE_NAME_RE = /^(slide([- ]\w+)*|page)$/i;
|
||||
const STRUCTURAL_TAGS = new Set(['HTML', 'BODY', 'HEAD', 'CANVAS']);
|
||||
|
||||
function collectIds(node, set) {
|
||||
if (!node) return;
|
||||
if (node.id) set.add(node.id);
|
||||
if (node.children) for (const c of node.children) collectIds(c, set);
|
||||
}
|
||||
|
||||
function isSlideCandidate(node, canvasArea) {
|
||||
if (!node || node.type !== 'FRAME') return false;
|
||||
if (!node.rect) return false;
|
||||
if (node.layerGroup === 'comparison') return false;
|
||||
if (STRUCTURAL_TAGS.has(node.tag)) return false;
|
||||
if (!node.children || node.children.length === 0) return false;
|
||||
if (node.name && SLIDE_NAME_RE.test(node.name.toLowerCase())) return true;
|
||||
const rw = node.rect.width ?? node.rect.w ?? 0;
|
||||
const rh = node.rect.height ?? node.rect.h ?? 0;
|
||||
return canvasArea > 0 && (rw * rh) > canvasArea * 0.5;
|
||||
}
|
||||
|
||||
function findSlides(node, canvasArea) {
|
||||
if (!node) return [];
|
||||
const results = [];
|
||||
if (node.children) for (const c of node.children) results.push(...findSlides(c, canvasArea));
|
||||
if (results.length > 0) return results;
|
||||
if (isSlideCandidate(node, canvasArea)) results.push(node);
|
||||
return results;
|
||||
}
|
||||
|
||||
// ===== 子节点收集 =====
|
||||
function collectSlideChildren(node, slideX, slideY, parentW, depth) {
|
||||
depth = depth || 0;
|
||||
if (!node || !node.rect) return [];
|
||||
const results = [];
|
||||
const nr = node.rect;
|
||||
const rw = nr.width ?? nr.w;
|
||||
const rh = nr.height ?? nr.h;
|
||||
if (node.type !== 'RECTANGLE' && node.layerGroup !== 'comparison') {
|
||||
results.push({
|
||||
id: node.id, type: node.type, name: node.name, tag: node.tag,
|
||||
rect: { x: nr.x - slideX, y: nr.y - slideY, w: rw, h: rh },
|
||||
styles: node.styles || {}, src: node.src || node.text || '',
|
||||
layerGroup: node.layerGroup || '',
|
||||
backgroundImages: node.backgroundImages,
|
||||
parentW: parentW || rw,
|
||||
_depth: depth
|
||||
});
|
||||
}
|
||||
if (node.type === 'RECTANGLE' && node.layerGroup === 'comparison' && node.backgroundImages?.length > 0) {
|
||||
results.push({
|
||||
id: node.id, type: 'IMAGE', name: node.name, tag: 'RASTER',
|
||||
rect: { x: nr.x - slideX, y: nr.y - slideY, w: rw, h: rh },
|
||||
styles: node.styles || {}, src: '',
|
||||
layerGroup: node.layerGroup || '',
|
||||
parentW: parentW || rw,
|
||||
backgroundImages: node.backgroundImages,
|
||||
_depth: depth
|
||||
});
|
||||
}
|
||||
if (node.children && Array.isArray(node.children)) {
|
||||
for (const child of node.children) {
|
||||
results.push(...collectSlideChildren(child, slideX, slideY, rw, depth + 1));
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
// ===== 图片下载预处理 =====
|
||||
async function fetchNodeImages(node, pageUrl, assets) {
|
||||
if (!node) return;
|
||||
if (node.tag === 'IMG' && node.attributes?.src && (!node.backgroundImages || node.backgroundImages.length === 0)) {
|
||||
const origin = pageUrl.replace(/^(https?:\/\/[^\/]+).*/, '$1');
|
||||
let src = node.attributes.src;
|
||||
if (src.startsWith('/')) src = origin + src;
|
||||
else if (!src.startsWith('http')) src = pageUrl.replace(/\/[^\/]*$/, '/') + src;
|
||||
const data = await downloadImage(src);
|
||||
if (data) {
|
||||
const key = 'img-' + (node.id || Math.random().toString(36).slice(2));
|
||||
assets[key] = { data };
|
||||
node.backgroundImages = [key];
|
||||
node.type = 'IMAGE';
|
||||
}
|
||||
}
|
||||
if (node.children) for (const c of node.children) await fetchNodeImages(c, pageUrl, assets);
|
||||
}
|
||||
|
||||
// ===== 主转化函数 =====
|
||||
async function convertToPptx(input, onProgress) {
|
||||
if (!input || !input.nodes) throw new Error('无效输入：缺少 nodes 字段');
|
||||
|
||||
const inputRoot = input.nodes;
|
||||
const canvas = input.canvas || {};
|
||||
const assets = input.assets || {};
|
||||
const pageUrl = input.source?.url || '';
|
||||
|
||||
// 1. 下载图片
|
||||
if (onProgress) onProgress('下载图片...');
|
||||
await fetchNodeImages(inputRoot, pageUrl, assets);
|
||||
|
||||
// 2. 识别 slide
|
||||
const canvasArea = (canvas.width || 0) * (canvas.height || 0);
|
||||
const slideContainers = findSlides(inputRoot, canvasArea);
|
||||
|
||||
// 3. 收集子节点
|
||||
const slideGroups = slideContainers.map(s => ({
|
||||
name: s.name,
|
||||
slideRect: { x: s.rect.x, y: s.rect.y, w: s.rect.width ?? s.rect.w, h: s.rect.height ?? s.rect.h },
|
||||
children: collectSlideChildren(s, s.rect.x, s.rect.y, null, 0)
|
||||
}));
|
||||
for (const sg of slideGroups) {
|
||||
if (sg.children.length > 0 && sg.children[0].name === sg.name) sg.children.shift();
|
||||
}
|
||||
|
||||
// 4. 游离节点
|
||||
const slideSubtreeIds = new Set();
|
||||
for (const sc of slideContainers) collectIds(sc, slideSubtreeIds);
|
||||
|
||||
function collectOrphans(node) {
|
||||
if (!node || !node.rect) return [];
|
||||
const results = [];
|
||||
const nr = node.rect;
|
||||
if (!slideSubtreeIds.has(node.id) && node.type !== 'RECTANGLE' && node.layerGroup !== 'comparison') {
|
||||
results.push({
|
||||
id: node.id, type: node.type, name: node.name, tag: node.tag,
|
||||
rect: { x: nr.x, y: nr.y, w: nr.width ?? nr.w, h: nr.height ?? nr.h },
|
||||
styles: node.styles || {}, src: node.src || node.text || '',
|
||||
layerGroup: node.layerGroup || ''
|
||||
});
|
||||
}
|
||||
if (node.children) for (const c of node.children) {
|
||||
if (slideSubtreeIds.has(c.id)) continue;
|
||||
results.push(...collectOrphans(c));
|
||||
}
|
||||
return results;
|
||||
}
|
||||
const orphans = collectOrphans(inputRoot);
|
||||
|
||||
for (const or of orphans) {
|
||||
if (or.rect.w == null || or.rect.h == null) continue;
|
||||
let best = null, bestDist = Infinity;
|
||||
for (const sg of slideGroups) {
|
||||
const dist = Math.abs(or.rect.y - sg.slideRect.y);
|
||||
if (dist < sg.slideRect.h && dist < bestDist) { bestDist = dist; best = sg; }
|
||||
}
|
||||
if (best) {
|
||||
const relNode = { ...or, rect: { ...or.rect } };
|
||||
relNode.rect.x = or.rect.x - best.slideRect.x;
|
||||
relNode.rect.y = or.rect.y - best.slideRect.y;
|
||||
best.children.push(relNode);
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 映射每个 slide
|
||||
const slides = [];
|
||||
const MAX_H_IN = 55.12;
|
||||
|
||||
for (const sg of slideGroups) {
|
||||
if (onProgress) onProgress('处理 ' + sg.name + '...');
|
||||
let objects = [];
|
||||
let slideBg = null;
|
||||
|
||||
// 背景色
|
||||
const slideNode = slideContainers.find(s => s.name === sg.name);
|
||||
if (slideNode?.styles) {
|
||||
const bg = slideNode.styles.backgroundColor;
|
||||
if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
|
||||
const hex = rgbaToHex(bg);
|
||||
if (hex) slideBg = { color: hex };
|
||||
}
|
||||
}
|
||||
if (!slideBg && slideNode?.styles) {
|
||||
const textColor = slideNode.styles.color;
|
||||
if (textColor) {
|
||||
const tc = rgbaToHex(textColor);
|
||||
if (tc) {
|
||||
const r = parseInt(tc.slice(0,2), 16);
|
||||
const g = parseInt(tc.slice(2,4), 16);
|
||||
const b = parseInt(tc.slice(4,6), 16);
|
||||
const lum = (r * 299 + g * 587 + b * 114) / 1000;
|
||||
if (lum > 128) {
|
||||
const canvasBg = canvas.backgroundColor ? rgbaToHex(canvas.backgroundColor) : null;
|
||||
slideBg = { color: canvasBg || '1A1A1A' };
|
||||
} else {
|
||||
slideBg = { color: 'FAFAFA' };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 排序
|
||||
sg.children.sort((a, b) => (parseInt(a.styles?.zIndex) || 0) - (parseInt(b.styles?.zIndex) || 0));
|
||||
|
||||
// 重叠去重
|
||||
const imageRects = sg.children.filter(c => c.type === 'IMAGE' && c.rect).map(c => ({
|
||||
x: Math.round(c.rect.x), y: Math.round(c.rect.y),
|
||||
w: Math.round(c.rect.w), h: Math.round(c.rect.h),
|
||||
z: parseInt(c.styles?.zIndex) || 0
|
||||
}));
|
||||
const seen = {};
|
||||
const overlapRemove = new Set();
|
||||
for (let i = sg.children.length - 1; i >= 0; i--) {
|
||||
const ci = sg.children[i];
|
||||
if (!ci.rect) continue;
|
||||
if (ci.type === 'TEXT') {
|
||||
const cx = Math.round(ci.rect.x), cy = Math.round(ci.rect.y);
|
||||
const cw = Math.round(ci.rect.w), ch = Math.round(ci.rect.h);
|
||||
const textZ = parseInt(ci.styles?.zIndex) || 0;
|
||||
for (const ir of imageRects) {
|
||||
const exactMatch = Math.abs(cx - ir.x) < 3 && Math.abs(cy - ir.y) < 3 && Math.abs(cw - ir.w) < 3 && Math.abs(ch - ir.h) < 3;
|
||||
const contained = ir.x >= cx - 5 && ir.y >= cy - 5 && ir.x + ir.w <= cx + cw + 5 && ir.y + ir.h <= cy + ch + 5;
|
||||
if ((exactMatch || contained) && ir.z >= textZ) { overlapRemove.add(ci.id); break; }
|
||||
}
|
||||
}
|
||||
const key = ci.type + ',' + Math.round(ci.rect.x) + ',' + Math.round(ci.rect.y) + ',' + Math.round(ci.rect.w) + ',' + Math.round(ci.rect.h);
|
||||
if (seen[key]) overlapRemove.add(ci.id);
|
||||
else seen[key] = true;
|
||||
}
|
||||
if (overlapRemove.size > 0) sg.children = sg.children.filter(n => !overlapRemove.has(n.id));
|
||||
|
||||
// TEXT 合并
|
||||
const textNodes = sg.children.filter(n => n.type === 'TEXT' && n.src);
|
||||
const merged = new Set();
|
||||
for (let i = 0; i < textNodes.length; i++) {
|
||||
if (merged.has(textNodes[i].id)) continue;
|
||||
const a = textNodes[i];
|
||||
const ra = a.rect;
|
||||
const group = [a];
|
||||
for (let j = i + 1; j < textNodes.length; j++) {
|
||||
if (merged.has(textNodes[j].id)) continue;
|
||||
const b = textNodes[j];
|
||||
const rb = b.rect;
|
||||
if (Math.abs(ra.y - rb.y) > 5) continue;
|
||||
const aRight = ra.x + ra.w;
|
||||
const bRight = rb.x + rb.w;
|
||||
const xAdjacent = Math.abs(aRight - rb.x) < 5 || Math.abs(bRight - ra.x) < 5;
|
||||
const xOverlap = Math.abs(ra.x - rb.x) < 5;
|
||||
if (xAdjacent || xOverlap) { group.push(b); merged.add(b.id); }
|
||||
}
|
||||
if (group.length > 1) {
|
||||
merged.add(a.id);
|
||||
group.sort((m, n) => m.rect.x - n.rect.x);
|
||||
const minX = group[0].rect.x;
|
||||
const maxRight = Math.max(...group.map(g => g.rect.x + g.rect.w));
|
||||
const minTop = Math.min(...group.map(g => g.rect.y));
|
||||
const maxBottom = Math.max(...group.map(g => g.rect.y + g.rect.h));
|
||||
const richText = group.map(g => ({
|
||||
text: g.src,
|
||||
options: {
|
||||
fontSize: Math.round(parseFloat(g.styles.fontSize) || 14),
|
||||
fontFace: (g.styles.fontFamily || 'Arial').split(',')[0].replace(/['"]/g, '').trim(),
|
||||
color: rgbaToHex(g.styles.color) || '000000',
|
||||
bold: parseInt(g.styles.fontWeight) >= 700,
|
||||
italic: g.styles.fontStyle === 'italic'
|
||||
}
|
||||
}));
|
||||
sg.children.push({
|
||||
id: 'merged-' + a.id, type: 'TEXT', _richText: richText,
|
||||
rect: { x: minX, y: minTop, w: maxRight - minX, h: maxBottom - minTop },
|
||||
styles: a.styles || {}, src: group.map(g => g.src).join(''),
|
||||
parentW: a.parentW, _merged: true
|
||||
});
|
||||
}
|
||||
}
|
||||
sg.children = sg.children.filter(n => !merged.has(n.id));
|
||||
|
||||
// contentW
|
||||
var slideW = sg.slideRect.w;
|
||||
var contentW = slideW;
|
||||
var nonOrphans = sg.children.filter(c => c.parentW != null);
|
||||
if (nonOrphans.length > 0) {
|
||||
var minX = Infinity, maxRight = 0;
|
||||
for (const ch of nonOrphans) {
|
||||
if (ch.rect) {
|
||||
if (ch.rect.x < minX) minX = ch.rect.x;
|
||||
var right = ch.rect.x + (ch.rect.w || 0);
|
||||
if (right > maxRight) maxRight = right;
|
||||
}
|
||||
}
|
||||
if (minX < Infinity && maxRight > 0) contentW = maxRight - minX;
|
||||
}
|
||||
|
||||
// clipMap
|
||||
var clipMap = {};
|
||||
function buildClipMap(node, parentClip) {
|
||||
if (!node) return;
|
||||
var myClip = parentClip;
|
||||
if (node.clipped && node.clipRect) {
|
||||
myClip = { x: node.clipRect.x, y: node.clipRect.y, w: node.clipRect.width, h: node.clipRect.height };
|
||||
}
|
||||
clipMap[node.id] = myClip;
|
||||
if (node.children) for (var c of node.children) buildClipMap(c, myClip);
|
||||
}
|
||||
if (slideNode) buildClipMap(slideNode, null);
|
||||
|
||||
// 主循环
|
||||
for (const n of sg.children) {
|
||||
if (n.type === 'RECTANGLE' && !n.backgroundImages?.length) continue;
|
||||
if (n.tag === 'BODY' || n.tag === 'HTML') continue;
|
||||
const r = n.rect;
|
||||
if (r == null || r.w == null || r.h == null) continue;
|
||||
|
||||
var clip = clipMap[n.id];
|
||||
if (clip) {
|
||||
if (r.x > clip.x + clip.w || r.x + r.w < clip.x || r.y > clip.y + clip.h || r.y + r.h < clip.y) continue;
|
||||
}
|
||||
|
||||
const S = 1 / 72;
|
||||
const opts = {
|
||||
x: Math.round(r.x * S * 1000) / 1000,
|
||||
y: Math.round(r.y * S * 1000) / 1000,
|
||||
w: Math.round(r.w * S * 1000) / 1000,
|
||||
h: Math.round(r.h * S * 1000) / 1000
|
||||
};
|
||||
|
||||
// TEXT
|
||||
if (n.type === 'TEXT' && n.src) {
|
||||
if (n.styles.display === 'none' || n.styles.visibility === 'hidden') continue;
|
||||
const st = n.styles;
|
||||
const fs = parseFloat(st.fontSize) || 14;
|
||||
opts.fontSize = Math.round(fs);
|
||||
opts.fontFace = (st.fontFamily || 'Arial').split(',')[0].replace(/['"]/g, '').trim();
|
||||
opts.color = rgbaToHex(st.color) || '000000';
|
||||
if (parseInt(st.fontWeight) >= 700 && !n._merged) opts.bold = true;
|
||||
if (st.fontStyle === 'italic') opts.italic = true;
|
||||
if (st.textAlign && st.textAlign !== 'start') opts.align = st.textAlign;
|
||||
if (st.textDecorationLine?.includes('underline')) opts.underline = true;
|
||||
if (st.textDecorationLine?.includes('line-through')) opts.strike = 'sngStrike';
|
||||
if (st.letterSpacing && st.letterSpacing !== 'normal') {
|
||||
var ls = parseFloat(st.letterSpacing);
|
||||
if (!isNaN(ls) && ls !== 0) opts.charSpacing = Math.round(ls * 72 / 96);
|
||||
}
|
||||
if (st.opacity !== undefined && st.opacity !== '' && parseFloat(st.opacity) < 1) {
|
||||
opts.transparency = Math.round((1 - parseFloat(st.opacity)) * 100);
|
||||
}
|
||||
if (st.lineHeight && st.lineHeight !== 'normal') {
|
||||
var lh = parseFloat(st.lineHeight);
|
||||
if (!isNaN(lh) && lh > 0) {
|
||||
var lhRatio = lh / fs;
|
||||
if (lhRatio > 0.5 && lhRatio < 5) opts.lineSpacingMultiple = Math.round(lhRatio * 100) / 100;
|
||||
}
|
||||
}
|
||||
|
||||
var textW = n._merged ? r.w : (n.parentW || r.w);
|
||||
if (textW > contentW * 0.8) textW = contentW;
|
||||
if (textW > contentW) textW = contentW;
|
||||
if (textW < 108) textW = 108;
|
||||
var maxW = contentW - r.x;
|
||||
if (maxW < 108) maxW = 108;
|
||||
if (textW > maxW) textW = maxW;
|
||||
opts.w = Math.round(textW / 72 * 1000) / 1000;
|
||||
|
||||
objects.push({ type: 'text', text: n._richText || n.src, options: opts });
|
||||
continue;
|
||||
}
|
||||
|
||||
// IMAGE
|
||||
if ((n.type === 'IMAGE' || n.type === 'RECTANGLE') && n.backgroundImages?.length > 0) {
|
||||
var imgKey = n.backgroundImages[0];
|
||||
var asset = assets[imgKey];
|
||||
if (asset?.data) {
|
||||
objects.push({ type: 'image', options: { x: opts.x, y: opts.y, w: opts.w, h: opts.h, data: asset.data } });
|
||||
}
|
||||
}
|
||||
|
||||
// Shape (fill color)
|
||||
if (n.styles.display === 'none' || n.styles.visibility === 'hidden') continue;
|
||||
|
||||
let fillColor = null;
|
||||
let fillTransparency = null;
|
||||
const bg = n.styles.backgroundColor;
|
||||
if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
|
||||
fillColor = rgbaToHex(bg);
|
||||
const alphaMatch = bg.match(/rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*([\d.]+)\s*\)/);
|
||||
if (alphaMatch) {
|
||||
const alpha = parseFloat(alphaMatch[1]);
|
||||
if (alpha < 1) fillTransparency = Math.round((1 - alpha) * 100);
|
||||
}
|
||||
}
|
||||
if (!fillColor) {
|
||||
const bgImg = n.styles.backgroundImage;
|
||||
if (bgImg?.startsWith('linear-gradient')) {
|
||||
const m = bgImg.match(/rgb\(\d+,\s*\d+,\s*\d+\)/);
|
||||
if (m) fillColor = rgbaToHex(m[0]);
|
||||
}
|
||||
}
|
||||
|
||||
if (fillColor) {
|
||||
var shapeOpts = { x: opts.x, y: opts.y, w: opts.w, h: opts.h, fill: { color: fillColor } };
|
||||
if (fillTransparency) shapeOpts.fill.transparency = fillTransparency;
|
||||
if (n.styles.opacity !== undefined && n.styles.opacity !== '' && parseFloat(n.styles.opacity) < 1) {
|
||||
var opTrans = Math.round((1 - parseFloat(n.styles.opacity)) * 100);
|
||||
shapeOpts.fill.transparency = Math.max(shapeOpts.fill.transparency || 0, opTrans);
|
||||
}
|
||||
|
||||
// 圆角
|
||||
var brVal = n.styles.borderTopLeftRadius;
|
||||
if (brVal && brVal !== '0px') {
|
||||
if (brVal.includes('%')) shapeOpts.rectRadius = parseFloat(brVal) / 100;
|
||||
else shapeOpts.rectRadius = parseFloat(brVal) / 72;
|
||||
}
|
||||
|
||||
// 边框
|
||||
var bw = parseFloat(n.styles.borderTopWidth);
|
||||
var bbw = parseFloat(n.styles.borderBottomWidth);
|
||||
var blw = parseFloat(n.styles.borderLeftWidth);
|
||||
var brw = parseFloat(n.styles.borderRightWidth);
|
||||
var bc = rgbaToHex(n.styles.borderTopColor);
|
||||
var bbc = rgbaToHex(n.styles.borderBottomColor);
|
||||
var blc = rgbaToHex(n.styles.borderLeftColor);
|
||||
var brc = rgbaToHex(n.styles.borderRightColor);
|
||||
var allSameBorder = bw > 0 && bbw > 0 && blw > 0 && brw > 0
|
||||
&& n.styles.borderTopStyle !== 'none'
|
||||
&& bw === bbw && bw === blw && bw === brw
|
||||
&& bc && bc === bbc && bc === blc && bc === brc;
|
||||
if (allSameBorder) {
|
||||
var bc2 = rgbaToHex(n.styles.borderTopColor);
|
||||
if (bc2) shapeOpts.line = { color: bc2, width: bw };
|
||||
}
|
||||
|
||||
// 阴影
|
||||
if (n.styles.boxShadow && n.styles.boxShadow !== 'none') {
|
||||
var shadowMatch = n.styles.boxShadow.match(/rgba?\(([^)]+)\)\s+(\d+)px\s+(\d+)px\s+(\d+)px/);
|
||||
if (shadowMatch) {
|
||||
var shadowColor = rgbaToHex('rgb(' + shadowMatch[1] + ')') || '999999';
|
||||
shapeOpts.shadow = { type: 'outer', blur: parseInt(shadowMatch[4]), offset: parseInt(shadowMatch[3]), color: shadowColor, opacity: 0.5 };
|
||||
}
|
||||
}
|
||||
|
||||
// 形状类型
|
||||
var useShape = 'rect';
|
||||
if (shapeOpts.rectRadius) {
|
||||
var brPct = parseFloat(n.styles.borderTopLeftRadius);
|
||||
var isCircle = (brPct >= 50 || (brPct.toString().includes('%') && parseFloat(brPct) >= 50)) && Math.abs(opts.w - opts.h) < 0.05;
|
||||
useShape = isCircle ? 'ellipse' : 'roundRect';
|
||||
}
|
||||
objects.push({ type: 'shape', shapeName: useShape, options: shapeOpts });
|
||||
}
|
||||
|
||||
// 四周边框线
|
||||
var sides = [
|
||||
{ key: 'borderTopWidth', yOff: 0, hOff: 0 },
|
||||
{ key: 'borderBottomWidth', yOff: 1, hOff: 0 },
|
||||
{ key: 'borderLeftWidth', xOff: 0, wOff: 0 },
|
||||
{ key: 'borderRightWidth', xOff: 1, wOff: 0 }
|
||||
];
|
||||
for (var si = 0; si < sides.length; si++) {
|
||||
var side = sides[si];
|
||||
var sbw = parseFloat(n.styles[side.key]);
|
||||
if (sbw > 0) {
|
||||
var sideKey = side.key.replace('Width', 'Color');
|
||||
var sideStyle = side.key.replace('Width', 'Style');
|
||||
if (n.styles[sideStyle] === 'none') continue;
|
||||
var sbc = rgbaToHex(n.styles[sideKey]);
|
||||
if (!sbc) continue;
|
||||
var lx = side.xOff !== undefined ? opts.x + (side.xOff === 1 ? opts.w : 0) : opts.x;
|
||||
var ly = side.yOff !== undefined ? opts.y + (side.yOff === 1 ? opts.h : 0) : opts.y;
|
||||
var lw = side.wOff !== undefined ? 0 : opts.w;
|
||||
var lh = side.hOff !== undefined ? 0 : opts.h;
|
||||
var lineOpts = { x: lx, y: ly, w: lw || 0.01, h: lh || 0.01, fill: { color: sbc }, line: { type: 'none' } };
|
||||
objects.push({ type: 'shape', shapeName: 'rect', options: lineOpts });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
slides.push({ background: slideBg, objects });
|
||||
}
|
||||
|
||||
// 6. 画布尺寸
|
||||
const slideW2 = canvas.width || (slideGroups.length > 0 ? slideGroups[0].slideRect.w : 1920);
|
||||
const slideH2 = Math.min(canvas.height || 1080, MAX_H_IN * 72);
|
||||
const sw = slideW2 / 72;
|
||||
const sh = Math.min(slideH2 / 72, MAX_H_IN);
|
||||
|
||||
return {
|
||||
presentation: { layout: 'CUSTOM', slideWidth: sw, slideHeight: sh },
|
||||
slides
|
||||
};
|
||||
}
|
||||
|
||||
// ===== Schema → PPTX Blob =====
|
||||
async function schemaToPptxBlob(schema) {
|
||||
const pres = new PptxGenJS();
|
||||
pres.defineLayout({ name: 'CUSTOM', width: schema.presentation.slideWidth, height: schema.presentation.slideHeight });
|
||||
pres.layout = 'CUSTOM';
|
||||
|
||||
for (const slideData of schema.slides) {
|
||||
const slide = pres.addSlide();
|
||||
slide.background = { fill: slideData.background?.color || 'FFFFFF' };
|
||||
for (const obj of (slideData.objects || [])) {
|
||||
const o = obj.options || {};
|
||||
if (obj.type === 'text') {
|
||||
const textOpts = {
|
||||
x: o.x, y: o.y, w: o.w, h: o.h,
|
||||
fontSize: o.fontSize || 12, fontFace: o.fontFace || 'Arial',
|
||||
color: o.color || '000000', bold: o.bold || false, align: o.align || 'left'
|
||||
};
|
||||
if (o.underline) textOpts.underline = o.underline;
|
||||
if (o.strike) textOpts.strike = o.strike;
|
||||
if (o.charSpacing) textOpts.charSpacing = o.charSpacing;
|
||||
if (o.transparency !== undefined) textOpts.transparency = o.transparency;
|
||||
if (o.lineSpacingMultiple) textOpts.lineSpacingMultiple = o.lineSpacingMultiple;
|
||||
slide.addText(obj.text || '', textOpts);
|
||||
} else if (obj.type === 'shape') {
|
||||
const st = { rect: 'rect', roundRect: 'roundRect', ellipse: 'ellipse' }[obj.shapeName] || 'rect';
|
||||
const shapeOpts = {
|
||||
x: o.x, y: o.y, w: o.w, h: o.h,
|
||||
fill: o.fill ? { color: o.fill.color, transparency: o.fill.transparency } : undefined
|
||||
};
|
||||
if (o.line) shapeOpts.line = o.line;
|
||||
else shapeOpts.line = { type: 'none' };
|
||||
if (o.shadow) shapeOpts.shadow = o.shadow;
|
||||
if (o.rectRadius) shapeOpts.rectRadius = o.rectRadius;
|
||||
slide.addShape(pres.ShapeType[st] || pres.ShapeType.rect, shapeOpts);
|
||||
} else if (obj.type === 'image') {
|
||||
slide.addImage({ x: o.x, y: o.y, w: o.w, h: o.h, data: o.data || o.path });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 生成 PPTX buffer
|
||||
const pptxBuffer = await pres.writeFile({ outputType: 'arraybuffer' });
|
||||
|
||||
// 后处理：加 type="custom"
|
||||
try {
|
||||
const zip = await JSZip.loadAsync(pptxBuffer);
|
||||
let presXml = await zip.file('ppt/presentation.xml').async('string');
|
||||
if (presXml.includes('sldSz') && !presXml.includes('type="custom"')) {
|
||||
presXml = presXml.replace(/sldSz cx="([^"]*)" cy="([^"]*)"/, 'sldSz cx="$1" cy="$2" type="custom"');
|
||||
zip.file('ppt/presentation.xml', presXml);
|
||||
return await zip.generateAsync({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
|
||||
}
|
||||
} catch {}
|
||||
|
||||
return new Blob([pptxBuffer], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
|
||||
}
|
||||
|
||||
// ===== 导出 =====
|
||||
// ===== 暴露到全局 =====
|
||||
window.WebToPPT = { convertToPptx, schemaToPptxBlob };
|
||||
@@ -1,455 +0,0 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const ROOT_ID = "__web_to_pixso_picker_root__";
|
||||
const BOX_ID = "__web_to_pixso_picker_box__";
|
||||
const LABEL_ID = "__web_to_pixso_picker_label__";
|
||||
const ATTR = "data-web-to-pixso-selection-id";
|
||||
const STORAGE_KEY = "__web_to_pixso_island_position__";
|
||||
|
||||
let currentElement = null;
|
||||
let currentSettings = null;
|
||||
let mode = "toolbar";
|
||||
let dragging = null;
|
||||
|
||||
function removePicker() {
|
||||
document.getElementById(ROOT_ID)?.remove();
|
||||
document.getElementById(BOX_ID)?.remove();
|
||||
document.getElementById(LABEL_ID)?.remove();
|
||||
document.removeEventListener("mousemove", onMouseMove, true);
|
||||
document.removeEventListener("click", onClick, true);
|
||||
document.removeEventListener("keydown", onKeyDown, true);
|
||||
document.removeEventListener("pointermove", onDragMove, true);
|
||||
document.removeEventListener("pointerup", onDragEnd, true);
|
||||
currentElement = null;
|
||||
mode = "toolbar";
|
||||
dragging = null;
|
||||
}
|
||||
|
||||
function elementName(element) {
|
||||
if (!element) return "";
|
||||
const tag = element.tagName ? element.tagName.toLowerCase() : "element";
|
||||
const id = element.id ? `#${element.id}` : "";
|
||||
const className = String(element.className || "")
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.map(item => `.${item}`)
|
||||
.join("");
|
||||
return `${tag}${id}${className}`;
|
||||
}
|
||||
|
||||
function icon(type) {
|
||||
if (type === "screen") {
|
||||
return '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M7 9h10"></path></svg>';
|
||||
}
|
||||
if (type === "select") {
|
||||
return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v3"></path><path d="M12 18v3"></path><path d="M3 12h3"></path><path d="M18 12h3"></path><path d="M5.6 5.6l2.1 2.1"></path><path d="M16.3 16.3l2.1 2.1"></path><path d="M18.4 5.6l-2.1 2.1"></path><path d="M7.7 16.3l-2.1 2.1"></path><path d="M12 9l2.2 6.1L16 13.2l2.8 2.8"></path></svg>';
|
||||
}
|
||||
if (type === "copy") {
|
||||
return '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"></rect><path d="M4 16V6a2 2 0 0 1 2-2h10"></path></svg>';
|
||||
}
|
||||
return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>';
|
||||
}
|
||||
|
||||
function rootCss() {
|
||||
return `
|
||||
#${ROOT_ID} {
|
||||
color-scheme: light;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
left: 50%;
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
transform: translateX(-50%);
|
||||
user-select: none;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
#${ROOT_ID} .w2p-island {
|
||||
align-items: stretch;
|
||||
background: rgba(36, 36, 38, 0.97);
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.22);
|
||||
color: white;
|
||||
display: flex;
|
||||
min-height: 56px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#${ROOT_ID} .w2p-action,
|
||||
#${ROOT_ID} .w2p-close,
|
||||
#${ROOT_ID} .w2p-cancel {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font: inherit;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
min-height: 56px;
|
||||
padding: 0 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#${ROOT_ID} .w2p-action {
|
||||
border-right: 1px solid rgba(255,255,255,.14);
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
}
|
||||
#${ROOT_ID} .w2p-action:hover,
|
||||
#${ROOT_ID} .w2p-close:hover,
|
||||
#${ROOT_ID} .w2p-cancel:hover {
|
||||
background: rgba(255,255,255,.1);
|
||||
}
|
||||
#${ROOT_ID} .w2p-action.active {
|
||||
background: rgba(255,255,255,.12);
|
||||
}
|
||||
#${ROOT_ID} svg {
|
||||
fill: none;
|
||||
height: 20px;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 2;
|
||||
width: 20px;
|
||||
}
|
||||
#${ROOT_ID} .w2p-close {
|
||||
min-width: 56px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
#${ROOT_ID} .w2p-status {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
min-height: 56px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
#${ROOT_ID} .w2p-text {
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#${ROOT_ID} .w2p-spinner {
|
||||
animation: w2p-spin .9s linear infinite;
|
||||
border: 2px solid rgba(255,255,255,.32);
|
||||
border-radius: 50%;
|
||||
border-top-color: #fff;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
#${ROOT_ID} .w2p-cancel {
|
||||
border-left: 1px solid rgba(255,255,255,.14);
|
||||
font-size: 15px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
#${BOX_ID} {
|
||||
background: rgba(46, 156, 255, .16);
|
||||
border: 2px dashed #1593ff;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2147483646;
|
||||
}
|
||||
#${LABEL_ID} {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 22px rgba(0,0,0,.2);
|
||||
color: #333;
|
||||
display: none;
|
||||
font: 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
padding: 8px 10px;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
@keyframes w2p-spin { to { transform: rotate(360deg); } }
|
||||
`;
|
||||
}
|
||||
|
||||
function ensureBase() {
|
||||
document.getElementById(ROOT_ID)?.remove();
|
||||
const root = document.createElement("div");
|
||||
root.id = ROOT_ID;
|
||||
const style = document.createElement("style");
|
||||
style.textContent = rootCss();
|
||||
root.appendChild(style);
|
||||
document.documentElement.appendChild(root);
|
||||
|
||||
let box = document.getElementById(BOX_ID);
|
||||
if (!box) {
|
||||
box = document.createElement("div");
|
||||
box.id = BOX_ID;
|
||||
document.documentElement.appendChild(box);
|
||||
}
|
||||
|
||||
let label = document.getElementById(LABEL_ID);
|
||||
if (!label) {
|
||||
label = document.createElement("div");
|
||||
label.id = LABEL_ID;
|
||||
document.documentElement.appendChild(label);
|
||||
}
|
||||
|
||||
restorePosition(root);
|
||||
root.addEventListener("pointerdown", onDragStart, true);
|
||||
return root;
|
||||
}
|
||||
|
||||
function restorePosition(root) {
|
||||
try {
|
||||
const saved = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "null");
|
||||
if (saved && Number.isFinite(saved.left) && Number.isFinite(saved.top)) {
|
||||
root.style.left = `${saved.left}px`;
|
||||
root.style.top = `${saved.top}px`;
|
||||
root.style.transform = "none";
|
||||
}
|
||||
} catch {
|
||||
// Keep the default centered position when storage is unavailable.
|
||||
}
|
||||
}
|
||||
|
||||
function savePosition(root) {
|
||||
const rect = root.getBoundingClientRect();
|
||||
try {
|
||||
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
|
||||
left: Math.round(rect.left),
|
||||
top: Math.round(rect.top)
|
||||
}));
|
||||
} catch {
|
||||
// Position persistence is only a convenience.
|
||||
}
|
||||
}
|
||||
|
||||
function clampIsland(root, snap) {
|
||||
const rect = root.getBoundingClientRect();
|
||||
let left = rect.left;
|
||||
let top = rect.top;
|
||||
const gap = 10;
|
||||
left = Math.max(gap, Math.min(window.innerWidth - rect.width - gap, left));
|
||||
top = Math.max(gap, Math.min(window.innerHeight - rect.height - gap, top));
|
||||
if (snap) {
|
||||
const distances = [
|
||||
{ side: "left", value: left },
|
||||
{ side: "right", value: window.innerWidth - left - rect.width },
|
||||
{ side: "top", value: top },
|
||||
{ side: "bottom", value: window.innerHeight - top - rect.height }
|
||||
].sort((a, b) => a.value - b.value);
|
||||
if (distances[0].value < 96) {
|
||||
if (distances[0].side === "left") left = gap;
|
||||
if (distances[0].side === "right") left = window.innerWidth - rect.width - gap;
|
||||
if (distances[0].side === "top") top = gap;
|
||||
if (distances[0].side === "bottom") top = window.innerHeight - rect.height - gap;
|
||||
}
|
||||
}
|
||||
root.style.left = `${Math.round(left)}px`;
|
||||
root.style.top = `${Math.round(top)}px`;
|
||||
root.style.transform = "none";
|
||||
savePosition(root);
|
||||
}
|
||||
|
||||
function onDragStart(event) {
|
||||
const target = event.target;
|
||||
if (target?.closest?.("button")) return;
|
||||
const root = document.getElementById(ROOT_ID);
|
||||
if (!root) return;
|
||||
const rect = root.getBoundingClientRect();
|
||||
dragging = {
|
||||
offsetX: event.clientX - rect.left,
|
||||
offsetY: event.clientY - rect.top
|
||||
};
|
||||
root.style.transform = "none";
|
||||
document.addEventListener("pointermove", onDragMove, true);
|
||||
document.addEventListener("pointerup", onDragEnd, true);
|
||||
}
|
||||
|
||||
function onDragMove(event) {
|
||||
if (!dragging) return;
|
||||
event.preventDefault();
|
||||
const root = document.getElementById(ROOT_ID);
|
||||
if (!root) return;
|
||||
root.style.left = `${event.clientX - dragging.offsetX}px`;
|
||||
root.style.top = `${event.clientY - dragging.offsetY}px`;
|
||||
}
|
||||
|
||||
function onDragEnd() {
|
||||
const root = document.getElementById(ROOT_ID);
|
||||
dragging = null;
|
||||
document.removeEventListener("pointermove", onDragMove, true);
|
||||
document.removeEventListener("pointerup", onDragEnd, true);
|
||||
if (root) clampIsland(root, true);
|
||||
}
|
||||
|
||||
function setToolbarStatus(text, busy = true) {
|
||||
const root = document.getElementById(ROOT_ID) || ensureBase();
|
||||
root.innerHTML = `<style>${rootCss()}</style>
|
||||
<div class="w2p-island">
|
||||
<div class="w2p-status">
|
||||
${busy ? '<span class="w2p-spinner"></span>' : ""}
|
||||
<span class="w2p-text"></span>
|
||||
</div>
|
||||
<button class="w2p-cancel" type="button">取消</button>
|
||||
</div>`;
|
||||
root.querySelector(".w2p-text").textContent = text;
|
||||
root.querySelector(".w2p-cancel").addEventListener("click", removePicker);
|
||||
root.addEventListener("pointerdown", onDragStart, true);
|
||||
clampIsland(root, false);
|
||||
}
|
||||
|
||||
function showToolbar(settings) {
|
||||
removePicker();
|
||||
currentSettings = settings || {};
|
||||
mode = "toolbar";
|
||||
const root = ensureBase();
|
||||
root.innerHTML = `<style>${rootCss()}</style>
|
||||
<div class="w2p-island">
|
||||
<button class="w2p-action" data-action="clipboard" type="button">${icon("copy")}<span>复制到剪贴板</span></button>
|
||||
<button class="w2p-action" data-action="screen" type="button">${icon("screen")}<span>整个屏幕</span></button>
|
||||
<button class="w2p-action active" data-action="select" type="button">${icon("select")}<span>选择元素</span></button>
|
||||
<button class="w2p-close" data-action="close" type="button" aria-label="关闭">${icon("close")}</button>
|
||||
</div>`;
|
||||
root.addEventListener("pointerdown", onDragStart, true);
|
||||
root.querySelector('[data-action="close"]').addEventListener("click", removePicker);
|
||||
root.querySelector('[data-action="select"]').addEventListener("click", () => startElementPicker(currentSettings));
|
||||
root.querySelector('[data-action="screen"]').addEventListener("click", () => startFullPageCapture(false));
|
||||
root.querySelector('[data-action="clipboard"]').addEventListener("click", () => startFullPageCapture(true));
|
||||
clampIsland(root, false);
|
||||
}
|
||||
|
||||
async function copyText(text) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.style.cssText = "position:fixed;left:-9999px;top:0;opacity:0";
|
||||
document.documentElement.appendChild(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
const ok = document.execCommand("copy");
|
||||
textarea.remove();
|
||||
if (!ok) throw new Error("浏览器拒绝写入剪贴板");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
async function startFullPageCapture(copyToClipboard) {
|
||||
setToolbarStatus(copyToClipboard ? "正在将页面捕获到剪贴板" : "正在捕获整个页面");
|
||||
try {
|
||||
const response = await chrome.runtime.sendMessage({
|
||||
type: copyToClipboard ? "PIXSO_CAPTURE_CLIPBOARD" : "PIXSO_CAPTURE_CURRENT_TAB",
|
||||
options: currentSettings || {}
|
||||
});
|
||||
if (!response?.ok) throw new Error(response?.error || "采集失败");
|
||||
if (copyToClipboard) {
|
||||
await copyText(response.json);
|
||||
setToolbarStatus("已复制 JSON 到剪贴板", false);
|
||||
} else {
|
||||
setToolbarStatus("整页采集完成", false);
|
||||
}
|
||||
setTimeout(removePicker, 1100);
|
||||
} catch (error) {
|
||||
setToolbarStatus(error.message || String(error), false);
|
||||
setTimeout(showToolbar, 2200, currentSettings);
|
||||
}
|
||||
}
|
||||
|
||||
function hideHighlight() {
|
||||
const box = document.getElementById(BOX_ID);
|
||||
const label = document.getElementById(LABEL_ID);
|
||||
if (box) box.style.display = "none";
|
||||
if (label) label.style.display = "none";
|
||||
}
|
||||
|
||||
function updateHighlight(element) {
|
||||
const box = document.getElementById(BOX_ID);
|
||||
const label = document.getElementById(LABEL_ID);
|
||||
if (!box || !label || !element) return;
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (rect.width <= 0 || rect.height <= 0) return;
|
||||
|
||||
box.style.display = "block";
|
||||
box.style.left = `${Math.max(0, rect.left)}px`;
|
||||
box.style.top = `${Math.max(0, rect.top)}px`;
|
||||
box.style.width = `${rect.width}px`;
|
||||
box.style.height = `${rect.height}px`;
|
||||
|
||||
label.style.display = "block";
|
||||
label.textContent = elementName(element);
|
||||
label.style.left = `${Math.max(8, rect.left)}px`;
|
||||
label.style.top = `${Math.max(8, Math.min(window.innerHeight - 36, rect.bottom + 8))}px`;
|
||||
}
|
||||
|
||||
function isPickerNode(element) {
|
||||
return Boolean(element?.closest?.(`#${ROOT_ID}, #${BOX_ID}, #${LABEL_ID}`));
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
if (mode !== "select") return;
|
||||
const element = event.target;
|
||||
if (!element || isPickerNode(element)) return;
|
||||
currentElement = element;
|
||||
updateHighlight(element);
|
||||
}
|
||||
|
||||
function onKeyDown(event) {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
removePicker();
|
||||
}
|
||||
}
|
||||
|
||||
async function onClick(event) {
|
||||
if (mode !== "select" || !currentElement || isPickerNode(event.target)) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const selected = currentElement;
|
||||
const rect = selected.getBoundingClientRect();
|
||||
const selectionId = `w2p-${Date.now()}-${Math.random().toString(16).slice(2)}`;
|
||||
selected.setAttribute(ATTR, selectionId);
|
||||
setToolbarStatus("正在捕获所选元素");
|
||||
|
||||
try {
|
||||
const response = await chrome.runtime.sendMessage({
|
||||
type: "PIXSO_CAPTURE_ELEMENT_START",
|
||||
options: {
|
||||
...(currentSettings || {}),
|
||||
captureMode: "mixed",
|
||||
selectionId,
|
||||
selectionWidth: Math.max(1, Math.round(rect.width))
|
||||
}
|
||||
});
|
||||
if (!response?.ok) throw new Error(response?.error || "元素采集失败");
|
||||
setToolbarStatus(`元素采集完成，宽度 ${response.selectionWidth || Math.round(rect.width)}px`, false);
|
||||
setTimeout(removePicker, 1100);
|
||||
} catch (error) {
|
||||
setToolbarStatus(error.message || String(error), false);
|
||||
setTimeout(() => startElementPicker(currentSettings), 2200);
|
||||
} finally {
|
||||
selected.removeAttribute(ATTR);
|
||||
hideHighlight();
|
||||
}
|
||||
}
|
||||
|
||||
function startElementPicker(settings) {
|
||||
removePicker();
|
||||
currentSettings = settings || {};
|
||||
mode = "select";
|
||||
setToolbarStatus("选择要捕获的元素");
|
||||
document.addEventListener("mousemove", onMouseMove, true);
|
||||
document.addEventListener("click", onClick, true);
|
||||
document.addEventListener("keydown", onKeyDown, true);
|
||||
}
|
||||
|
||||
window.__webToPixsoStartElementPicker = startElementPicker;
|
||||
window.__webToPixsoShowCaptureToolbar = showToolbar;
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Web to Pixso",
|
||||
"version": "1.1.1",
|
||||
"description": "Capture a webpage and convert it into editable Pixso layers.",
|
||||
"name": "Web to PPT",
|
||||
"version": "2.0.0",
|
||||
"description": "Capture a webpage and export it as an editable PPTX presentation.",
|
||||
"permissions": ["activeTab", "scripting", "downloads", "storage"],
|
||||
"host_permissions": ["<all_urls>"],
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"action": {
|
||||
"default_title": "Web to Pixso",
|
||||
"default_title": "Web to PPT",
|
||||
"default_popup": "popup.html",
|
||||
"default_icon": {
|
||||
"16": "logo/plugin-logo.png",
|
||||
"32": "logo/plugin-logo.png",
|
||||
@@ -25,7 +26,7 @@
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": ["capture.js", "runner.js", "element-picker.js", "popup-panel.js", "logo/plugin-logo.png"],
|
||||
"resources": ["capture.js", "runner.js", "lib-pptxgen.js", "convert-browser.js"],
|
||||
"matches": ["<all_urls>"]
|
||||
}
|
||||
]
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
File diff suppressed because it is too large
Load Diff
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"identifier": "web-to-pixso",
|
||||
"id": "web-to-pixso-local",
|
||||
"name": "Web to Pixso",
|
||||
"description": "Import a Web to Pixso capture JSON file as editable Pixso layers.",
|
||||
"version": "1.1.1",
|
||||
"api": "1.0.0",
|
||||
"author": "大非",
|
||||
"editorType": ["pixso", "preview"],
|
||||
"main": "./main.js",
|
||||
"ui": "./ui.html",
|
||||
"icon": "./plugin-logo.png",
|
||||
"menu": [
|
||||
{
|
||||
"name": "导入网页采集文件",
|
||||
"command": "import"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
@@ -1,35 +0,0 @@
|
||||
{
|
||||
"identifier": "web-to-pixso",
|
||||
"id": "web-to-pixso-local",
|
||||
"name": "Web to Pixso",
|
||||
"description": "Import a Web to Pixso capture JSON file as editable Pixso layers.",
|
||||
"version": "1.1.1",
|
||||
"api": "1.0.0",
|
||||
"author": "大非",
|
||||
"editorType": ["pixso", "preview"],
|
||||
"main": "./main.js",
|
||||
"ui": "./ui.html",
|
||||
"icon": "./plugin-logo.png",
|
||||
"menu": [
|
||||
{
|
||||
"name": "导入网页采集文件",
|
||||
"command": "import"
|
||||
}
|
||||
],
|
||||
"commands": [
|
||||
{
|
||||
"name": "import",
|
||||
"description": "导入 Web to Pixso 采集文件"
|
||||
}
|
||||
],
|
||||
"i18nManifest": {
|
||||
"zh-CN": {
|
||||
"name": "Web to Pixso",
|
||||
"description": "导入网页采集文件并生成 Pixso 可编辑图层"
|
||||
},
|
||||
"en-US": {
|
||||
"name": "Web to Pixso",
|
||||
"description": "Import webpage captures as editable Pixso layers"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,521 +0,0 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const ROOT_ID = "__web_to_pixso_panel_root__";
|
||||
const SETTINGS_KEY = "webToPixsoSettings";
|
||||
const MIN_CAPTURE_WIDTH = 320;
|
||||
const MAX_CAPTURE_WIDTH = 3840;
|
||||
const DEFAULT_SETTINGS = {
|
||||
useProxy: false,
|
||||
concurrency: "8",
|
||||
captureMode: "mixed",
|
||||
captureWidth: null
|
||||
};
|
||||
|
||||
function normalizeCaptureWidth(value, fallback = null) {
|
||||
const number = Number.parseInt(String(value || "").replace(/\D+/g, ""), 10);
|
||||
if (!Number.isFinite(number)) return fallback;
|
||||
return Math.max(MIN_CAPTURE_WIDTH, Math.min(MAX_CAPTURE_WIDTH, number));
|
||||
}
|
||||
|
||||
function normalizeSettings(value = {}) {
|
||||
const concurrency = String(value.concurrency || DEFAULT_SETTINGS.concurrency);
|
||||
return {
|
||||
useProxy: Boolean(value.useProxy),
|
||||
concurrency: ["4", "6", "8", "10", "12", "16", "20", "infinite"].includes(concurrency)
|
||||
? concurrency
|
||||
: DEFAULT_SETTINGS.concurrency,
|
||||
captureMode: value.captureMode === "editable" ? "editable" : "mixed",
|
||||
captureWidth: normalizeCaptureWidth(value.captureWidth, null)
|
||||
};
|
||||
}
|
||||
|
||||
function css() {
|
||||
return `
|
||||
:host {
|
||||
all: initial;
|
||||
color-scheme: light;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
.backdrop {
|
||||
background: transparent;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(10, 10, 18, 0.14);
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 18px 46px rgba(10, 10, 18, 0.18);
|
||||
box-sizing: border-box;
|
||||
color: #1a1a2e;
|
||||
overflow: hidden;
|
||||
pointer-events: auto;
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
top: 24px;
|
||||
width: 320px;
|
||||
}
|
||||
.header {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px 15px;
|
||||
}
|
||||
.logo-title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.logo {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(10, 10, 18, 0.12);
|
||||
display: block;
|
||||
height: 28px;
|
||||
object-fit: cover;
|
||||
width: 28px;
|
||||
}
|
||||
.title {
|
||||
color: #1a1a2e;
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
line-height: 1;
|
||||
}
|
||||
.version-badge {
|
||||
background: #f2f4ff;
|
||||
border: 1px solid #dfe5ff;
|
||||
border-radius: 999px;
|
||||
color: #2450ff;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 3px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
button, select, input {
|
||||
font: inherit;
|
||||
}
|
||||
.close-btn {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
width: 28px;
|
||||
}
|
||||
.close-btn:hover {
|
||||
background: #f4f4f6;
|
||||
color: #666;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
.setting-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.setting-label {
|
||||
color: #1a1a2e;
|
||||
font-size: 14px;
|
||||
}
|
||||
.setting-select {
|
||||
appearance: none;
|
||||
background: #fff;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 12px;
|
||||
color: #1a1a2e;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
min-width: 80px;
|
||||
outline: none;
|
||||
padding: 8px 30px 8px 13px;
|
||||
}
|
||||
.mode-select {
|
||||
min-width: 116px;
|
||||
}
|
||||
.toggle-switch {
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
position: relative;
|
||||
width: 48px;
|
||||
}
|
||||
.toggle-switch input {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
.toggle-slider {
|
||||
background-color: #e4e4e4;
|
||||
border-radius: 999px;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.toggle-slider::before {
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
bottom: 3px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
content: "";
|
||||
height: 20px;
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
transition: 0.3s;
|
||||
width: 20px;
|
||||
}
|
||||
input:checked + .toggle-slider {
|
||||
background-color: #1a1a2e;
|
||||
}
|
||||
input:checked + .toggle-slider::before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
.width-input-wrap {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
min-width: 116px;
|
||||
padding: 0 10px 0 12px;
|
||||
}
|
||||
.width-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #1a1a2e;
|
||||
font-size: 14px;
|
||||
min-width: 0;
|
||||
outline: none;
|
||||
text-align: right;
|
||||
width: 68px;
|
||||
}
|
||||
.width-input.invalid {
|
||||
color: #ef4444;
|
||||
}
|
||||
.width-unit {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.description {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.capture-btn,
|
||||
.select-btn {
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
padding: 14px 24px;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
.capture-btn {
|
||||
background: #1a1a2e;
|
||||
color: #fff;
|
||||
}
|
||||
.capture-btn:hover {
|
||||
background: #2d2d44;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.select-btn {
|
||||
background: #f4f4f6;
|
||||
color: #1a1a2e;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.select-btn:hover {
|
||||
background: #ececf1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.capture-btn:disabled,
|
||||
.select-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
transform: none;
|
||||
}
|
||||
.capture-btn.success {
|
||||
background: #10b981;
|
||||
}
|
||||
.capture-btn.error {
|
||||
background: #ef4444;
|
||||
}
|
||||
.status {
|
||||
margin-top: 16px;
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
.progress-bar {
|
||||
background: #f0f0f0;
|
||||
border-radius: 999px;
|
||||
height: 4px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
background: linear-gradient(90deg, #00d2ff, #7c3aed);
|
||||
border-radius: 999px;
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
width: 0;
|
||||
}
|
||||
.status-text {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
.help-link {
|
||||
align-items: center;
|
||||
border: 1px solid #e6e8f2;
|
||||
border-radius: 12px;
|
||||
color: #2450ff;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
padding: 10px 12px;
|
||||
text-decoration: none;
|
||||
transition: background 0.18s, border-color 0.18s, color 0.18s;
|
||||
width: 100%;
|
||||
}
|
||||
.help-link:hover {
|
||||
background: #f6f8ff;
|
||||
border-color: #dfe5ff;
|
||||
}
|
||||
.footer {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
.support-email {
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
.support-email:hover {
|
||||
color: #2450ff;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
function panelHtml() {
|
||||
return `
|
||||
<div class="backdrop">
|
||||
<main class="panel" role="dialog" aria-label="Web to Pixso">
|
||||
<div class="header">
|
||||
<div class="logo-title">
|
||||
<img src="${chrome.runtime.getURL("logo/plugin-logo.png")}" alt="" class="logo">
|
||||
<span class="title">Web to Pixso</span>
|
||||
<span class="version-badge">v1.1.1</span>
|
||||
</div>
|
||||
<button class="close-btn" type="button" aria-label="关闭">×</button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">采集模式</span>
|
||||
<select class="setting-select mode-select" data-field="captureMode">
|
||||
<option value="mixed">混合高保真</option>
|
||||
<option value="editable">可编辑优先</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">跨域图片代理模式</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" data-field="useProxy">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">页面采集宽度</span>
|
||||
<label class="width-input-wrap">
|
||||
<input class="width-input" data-field="captureWidth" type="text" inputmode="numeric" autocomplete="off">
|
||||
<span class="width-unit">px</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">图片采集并发</span>
|
||||
<select class="setting-select" data-field="concurrency">
|
||||
<option value="4">4</option>
|
||||
<option value="6">6</option>
|
||||
<option value="8">8</option>
|
||||
<option value="10">10</option>
|
||||
<option value="12">12</option>
|
||||
<option value="16">16</option>
|
||||
<option value="20">20</option>
|
||||
<option value="infinite">无限</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="description">页面采集宽度默认使用当前窗口宽度，可输入 320-3840px 触发响应式布局后采集。</p>
|
||||
<button class="capture-btn" type="button">开始采集</button>
|
||||
<button class="select-btn" type="button">打开页面浮窗</button>
|
||||
<div class="status" hidden>
|
||||
<div class="progress-bar" aria-hidden="true"><div class="progress-fill"></div></div>
|
||||
<span class="status-text">准备中...</span>
|
||||
</div>
|
||||
<a class="help-link" href="https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f" target="_blank" rel="noopener noreferrer">使用说明</a>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<span>by 大非</span>
|
||||
<a class="support-email" href="mailto:270310136@qq.com">270310136@qq.com 给我发邮件哦，我光速改</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function getField(root, name) {
|
||||
return root.shadowRoot.querySelector(`[data-field="${name}"]`);
|
||||
}
|
||||
|
||||
function sanitizeWidth(input, clamp = false) {
|
||||
const digits = input.value.replace(/\D+/g, "");
|
||||
input.value = digits;
|
||||
const raw = Number.parseInt(digits, 10);
|
||||
const invalid = Boolean(digits) && Number.isFinite(raw) && (raw < MIN_CAPTURE_WIDTH || raw > MAX_CAPTURE_WIDTH);
|
||||
input.classList.toggle("invalid", invalid);
|
||||
const normalized = normalizeCaptureWidth(digits, null);
|
||||
if (clamp && digits) {
|
||||
input.value = String(normalized);
|
||||
input.classList.remove("invalid");
|
||||
}
|
||||
return normalized;
|
||||
}
|
||||
|
||||
async function getSettings() {
|
||||
const result = await chrome.storage.local.get({ [SETTINGS_KEY]: DEFAULT_SETTINGS });
|
||||
return normalizeSettings(result[SETTINGS_KEY]);
|
||||
}
|
||||
|
||||
async function saveSettings(settings) {
|
||||
await chrome.storage.local.set({ [SETTINGS_KEY]: normalizeSettings(settings) });
|
||||
}
|
||||
|
||||
function readSettings(root, options = {}) {
|
||||
const { clampWidth = false } = options;
|
||||
return normalizeSettings({
|
||||
captureMode: getField(root, "captureMode").value,
|
||||
useProxy: getField(root, "useProxy").checked,
|
||||
concurrency: getField(root, "concurrency").value,
|
||||
captureWidth: sanitizeWidth(getField(root, "captureWidth"), clampWidth)
|
||||
});
|
||||
}
|
||||
|
||||
function setProgress(root, percent, text) {
|
||||
const status = root.shadowRoot.querySelector(".status");
|
||||
const fill = root.shadowRoot.querySelector(".progress-fill");
|
||||
const statusText = root.shadowRoot.querySelector(".status-text");
|
||||
status.hidden = false;
|
||||
fill.style.width = `${Math.max(0, Math.min(100, percent))}%`;
|
||||
statusText.textContent = text;
|
||||
}
|
||||
|
||||
function setBusy(root, isBusy) {
|
||||
const captureButton = root.shadowRoot.querySelector(".capture-btn");
|
||||
const selectButton = root.shadowRoot.querySelector(".select-btn");
|
||||
captureButton.disabled = isBusy;
|
||||
selectButton.disabled = isBusy;
|
||||
captureButton.classList.remove("success", "error");
|
||||
captureButton.textContent = isBusy ? "采集中..." : "开始采集";
|
||||
selectButton.textContent = isBusy ? "处理中..." : "打开页面浮窗";
|
||||
}
|
||||
|
||||
function setResult(root, kind, text) {
|
||||
const captureButton = root.shadowRoot.querySelector(".capture-btn");
|
||||
captureButton.classList.remove("success", "error");
|
||||
captureButton.classList.add(kind);
|
||||
captureButton.textContent = text;
|
||||
}
|
||||
|
||||
async function startCapture(root) {
|
||||
setBusy(root, true);
|
||||
setProgress(root, 12, "准备当前网页...");
|
||||
const settings = readSettings(root, { clampWidth: true });
|
||||
await saveSettings(settings);
|
||||
try {
|
||||
setProgress(root, 28, "注入采集脚本...");
|
||||
const response = await chrome.runtime.sendMessage({
|
||||
type: "PIXSO_CAPTURE_CURRENT_TAB",
|
||||
options: settings
|
||||
});
|
||||
if (!response?.ok) throw new Error(response?.error || "采集失败");
|
||||
const widthText = response.actualViewportWidth ? `已按 ${response.actualViewportWidth}px 采集` : "采集完成";
|
||||
setProgress(root, 100, `${widthText}：${response.filename || ""}`);
|
||||
setResult(root, "success", "采集完成");
|
||||
setTimeout(() => root.remove(), 900);
|
||||
} catch (error) {
|
||||
setProgress(root, 0, error.message || String(error));
|
||||
setResult(root, "error", "采集失败");
|
||||
setTimeout(() => setBusy(root, false), 2600);
|
||||
}
|
||||
}
|
||||
|
||||
async function openToolbar(root) {
|
||||
const settings = readSettings(root, { clampWidth: true });
|
||||
await saveSettings(settings);
|
||||
root.remove();
|
||||
window.__webToPixsoShowCaptureToolbar?.(settings);
|
||||
}
|
||||
|
||||
async function bind(root) {
|
||||
const settings = await getSettings();
|
||||
getField(root, "captureMode").value = settings.captureMode;
|
||||
getField(root, "useProxy").checked = settings.useProxy;
|
||||
getField(root, "concurrency").value = settings.concurrency;
|
||||
getField(root, "captureWidth").value = String(settings.captureWidth || Math.round(window.innerWidth || document.documentElement.clientWidth || 1440));
|
||||
|
||||
for (const field of ["captureMode", "useProxy", "concurrency"]) {
|
||||
getField(root, field).addEventListener("change", () => saveSettings(readSettings(root)));
|
||||
}
|
||||
getField(root, "captureWidth").addEventListener("input", event => {
|
||||
sanitizeWidth(event.currentTarget);
|
||||
saveSettings(readSettings(root, { clampWidth: false }));
|
||||
});
|
||||
getField(root, "captureWidth").addEventListener("blur", event => {
|
||||
sanitizeWidth(event.currentTarget, true);
|
||||
saveSettings(readSettings(root, { clampWidth: true }));
|
||||
});
|
||||
root.shadowRoot.querySelector(".close-btn").addEventListener("click", () => root.remove());
|
||||
root.shadowRoot.querySelector(".capture-btn").addEventListener("click", () => startCapture(root));
|
||||
root.shadowRoot.querySelector(".select-btn").addEventListener("click", () => openToolbar(root));
|
||||
}
|
||||
|
||||
window.__webToPixsoShowPanel = async function showPanel() {
|
||||
document.getElementById(ROOT_ID)?.remove();
|
||||
const root = document.createElement("div");
|
||||
root.id = ROOT_ID;
|
||||
const shadow = root.attachShadow({ mode: "open" });
|
||||
shadow.innerHTML = `<style>${css()}</style>${panelHtml()}`;
|
||||
document.documentElement.appendChild(root);
|
||||
await bind(root);
|
||||
};
|
||||
})();
|
||||
+15
-54
@@ -1,86 +1,47 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN" style="background: transparent;">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Web to Pixso</title>
|
||||
<title>Web to PPT</title>
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
</head>
|
||||
<body style="background: transparent;">
|
||||
<body>
|
||||
<main class="shell">
|
||||
<div class="header">
|
||||
<div class="logo-title">
|
||||
<img src="logo/plugin-logo.png" alt="" class="logo">
|
||||
<span class="title">Web to Pixso</span>
|
||||
<span class="version-badge">v1.1.1</span>
|
||||
<span class="title">Web to PPT</span>
|
||||
<span class="version-badge">v2.0</span>
|
||||
</div>
|
||||
<button class="close-btn" id="closeBtn" type="button" aria-label="关闭">x</button>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">采集模式</span>
|
||||
<select class="setting-select mode-select" id="captureMode">
|
||||
<option value="mixed" selected>混合高保真</option>
|
||||
<option value="editable">可编辑优先</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">跨域图片代理模式</span>
|
||||
<label class="toggle-switch" for="proxyToggle">
|
||||
<input type="checkbox" id="proxyToggle">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">页面采集宽度</span>
|
||||
<label class="width-input-wrap" for="captureWidth">
|
||||
<input class="width-input" id="captureWidth" type="text" inputmode="numeric" autocomplete="off" aria-label="页面采集宽度">
|
||||
<span class="setting-label">采集宽度</span>
|
||||
<label class="width-input-wrap">
|
||||
<input class="width-input" id="captureWidth" type="text" inputmode="numeric" placeholder="自动">
|
||||
<span class="width-unit">px</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">图片采集并发</span>
|
||||
<select class="setting-select" id="concurrency">
|
||||
<option value="4">4</option>
|
||||
<option value="6">6</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="10">10</option>
|
||||
<option value="12">12</option>
|
||||
<option value="16">16</option>
|
||||
<option value="20">20</option>
|
||||
<option value="infinite">无限</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p class="description">页面采集宽度默认使用当前窗口宽度，可输入 320-3840px 触发响应式布局后采集。</p>
|
||||
|
||||
<button class="capture-btn" id="captureBtn" type="button">
|
||||
<span id="btnText">开始采集</span>
|
||||
</button>
|
||||
<button class="select-btn" id="selectBtn" type="button">
|
||||
<span id="selectBtnText">打开页面浮窗</span>
|
||||
<button class="capture-btn" id="exportBtn" type="button">
|
||||
<span id="btnText">导出 PPTX</span>
|
||||
</button>
|
||||
|
||||
<div class="status" id="status" hidden>
|
||||
<div class="progress-bar" aria-hidden="true">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
|
||||
<span class="status-text" id="statusText">准备中...</span>
|
||||
</div>
|
||||
|
||||
<a class="help-link" id="helpLink" href="https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f" target="_blank" rel="noopener noreferrer">使用说明</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span class="author">by 大非</span>
|
||||
<a class="support-email" href="mailto:270310136@qq.com">270310136@qq.com 给我发邮件哦，我光速改</a>
|
||||
<span class="author">html2pptx engine</span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="lib-pptxgen.js"></script>
|
||||
<script src="lib-jszip.js"></script>
|
||||
<script src="convert-browser.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+83
-162
@@ -1,45 +1,32 @@
|
||||
const SETTINGS_KEY = "webToPixsoSettings";
|
||||
const HELP_URL = "https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f";
|
||||
const DEFAULT_SETTINGS = {
|
||||
useProxy: false,
|
||||
concurrency: "8",
|
||||
captureMode: "mixed",
|
||||
captureWidth: null
|
||||
};
|
||||
const SETTINGS_KEY = 'webToPixsoSettings';
|
||||
const DEFAULT_SETTINGS = { useProxy: false, concurrency: '8', captureMode: 'mixed', captureWidth: null };
|
||||
const MIN_CAPTURE_WIDTH = 320;
|
||||
const MAX_CAPTURE_WIDTH = 3840;
|
||||
|
||||
const captureModeSelect = document.getElementById("captureMode");
|
||||
const proxyToggle = document.getElementById("proxyToggle");
|
||||
const captureWidthInput = document.getElementById("captureWidth");
|
||||
const concurrencySelect = document.getElementById("concurrency");
|
||||
const captureBtn = document.getElementById("captureBtn");
|
||||
const btnText = document.getElementById("btnText");
|
||||
const selectBtn = document.getElementById("selectBtn");
|
||||
const selectBtnText = document.getElementById("selectBtnText");
|
||||
const status = document.getElementById("status");
|
||||
const statusText = document.getElementById("statusText");
|
||||
const progressFill = document.getElementById("progressFill");
|
||||
const closeBtn = document.getElementById("closeBtn");
|
||||
const helpLink = document.getElementById("helpLink");
|
||||
const captureWidthInput = document.getElementById('captureWidth');
|
||||
const exportBtn = document.getElementById('exportBtn');
|
||||
const btnText = document.getElementById('btnText');
|
||||
const status = document.getElementById('status');
|
||||
const statusText = document.getElementById('statusText');
|
||||
const progressFill = document.getElementById('progressFill');
|
||||
|
||||
function normalizeCaptureWidth(value, fallback = null) {
|
||||
const number = Number.parseInt(String(value || '').replace(/\D+/g, ''), 10);
|
||||
if (!Number.isFinite(number)) return fallback;
|
||||
return Math.max(MIN_CAPTURE_WIDTH, Math.min(MAX_CAPTURE_WIDTH, number));
|
||||
}
|
||||
|
||||
function normalizeSettings(value = {}) {
|
||||
const concurrency = String(value.concurrency || DEFAULT_SETTINGS.concurrency);
|
||||
const captureWidth = normalizeCaptureWidth(value.captureWidth, null);
|
||||
return {
|
||||
useProxy: Boolean(value.useProxy),
|
||||
concurrency: ["4", "6", "8", "10", "12", "16", "20", "infinite"].includes(concurrency)
|
||||
? concurrency
|
||||
: DEFAULT_SETTINGS.concurrency,
|
||||
captureMode: value.captureMode === "editable" ? "editable" : "mixed",
|
||||
captureWidth
|
||||
captureMode: 'mixed',
|
||||
captureWidth: normalizeCaptureWidth(value.captureWidth, null)
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeCaptureWidth(value, fallback = null) {
|
||||
const number = Number.parseInt(String(value || "").replace(/\D+/g, ""), 10);
|
||||
if (!Number.isFinite(number)) return fallback;
|
||||
return Math.max(MIN_CAPTURE_WIDTH, Math.min(MAX_CAPTURE_WIDTH, number));
|
||||
async function getSettings() {
|
||||
const result = await chrome.storage.local.get({ [SETTINGS_KEY]: DEFAULT_SETTINGS });
|
||||
return normalizeSettings(result[SETTINGS_KEY]);
|
||||
}
|
||||
|
||||
async function getCurrentViewportWidth() {
|
||||
@@ -51,18 +38,7 @@ async function getCurrentViewportWidth() {
|
||||
func: () => Math.round(window.innerWidth || document.documentElement.clientWidth || 0)
|
||||
});
|
||||
return normalizeCaptureWidth(result, null);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getSettings() {
|
||||
const result = await chrome.storage.local.get({ [SETTINGS_KEY]: DEFAULT_SETTINGS });
|
||||
return normalizeSettings(result[SETTINGS_KEY]);
|
||||
}
|
||||
|
||||
async function saveSettings(settings) {
|
||||
await chrome.storage.local.set({ [SETTINGS_KEY]: normalizeSettings(settings) });
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
function setProgress(percent, text) {
|
||||
@@ -72,150 +48,95 @@ function setProgress(percent, text) {
|
||||
}
|
||||
|
||||
function setBusy(isBusy) {
|
||||
captureBtn.disabled = isBusy;
|
||||
selectBtn.disabled = isBusy;
|
||||
captureBtn.classList.toggle("loading", isBusy);
|
||||
selectBtn.classList.toggle("loading", isBusy);
|
||||
captureBtn.classList.remove("success", "error");
|
||||
btnText.textContent = isBusy ? "采集中..." : "开始采集";
|
||||
selectBtnText.textContent = isBusy ? "正在打开浮窗..." : "打开页面浮窗";
|
||||
exportBtn.disabled = isBusy;
|
||||
exportBtn.classList.toggle('loading', isBusy);
|
||||
exportBtn.classList.remove('success', 'error');
|
||||
btnText.textContent = isBusy ? '处理中...' : '导出 PPTX';
|
||||
}
|
||||
|
||||
function setResult(kind, text) {
|
||||
captureBtn.classList.remove("loading", "success", "error");
|
||||
captureBtn.classList.add(kind);
|
||||
exportBtn.classList.remove('loading', 'success', 'error');
|
||||
exportBtn.classList.add(kind);
|
||||
btnText.textContent = text;
|
||||
}
|
||||
|
||||
async function syncSettingsFromUI() {
|
||||
await saveSettings({
|
||||
captureMode: captureModeSelect.value,
|
||||
useProxy: proxyToggle.checked,
|
||||
concurrency: concurrencySelect.value,
|
||||
captureWidth: normalizeCaptureWidth(captureWidthInput.value, null)
|
||||
});
|
||||
}
|
||||
|
||||
function sanitizeCaptureWidthInput({ clamp = false } = {}) {
|
||||
const digits = captureWidthInput.value.replace(/\D+/g, "");
|
||||
captureWidthInput.value = digits;
|
||||
const width = normalizeCaptureWidth(digits, null);
|
||||
const rawNumber = Number.parseInt(digits, 10);
|
||||
let invalid = Boolean(digits) && Number.isFinite(rawNumber) &&
|
||||
(rawNumber < MIN_CAPTURE_WIDTH || rawNumber > MAX_CAPTURE_WIDTH);
|
||||
captureWidthInput.classList.toggle("invalid", invalid);
|
||||
if (clamp && digits) {
|
||||
captureWidthInput.value = String(width);
|
||||
invalid = false;
|
||||
captureWidthInput.classList.remove("invalid");
|
||||
}
|
||||
return width;
|
||||
}
|
||||
|
||||
function readSettingsFromUI() {
|
||||
return normalizeSettings({
|
||||
captureMode: captureModeSelect.value,
|
||||
useProxy: proxyToggle.checked,
|
||||
concurrency: concurrencySelect.value,
|
||||
captureWidth: sanitizeCaptureWidthInput({ clamp: true })
|
||||
});
|
||||
}
|
||||
|
||||
async function startCapture() {
|
||||
async function exportPptx() {
|
||||
setBusy(true);
|
||||
setProgress(12, "准备当前网页...");
|
||||
setProgress(5, '准备采集...');
|
||||
|
||||
const settings = readSettingsFromUI();
|
||||
await saveSettings(settings);
|
||||
const captureWidth = normalizeCaptureWidth(captureWidthInput.value, null);
|
||||
const settings = { ...DEFAULT_SETTINGS, captureWidth };
|
||||
|
||||
try {
|
||||
setProgress(28, "注入采集脚本...");
|
||||
// 1. 抓取 DOM
|
||||
setProgress(15, '正在采集页面...');
|
||||
const response = await chrome.runtime.sendMessage({
|
||||
type: "PIXSO_CAPTURE_START",
|
||||
type: 'PIXSO_CAPTURE_START',
|
||||
options: settings
|
||||
});
|
||||
|
||||
if (!response || !response.ok) {
|
||||
throw new Error(response?.error || "采集失败");
|
||||
throw new Error(response?.error || '采集失败');
|
||||
}
|
||||
|
||||
const viewportText = response.actualViewportWidth
|
||||
? `已按 ${response.actualViewportWidth}px 采集`
|
||||
: "已按当前页面尺寸采集";
|
||||
setProgress(100, `${viewportText}：${response.filename}`);
|
||||
setResult("success", "采集完成");
|
||||
setTimeout(() => window.close(), 900);
|
||||
// 2. 获取 JSON 数据（从 background 返回的文件路径读取不了，直接从 background 拿数据）
|
||||
// 需要让 background 返回 JSON 数据而不是文件
|
||||
setProgress(40, '采集完成，正在转化...');
|
||||
|
||||
// background 已经下载了 JSON 文件，但我们需要数据来转化
|
||||
// 用另一个消息获取数据
|
||||
const dataResponse = await chrome.runtime.sendMessage({
|
||||
type: 'WEB_TO_PPT_GET_DATA'
|
||||
});
|
||||
|
||||
if (!dataResponse || !dataResponse.ok) {
|
||||
throw new Error(dataResponse?.error || '获取数据失败');
|
||||
}
|
||||
|
||||
const jsonData = dataResponse.data;
|
||||
|
||||
// 3. 转化
|
||||
setProgress(50, '正在生成 PPTX...');
|
||||
const schema = await WebToPPT.convertToPptx(jsonData, (msg) => {
|
||||
setProgress(50 + Math.min(40, Math.floor(Math.random() * 40)), msg);
|
||||
});
|
||||
|
||||
// 4. 生成 PPTX
|
||||
setProgress(90, '正在打包...');
|
||||
const blob = await WebToPPT.schemaToPptxBlob(schema);
|
||||
|
||||
// 5. 下载
|
||||
setProgress(95, '正在下载...');
|
||||
const url = URL.createObjectURL(blob);
|
||||
const title = jsonData.source?.title || 'webpage';
|
||||
const safeTitle = title.replace(/[\\/:*?"<>|]+/g, '-').replace(/\s+/g, '-').slice(0, 64) || 'webpage';
|
||||
const filename = `web-to-ppt/${safeTitle}-${Date.now()}.pptx`;
|
||||
|
||||
await chrome.downloads.download({ url, filename, saveAs: true });
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
setProgress(100, `已导出：${filename}`);
|
||||
setResult('success', '导出完成');
|
||||
setTimeout(() => window.close(), 1500);
|
||||
|
||||
} catch (error) {
|
||||
setProgress(0, error.message || String(error));
|
||||
setResult("error", "采集失败");
|
||||
setResult('error', '导出失败');
|
||||
setTimeout(() => {
|
||||
setBusy(false);
|
||||
status.hidden = true;
|
||||
progressFill.style.width = "0";
|
||||
}, 2600);
|
||||
progressFill.style.width = '0';
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
async function startFloatingToolbar() {
|
||||
setBusy(true);
|
||||
setProgress(18, "正在打开页面采集浮窗...");
|
||||
|
||||
const settings = readSettingsFromUI();
|
||||
await saveSettings(settings);
|
||||
|
||||
try {
|
||||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
if (!tab?.id) throw new Error("没有可选择的当前标签页");
|
||||
|
||||
await chrome.scripting.executeScript({
|
||||
target: { tabId: tab.id },
|
||||
files: ["element-picker.js"]
|
||||
});
|
||||
|
||||
await chrome.scripting.executeScript({
|
||||
target: { tabId: tab.id },
|
||||
func: pickerSettings => window.__webToPixsoShowCaptureToolbar?.(pickerSettings),
|
||||
args: [settings]
|
||||
});
|
||||
|
||||
setProgress(100, "请在页面浮窗中选择整页或元素采集。");
|
||||
setTimeout(() => window.close(), 500);
|
||||
} catch (error) {
|
||||
setProgress(0, error.message || String(error));
|
||||
setResult("error", "采集失败");
|
||||
setTimeout(() => {
|
||||
setBusy(false);
|
||||
status.hidden = true;
|
||||
progressFill.style.width = "0";
|
||||
}, 2600);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
const settings = await getSettings();
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const currentWidth = await getCurrentViewportWidth();
|
||||
captureModeSelect.value = settings.captureMode;
|
||||
proxyToggle.checked = settings.useProxy;
|
||||
concurrencySelect.value = settings.concurrency;
|
||||
captureWidthInput.value = String(settings.captureWidth || currentWidth || "");
|
||||
captureWidthInput.value = String(currentWidth || '');
|
||||
});
|
||||
|
||||
captureModeSelect.addEventListener("change", syncSettingsFromUI);
|
||||
proxyToggle.addEventListener("change", syncSettingsFromUI);
|
||||
concurrencySelect.addEventListener("change", syncSettingsFromUI);
|
||||
captureWidthInput.addEventListener("input", () => {
|
||||
sanitizeCaptureWidthInput();
|
||||
syncSettingsFromUI();
|
||||
});
|
||||
captureWidthInput.addEventListener("blur", () => {
|
||||
sanitizeCaptureWidthInput({ clamp: true });
|
||||
syncSettingsFromUI();
|
||||
});
|
||||
captureBtn.addEventListener("click", startCapture);
|
||||
selectBtn.addEventListener("click", startFloatingToolbar);
|
||||
closeBtn.addEventListener("click", () => window.close());
|
||||
helpLink?.addEventListener("click", async event => {
|
||||
event.preventDefault();
|
||||
await chrome.tabs.create({ url: HELP_URL });
|
||||
window.close();
|
||||
exportBtn.addEventListener('click', exportPptx);
|
||||
captureWidthInput.addEventListener('input', () => {
|
||||
captureWidthInput.value = captureWidthInput.value.replace(/\D+/g, '');
|
||||
});
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
# Web to Pixso 使用说明
|
||||
|
||||
Web to Pixso 可以将网页采集为可导入 Pixso 的高保真设计稿，适合网页参考稿采集、运营页转设计稿、竞品页面还原、开发页面转 Pixso 资产等场景。
|
||||
|
||||
插件包：`web-to-pixso-v1.1.1.zip`
|
||||
|
||||
使用说明在线文档：[Web to Pixso 使用说明](https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f)
|
||||
|
||||
反馈邮箱：`270310136@qq.com`。给我发邮件哦，我光速改。
|
||||
|
||||
## 一、安装 Chrome 浏览器扩展
|
||||
|
||||
1. 解压 `web-to-pixso-v1.1.1.zip`。
|
||||
2. 打开 Chrome 浏览器，进入 `chrome://extensions/`。
|
||||
3. 打开右上角「开发者模式」。
|
||||
4. 点击「加载已解压的扩展程序」。
|
||||
5. 选择解压后的 `web-to-pixso` 文件夹。
|
||||
6. 安装成功后，浏览器右上角会出现 Web to Pixso 扩展图标。
|
||||
|
||||
## 二、安装 Pixso 插件
|
||||
|
||||
1. 打开 Pixso。
|
||||
2. 进入插件开发/导入插件入口。
|
||||
3. 选择 `web-to-pixso/pixso-plugin` 目录中的插件文件。
|
||||
4. 导入成功后，在 Pixso 插件面板中可以看到 Web to Pixso。
|
||||
|
||||
## 三、采集网页
|
||||
|
||||
1. 在 Chrome 中打开需要采集的目标网页。
|
||||
2. 点击浏览器右上角 Web to Pixso 扩展图标。
|
||||
3. 选择采集模式：
|
||||
- 混合高保真：优先保留关键模块截图兜底，同时尽量保留文字可编辑。
|
||||
- 可编辑优先：优先转换为 Pixso 原生文本、图片、形状和组件图层。
|
||||
4. 可按需要设置：
|
||||
- 跨域图片代理模式：用于减少图片丢失。
|
||||
- 页面采集宽度：用于按指定视口宽度触发响应式页面布局。
|
||||
- 图片采集并发：用于控制图片下载并发数量。
|
||||
5. 点击「开始采集」。
|
||||
6. 采集完成后，会下载一个 `.json` 文件。
|
||||
|
||||
## 四、导入 Pixso
|
||||
|
||||
1. 在 Pixso 中打开 Web to Pixso 插件。
|
||||
2. 将 Chrome 扩展下载的 `.json` 文件拖拽到插件面板，或点击选择文件。
|
||||
3. 插件会自动识别页面宽度和页面高度。
|
||||
4. 点击「导入到 Pixso」。
|
||||
5. 导入完成后，会创建一个以网页标题命名的画板。
|
||||
|
||||
## 五、导入后的图层结构
|
||||
|
||||
导入后的设计稿会按用途分层，方便设计师编辑和对比：
|
||||
|
||||
1. 对比底图层
|
||||
- 放置完整页面截图或模块截图。
|
||||
- 用于和上层可编辑元素进行还原度对比。
|
||||
- 可隐藏或锁定。
|
||||
|
||||
2. 可编辑元素层
|
||||
- 包含按钮、卡片、输入框、背景、图片、Logo、图标等。
|
||||
- 尽量保留尺寸、位置、圆角、边框、阴影、透明度和背景样式。
|
||||
|
||||
3. 文字编辑层
|
||||
- 包含网页中的可见文字。
|
||||
- 尽量保留字体、字号、颜色、行高、字重、对齐方式等样式。
|
||||
- 文字可在 Pixso 中直接编辑。
|
||||
|
||||
## 六、常见问题
|
||||
|
||||
### 1. 为什么有些区域是截图？
|
||||
|
||||
部分网页使用复杂动画、轮播、视频、Canvas、伪元素、复杂背景或特殊渲染方式。为了保证视觉效果不丢失，插件会为这些区域生成截图兜底，同时尽量保留文字和主要元素可编辑。
|
||||
|
||||
### 2. 为什么有些图片没有显示？
|
||||
|
||||
可能是目标网站启用了跨域限制、懒加载、防盗链或动态鉴权。可以尝试开启「跨域图片代理模式」后重新采集。
|
||||
|
||||
### 3. 为什么 Header 或 Hero 区域有时不可编辑？
|
||||
|
||||
部分网站的导航栏、轮播图或首屏区域可能由复杂脚本、Shadow DOM、Canvas、视频或异步渲染生成。插件会优先转换为可编辑图层，并使用兜底截图保证视觉可对比。
|
||||
|
||||
### 4. 页面采集宽度有什么用？
|
||||
|
||||
页面采集宽度用于模拟不同视口下的响应式布局。例如输入 `1920` 可以采集桌面宽屏布局，输入 `375` 可以采集移动端布局。
|
||||
|
||||
### 5. 导入后如何检查还原度？
|
||||
|
||||
可以先显示「对比底图层」，再查看上方的可编辑元素层和文字编辑层是否与底图对齐。对比完成后，可以隐藏或锁定底图。
|
||||
|
||||
## 七、适用场景
|
||||
|
||||
- 网页转 Pixso 设计稿
|
||||
- 竞品页面采集
|
||||
- 运营活动页还原
|
||||
- 开发页面转设计资产
|
||||
- 设计走查和页面对比
|
||||
- 旧页面重构前的视觉备份
|
||||
|
||||
## 八、版本说明
|
||||
|
||||
当前版本：V1.1.1
|
||||
|
||||
支持从 Web to Pixso Chrome 扩展导出的 JSON 文件导入 Pixso，生成包含可编辑文本、图片、背景、按钮、卡片和对比底图的高保真网页设计稿。
|
||||
|
||||
本版重点：
|
||||
|
||||
- Chrome 扩展和 Pixso 插件版本号统一为 `1.1.1`。
|
||||
- 插件面板显示版本号，避免用户混淆安装包。
|
||||
- Chrome 扩展和 Pixso 插件均新增「使用说明」入口，点击后打开飞书文档。
|
||||
- 两端插件底部均新增反馈邮箱：`270310136@qq.com`。
|
||||
- 采集 JSON 协议版本同步为 `1.1.1`，方便问题排查。
|
||||
- 保留页面采集宽度、混合高保真、可编辑优先、跨域图片代理和图片采集并发能力。
|
||||
- 继续强化三层结构：对比底图层、可编辑元素层、文字编辑层。
|
||||
|
||||
已知边界：
|
||||
|
||||
- 复杂动画、Canvas、视频、动态轮播和强跨域资源可能仍需要兜底截图或人工微调。
|
||||
- 真实网页还原质量会受目标网站资源加载、登录态、懒加载和浏览器环境影响。
|
||||
- 对外使用时建议先用对比底图层检查还原度，再进行设计稿编辑。
|
||||
@@ -0,0 +1,29 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './web-to-pixso/convert-browser.js',
|
||||
output: {
|
||||
filename: 'convert-bundle.js',
|
||||
path: path.resolve(__dirname, 'web-to-pixso'),
|
||||
library: { type: 'module' },
|
||||
module: true
|
||||
},
|
||||
experiments: { outputModule: true },
|
||||
resolve: {
|
||||
fallback: {
|
||||
fs: false,
|
||||
path: false,
|
||||
https: false,
|
||||
http: false,
|
||||
child_process: false,
|
||||
stream: false,
|
||||
buffer: require.resolve('buffer/'),
|
||||
process: false
|
||||
}
|
||||
},
|
||||
externals: {
|
||||
// pptxgenjs 和 jszip 通过 import() 动态加载，不打包
|
||||
},
|
||||
mode: 'production',
|
||||
target: 'web'
|
||||
};
|
||||
Reference in New Issue
Block a user