321 lines
14 KiB
JavaScript
321 lines
14 KiB
JavaScript
async function screenshotDOM(el, opts = {}) {
|
|
const {
|
|
scale = 2,
|
|
type = 'image/png',
|
|
quality = 0.92,
|
|
background = '#fff',
|
|
// if you want to *allow* splitting (and risk the bug), set to false
|
|
preventCapsuleSplit = true
|
|
} = opts;
|
|
|
|
if (!(el instanceof Element)) throw new TypeError('Expected a DOM Element');
|
|
|
|
if (document.fonts && document.fonts.status !== 'loaded') {
|
|
try { await document.fonts.ready; } catch { }
|
|
}
|
|
|
|
const { width, height } = (() => {
|
|
const r = el.getBoundingClientRect();
|
|
return { width: Math.ceil(r.width), height: Math.ceil(r.height) };
|
|
})();
|
|
if (!width || !height) throw new Error('Element has zero width/height.');
|
|
|
|
const clone = el.cloneNode(true);
|
|
await inlineEverything(el, clone);
|
|
|
|
if (background !== 'transparent') clone.style.background = background;
|
|
if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
const word = el.querySelector("h3").textContent.trim();
|
|
const phonetic = el.querySelector(".pronun").textContent.trim();
|
|
const [types, ...defs] = [...el.querySelectorAll("ol.defs li")].map(node => node.textContent.trim());
|
|
|
|
const vOffset = 25;
|
|
const svg = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
|
|
<style>
|
|
.card { fill: #ffffff; stroke: #e5e7eb; stroke-width: 1.2; rx: 5; ry: 5; }
|
|
.headword {
|
|
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
|
|
font-size: ${Math.round(width * 0.03)}px;
|
|
font-weight: 700;
|
|
fill: #111827;
|
|
}
|
|
.pron {
|
|
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
|
|
font-size: ${Math.round(width * 0.025)}px;
|
|
fill: #6b7280;
|
|
}
|
|
.pos {
|
|
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
|
|
font-size: ${Math.round(width * 0.017)}px;
|
|
font-weight: bold;
|
|
fill: #666;
|
|
}
|
|
.def {
|
|
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
|
|
font-size: ${Math.round(width * 0.025)}px;
|
|
fill: #111827;
|
|
}
|
|
.num {
|
|
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
|
|
font-size: ${Math.round(width * 0.025)}px;
|
|
fill: #6b7280;
|
|
}
|
|
</style>
|
|
|
|
<!-- Card background -->
|
|
<rect x="8" y="8" width="${width - 16}" height="${height - 16}" rx="5" ry="5" class="card"/>
|
|
|
|
<!-- Content -->
|
|
<g transform="translate(32,36)">
|
|
<!-- Headword -->
|
|
<text class="headword" x="0" y="0">${word}</text>
|
|
|
|
<!-- Pronunciation -->
|
|
<text class="pron" x="0" y="20">${phonetic}</text>
|
|
|
|
<!-- POS -->
|
|
<text class="pos" x="13" y="45">${types}</text>
|
|
|
|
<!-- Definition 1 -->
|
|
${defs.map((def, idx) => `
|
|
<text class="num" x="0" y="${75 + idx * vOffset}">${idx + 1}.</text>
|
|
<text class="def" x="24" y="${75 + idx * vOffset}">${def}</text>
|
|
`)}
|
|
</g>
|
|
</svg>
|
|
`;
|
|
|
|
const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
|
|
const url = URL.createObjectURL(svgBlob);
|
|
|
|
try {
|
|
const img = await loadImage(url);
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = Math.ceil(width * scale);
|
|
canvas.height = Math.ceil(height * scale);
|
|
const ctx = canvas.getContext('2d');
|
|
if (background !== 'transparent' || type !== 'image/png') {
|
|
ctx.fillStyle = background === 'transparent' ? '#0000' : background;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
const blob = await new Promise(res => canvas.toBlob(res, type, quality));
|
|
if (!blob) throw new Error('Canvas.toBlob returned null.');
|
|
return blob;
|
|
} finally {
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function loadImage(src) {
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
img.crossOrigin = 'anonymous';
|
|
img.decoding = 'async';
|
|
img.onload = () => resolve(img);
|
|
img.onerror = reject;
|
|
img.src = src;
|
|
});
|
|
}
|
|
|
|
async function inlineEverything(srcNode, dstNode) {
|
|
copyComputedStyle(srcNode, dstNode);
|
|
|
|
// Remove interactive states that may be captured on touch devices
|
|
if (dstNode instanceof Element) {
|
|
// Reset outline from :focus state
|
|
dstNode.style.setProperty('outline', 'none', 'important');
|
|
// Reset any pointer-events to ensure no hover states
|
|
const cs = window.getComputedStyle(srcNode);
|
|
// Only override cursor if it's pointer (indicating interactivity)
|
|
if (cs.cursor === 'pointer') {
|
|
dstNode.style.setProperty('cursor', 'default', 'important');
|
|
}
|
|
}
|
|
|
|
if (srcNode instanceof HTMLTextAreaElement) {
|
|
dstNode.textContent = srcNode.value;
|
|
} else if (srcNode instanceof HTMLInputElement) {
|
|
dstNode.setAttribute('value', srcNode.value);
|
|
if ((srcNode.type === 'checkbox' || srcNode.type === 'radio') && srcNode.checked) {
|
|
dstNode.setAttribute('checked', '');
|
|
}
|
|
} else if (srcNode instanceof HTMLSelectElement) {
|
|
const sel = Array.from(srcNode.options).filter(o => o.selected).map(o => o.value);
|
|
Array.from(dstNode.options).forEach(o => (o.selected = sel.includes(o.value)));
|
|
}
|
|
|
|
if (srcNode instanceof HTMLCanvasElement) {
|
|
try {
|
|
const dataURL = srcNode.toDataURL();
|
|
const img = document.createElement('img');
|
|
img.src = dataURL;
|
|
copyBoxSizing(dstNode, img);
|
|
dstNode.replaceWith(img);
|
|
dstNode = img;
|
|
} catch { }
|
|
}
|
|
|
|
// Handle img elements to ensure they render properly
|
|
if (srcNode instanceof HTMLImageElement && dstNode instanceof HTMLImageElement) {
|
|
// Convert image to data URL for inlining
|
|
if (srcNode.complete && srcNode.naturalWidth > 0) {
|
|
try {
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = srcNode.naturalWidth;
|
|
canvas.height = srcNode.naturalHeight;
|
|
ctx.drawImage(srcNode, 0, 0);
|
|
dstNode.src = canvas.toDataURL('image/png');
|
|
// Also set width/height to ensure proper rendering
|
|
const cs = window.getComputedStyle(srcNode);
|
|
dstNode.style.width = cs.width;
|
|
dstNode.style.height = cs.height;
|
|
dstNode.style.objectFit = cs.objectFit;
|
|
} catch (err) {
|
|
// If cross-origin or other error, keep original src
|
|
console.log('Could not inline image:', err);
|
|
dstNode.src = srcNode.src;
|
|
}
|
|
} else {
|
|
// Image not loaded or has no dimensions, use src as-is
|
|
dstNode.src = srcNode.src || srcNode.getAttribute('src') || '';
|
|
}
|
|
// Remove alt text from being rendered
|
|
dstNode.removeAttribute('alt');
|
|
}
|
|
|
|
materializePseudo(srcNode, dstNode, '::before');
|
|
materializePseudo(srcNode, dstNode, '::after');
|
|
|
|
const sKids = srcNode.childNodes;
|
|
const dKids = dstNode.childNodes;
|
|
for (let i = 0; i < sKids.length; i++) {
|
|
const s = sKids[i], d = dKids[i];
|
|
if (s && d && s.nodeType === 1 && d.nodeType === 1) await inlineEverything(s, d);
|
|
}
|
|
|
|
function copyComputedStyle(src, dst) {
|
|
const cs = window.getComputedStyle(src);
|
|
let cssText = '';
|
|
for (const prop of cs) cssText += `${prop}:${cs.getPropertyValue(prop)};`;
|
|
dst.setAttribute('style', (dst.getAttribute('style') || '') + cssText);
|
|
|
|
// Always keep transform origin consistent
|
|
if (cs.transformOrigin) dst.style.transformOrigin = cs.transformOrigin;
|
|
|
|
// Keep each line painting its own decoration (helps some engines)
|
|
dst.style.setProperty('box-decoration-break', 'clone', 'important');
|
|
dst.style.setProperty('-webkit-box-decoration-break', 'clone', 'important');
|
|
|
|
// --- CAPSULE FIX: prevent decorated inline from splitting across lines ---
|
|
if (preventCapsuleSplit) {
|
|
const hasBg = (cs.backgroundImage && cs.backgroundImage !== 'none') ||
|
|
(cs.backgroundColor && cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && cs.backgroundColor !== 'transparent');
|
|
const hasRadius = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
|
|
.some(k => parseFloat(cs[k]) > 0);
|
|
const hasPad = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']
|
|
.some(k => parseFloat(cs[k]) > 0);
|
|
const isInlineLevel = cs.display.startsWith('inline');
|
|
|
|
if (isInlineLevel && (hasBg || hasRadius || hasPad)) {
|
|
// Make it behave like a chip for capture: no internal wrapping
|
|
dst.style.setProperty('display', 'inline-block', 'important');
|
|
dst.style.setProperty('white-space', 'nowrap', 'important');
|
|
// In case original allowed breaking long words, emulate by clipping
|
|
if (cs.overflowWrap === 'break-word' || cs.wordBreak === 'break-all') {
|
|
dst.style.setProperty('max-width', cs.maxWidth && cs.maxWidth !== 'none' ? cs.maxWidth : '100%', 'important');
|
|
dst.style.setProperty('overflow', 'hidden', 'important');
|
|
dst.style.setProperty('text-overflow', 'ellipsis', 'important');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function copyBoxSizing(src, dst) {
|
|
const cs = window.getComputedStyle(src);
|
|
dst.style.width = cs.width;
|
|
dst.style.height = cs.height;
|
|
dst.style.display = cs.display;
|
|
dst.style.objectFit = 'contain';
|
|
}
|
|
|
|
function materializePseudo(src, dst, which) {
|
|
const ps = window.getComputedStyle(src, which);
|
|
if (!ps || ps.content === '' || ps.content === 'none') return;
|
|
const span = document.createElement('span');
|
|
let cssText = '';
|
|
for (const prop of ps) cssText += `${prop}:${ps.getPropertyValue(prop)};`;
|
|
span.setAttribute('style', cssText);
|
|
|
|
const content = ps.content;
|
|
const quoted = /^(['"]).*\1$/.test(content);
|
|
if (quoted) span.textContent = content.slice(1, -1).replace(/\\n/g, '\n');
|
|
else if (content.startsWith('attr(')) {
|
|
const attrName = content.slice(5, -1).trim();
|
|
span.textContent = src.getAttribute(attrName) || '';
|
|
} else span.textContent = '';
|
|
|
|
if (which === '::before') dst.insertBefore(span, dst.firstChild);
|
|
else dst.appendChild(span);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function shareDOM(target, title, text, filename) {
|
|
try {
|
|
// Remove any active/focus states before capturing
|
|
// This is especially important on touch devices (Android)
|
|
if (document.activeElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
|
|
// Wait a brief moment for any :active states to clear
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Make a crisp image (PNG keeps transparency; use JPEG for smaller files)
|
|
const blob = await screenshotDOM(target, {
|
|
scale: Math.max(2, window.devicePixelRatio || 2),
|
|
type: 'image/png',
|
|
background: 'white'
|
|
});
|
|
|
|
const file = new File([blob], filename || 'share.png', {
|
|
type: blob.type,
|
|
lastModified: Date.now()
|
|
});
|
|
|
|
// Web Share API with files (Android Chrome, iOS/iPadOS Safari 16+).
|
|
if (navigator.canShare && navigator.canShare({ files: [file] })) {
|
|
await navigator.share({ title, text, files: [file] });
|
|
return;
|
|
}
|
|
|
|
// Copy image to clipboard (desktop Chrome/Edge, some Android)
|
|
if (navigator.clipboard && window.ClipboardItem) {
|
|
try {
|
|
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
|
|
alert('Screenshot copied to clipboard');
|
|
return;
|
|
} catch (clipErr) {
|
|
// Clipboard write failed (common on Android), fall through to download
|
|
console.log('Clipboard write not allowed, downloading instead:', clipErr);
|
|
}
|
|
}
|
|
|
|
// Fallback: prompt a download
|
|
const dlUrl = URL.createObjectURL(blob);
|
|
const a = Object.assign(document.createElement('a'), {
|
|
href: dlUrl,
|
|
download: 'share.png'
|
|
});
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
URL.revokeObjectURL(dlUrl);
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert(`share failed: ${err?.message || err}`);
|
|
} finally { }
|
|
}
|