// 引入 html2canvas
import html2canvas from 'html2canvas';


async function captureElement(elementSelector, image_name = 'screenshot_from_html2canvas') {
    const element = document.querySelector(elementSelector);
    // 获取元素的实际渲染尺寸
    const rect = element.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;

    // 创建临时容器（避免截取时元素被缩放影响布局）
    const container = document.createElement('div');
    Object.assign(container.style, {
        position: 'fixed',
        left: '-9999px',      // 隐藏到屏幕外
        width: `${width}px`,  // 固定容器尺寸
        height: `${height}px`
    });
    document.body.appendChild(container);

    // 克隆元素到临时容器（保持样式）
    const clone = element.cloneNode(true);
    container.appendChild(clone);

    // width和height是为了和屏幕上显示的大小一致，不加也可以
    const canvas = await html2canvas(element, {
        useCORS: true,       // 允许跨域资源
        logging: false,      // 关闭日志
        scale: 1,            // 必须设为 1，否则尺寸会缩放
        width: width,        // 显式设置宽高
        height: height,
        backgroundColor: null // 透明背景
    });

    // 转换为图片 URL
    const url = canvas.toDataURL('image/png', 1.0);
    const data = {
        url: url,
        filename: `${image_name}.png`
    }
    // downloadImg(data);
    postMessage({type: "download_image", data})
    return url
}