易企秀海报导出图片

易企秀超高清截图。百分百正确去水印,导出原图脚本需要请私聊。此脚本为基础版,支持部分海报正确导出 去水印原图。

// ==UserScript==
// @name         易企秀海报导出图片
// @namespace    http://tampermonkey.eqxposter.1.0.baseVresion.net/
// @version      1.0
// @description  易企秀超高清截图。百分百正确去水印,导出原图脚本需要请私聊。此脚本为基础版,支持部分海报正确导出 去水印原图。
// @author       zouys
// @match        https://www.eqxiu.com/h2/create/*
// @icon         https://img.douyucdn.cn/data/yuba/default/2021/08/26/202108260113528146305214128.jpg?i=3729ce896e75556d73b47749933df87293
// @run-at       document-start
// @grant        GM_xmlhttpRequest
// @connect      font.eqh5.com
// @connect      asset.eqh5.com
// ==/UserScript==
/**
 目前思路:
 通过canvas画板,按照html中的设定样式挨个画出,导出为图片
 图片通过接口抓取地址,
 带字体文本,通过svg保存为图片(编码实现)

 理论上可行,可设置图片分辨率
 根据下载图片的分辨率,理论上存在最大分辨率

 */
(function() {
    'use strict';

    if(typeof GM_xmlhttpRequest=='undefined'){
        console.error('GM_xmlhttpRequest not support!')
        return ;
    }
    let btn=document.createElement('button')
    btn.style.width='250px;'
    btn.style.height='50px;'
    btn.style.position='absolute'
    btn.style.left='50%'
    btn.style.top='70px'
    btn.style.zindex='999999'
    btn.style.backgroundColor='yellow'
    btn.onclick=()=>{domain()}
    btn.innerText='一键导出图片'
    document.body.appendChild(btn);


    //捕获请求获得的模版数据
    let templateData;
    //模版图片数据,用于获取无水印图片
    let templatePicListData;
    //画布
    let canvas;
    //画布上下文
    let ctx;
    //缩放值
    let scale;
    /**
     * 通过queue保存画布操作
     * 队列
     */
    let drawQueue = [];
    //字体
    let fontMap=new Map();
    //字体中文别名
    let fontNickNameMap=new Map();
    //字体对应url
    let fontUrlMap=new Map();
    //特殊字体用字,用于获取差异字体文件
    let specialFontMap=new Map();

    // 创建Canvas元素
    canvas = document.createElement('canvas');
    // Canvas上下文
    ctx = canvas.getContext('2d');
    /**
     * 将绘制操作添加到队列中
     * @param drawFunction 函数,队列中保存的函数
     */
    function addToDrawQueue(drawFunction) {
        drawQueue.push(drawFunction);
    }
    /**
     * 从队列中取出绘制操作并执行,默认会取出队列
     * @param execute 默认为true,从队列头部取出操作
     * @returns {Promise<void>}
     */
    async function runDrawQueue(execute = true) {
        await new Promise(function (resolve, reject) {
            if (drawQueue.length > 0 && execute) {
                let drawFunction = drawQueue.shift();
                drawFunction();
                resolve();
            } else {
                console.warn('drawQueue is empty');
                reject()
            }
        })
    }
    /**
     * 根据url,提升画质
     *     *https://asset.eqh5.com//store/bade83874ac8f0d467738052ff2a5ef6.jpg?
     *     * imageMogr2/auto-orient
     *     * /quality/100
     *     * /cut/976x2048x194x0
     * @param imageUrl 图片地址
     * @param quality 质量,1-100,越大越清晰
     * @returns {*|string} 返回加工后的图片地址
     */
    let upgradeImage=(imageUrl,quality)=>{
        if(imageUrl.includes('quality/')){
            let stringArr=imageUrl.split('quality/');
            return stringArr[0]+'quality/'+quality+(stringArr[1].length>3?stringArr[1].substring(stringArr[1].indexOf('/')):'');
        }else
            return imageUrl
    }
    /**
     * 将画布转为图片
     * @param canvas 已完成操作的画布
     */
    let canvasToImage=(canvas)=>{
        // 获取转换后的图片数据
        const imageData = canvas.toDataURL('image/jpeg',1);

        let downloadLink = document.createElement('a');
        downloadLink.href = imageData;
        downloadLink.download = 'test.jpeg';
        downloadLink.click();
        Vue.loading.close()
    }
    /**
     * 图片加载完成后,进行画布操作
     * @param image 图片
     * @param canvas 画布,弱耦合,获取画布宽高
     * @param ctx 画布上下文,用于画操作
     * @param dx 在画布中开画的起始x轴坐标
     * @param dy 在画布中开画的起始y轴坐标
     * @param dWidth 默认为画布宽带,规定所画图片的宽带,等比例缩放。
     * @param dHeight 默认为画布高度,规定所画图片的高度,等比例缩放。
     * @returns {Promise<void>} 可同步等待完成
     */
    let imageLoad=async (image,canvas,ctx,dx,dy,dWidth,dHeight)=>{
        console.log(image.msg,`,加载成功:像素:${image.naturalWidth}*${image.naturalHeight}`);
        //console.log('图片高度:',image.naturalHeight,'px');
        //console.log('图片宽度:',image.naturalWidth,'px');
        //console.log(image);

        //画出背景图,保存ctx,独立每次操作
        //ctx.save();
        //ctx.globalAlpha = 0.5;
        await ctx.drawImage(image,dx,dy,dWidth || canvas.width,dHeight || canvas.height);
        //ctx.globalAlpha = 1;
        //ctx.restore();
        //await canvasToImage(canvas);
    }

    /**
     * 队列处理,逐个出队
     */
    function drawLoop(){
        runDrawQueue().then()
        while(drawQueue.length>0){
            runDrawQueue().then();
        }
        try {
            canvasToImage(canvas);
            console.log("图片导出成功!")
        }catch (e) {
            console.warn("图片最后导出异常!",e)

        }
    }
    function getDateString() {
        let currentDate = new Date();
        let year = currentDate.getFullYear();
        let month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 月份从0开始,所以要加1,然后确保两位数
        let day = ('0' + currentDate.getDate()).slice(-2); // 获取日期并确保两位数
        let hours = ('0' + currentDate.getHours()).slice(-2); // 获取小时并确保两位数
        let minutes = ('0' + currentDate.getMinutes()).slice(-2); // 获取分钟并确保两位数
        let seconds = ('0' + currentDate.getSeconds()).slice(-2); // 获取秒并确保两位数
        let daysOfWeek = ['Sunday周日', 'Monday周一', 'Tuesday周二', 'Wednesday周三', 'Thursday周四', 'Friday周五', 'Saturday周六'];
        let dayOfWeek = daysOfWeek[currentDate.getDay()];

        // 构建时间字符串,格式为 YYYY-MM-DD HH:MM:SS DayOfWeek
        let currentDateString = year + '年-' + month + '月-' + day + '日 ' + hours + '时:' + minutes + '分:' + seconds + '秒 ' + dayOfWeek;
        return (currentDateString);
    }
    //劫持函数
    function addXMLRequestCallback(callback) {
        // oldSend 旧函数 i 循环
        var oldSend, i;
        //判断是否有callbacks变量
        if (XMLHttpRequest.callbacks) {
            //判断XMLHttpRequest对象下是否存在回调列表,存在就push一个回调的函数
            XMLHttpRequest.callbacks.push(callback);
        } else {
            //如果不存在则在xmlhttprequest函数下创建一个回调列表/callback数组
            XMLHttpRequest.callbacks = [callback];
            // 保存 XMLHttpRequest 的send函数
            oldSend = XMLHttpRequest.prototype.send;
            //获取旧xml的send函数,并对其进行劫持(替换)  function()则为替换的函数
            XMLHttpRequest.prototype.send = function () {
                // 把callback列表上的所有函数取出来
                for (i = 0; i < XMLHttpRequest.callbacks.length; i++) {
                    // 把this传入进去
                    XMLHttpRequest.callbacks[i](this);
                }
                //循环回调xml内的回调函数
                // 调用旧的send函数 并传入this 和 参数
                oldSend.apply(this, arguments);
            };
        }
    }
    //传入回调 接收xhr变量
    addXMLRequestCallback(function (xhr) {
        //调用劫持函数,填入一个function的回调函数
        //回调函数监听了对xhr调用了监听load状态,并且在触发的时候再次调用一个function,进行一些数据的劫持以及修改
        xhr.addEventListener("load", function () {
            // 输出xhr所有相关信息
            if (xhr.readyState === 4 && xhr.status === 200) {
                //  如果xhr请求成功 则返回请求路径
                //console.log("函数1", xhr.responseURL);
                // 捕获模版元素 数据 用于获取特殊字体
                if(xhr.responseURL.includes('https://p1.eqxiu.com/m/print/page/save') || xhr.responseURL.includes('https://p1.eqxiu.com/m/print/page/batch/save')){
                    console.log(xhr.response)
                    if(JSON.parse(xhr.response).obj){
                        templateData=JSON.parse(xhr.response).obj.elements;
                        console.log("捕获请求数据:",templateData);
                    }
                }
                // 捕获 模板 字体数据或 所用图片列表
                else if (xhr.responseURL.includes("https://emw-api.eqxiu.com/copyright/list-style")){
                    //console.log(JSON.parse(xhr.response))
                    if(JSON.parse(xhr.response).obj.picList){
                        templatePicListData=JSON.parse(xhr.response).obj.picList;
                        console.log("捕获请求图片列表:",templatePicListData)
                    }
                }
            }
        });

    });
    let getSpecialFont=async (eleList) => {
        try {
            if (eleList) {
                //获取模版用字,特殊字体字
                //叠加获取字体,style和list-style不可信
                for (const ele of eleList) {
                    //console.log(ele)
                    if (ele.property.content && (ele.property.fontFamilyName !== "默认字体")) {
                        //获取特殊字
                        let fontFamily;
                        let fontFamilyName = ele.property.fontFamilyName;

                        if (ele.property.contentStyle && ele.property.contentStyle.fontFamily) {
                            fontFamily = ele.property.contentStyle.fontFamily;

                        } else {
                            //根据fontFamilyName来获取对应的font
                            if(fontNickNameMap.size>0){
                                for(let [key, value] of fontNickNameMap.entries()) {
                                    if (value === fontFamilyName) {
                                        fontFamily = key;
                                        break;
                                    }
                                }
                            }else{
                                console.warn("字体别名查询异常!");
                            }
                        }
                        if(ele.css && ele.css.fontFamily){
                            fontFamily = ele.css.fontFamily;
                        }
                        //去除所有空格
                        let fontContent = ele.property.content.replace(/\s/g, '');
                        //检查是否为时间格式的
                        //showLayerLabel='日期...'
                        if(ele.property.showLayerLabel && ele.property.showLayerLabel.includes("日期")) {
                            fontContent = getDateString().replace(/\s/g, '');
                        }
                        console.log("fontContent", fontContent);
                        //保存多种字体用字
                        specialFontMap.set(fontFamily, specialFontMap.get(fontFamily) ? (specialFontMap.get(fontFamily) + fontContent) : fontContent);
                        //增加字体
                        if(!fontUrlMap.has(fontFamily)){
                            fontUrlMap.set(fontFamily, `https://font.eqh5.com/store/fonts/${fontFamily}.woff`);
                        }
                    }
                }
                console.log("特殊字体字:", specialFontMap)
                //文件差异化装载到map中
                try {
                    if(fontUrlMap.size>0){
                        for(let [key,value] of fontUrlMap.entries()) {
                            //console.log(value)
                            if(!fontMap.has(key)){
                                //去重
                                value=value+'?text='+encodeURIComponent(Array.from(new Set(specialFontMap.get(key))).join(''));
                                //获取字体数据
                                fontMap.set(key, await requestFontDate(value));
                                console.log(`字体:${key},别名${fontNickNameMap.get(key)},文件已差异化加载到map`)
                            }
                        }
                        //console.log("fontMap:",fontMap)
                    }else {
                        console.log("本模版使用默认字体!")
                    }
                }catch (e) {
                    console.error("字体map装载出错",e)
                }

            }

        } catch (e) {
            console.warn("模版特殊用字获取失败!导出图片可能为默认字体!");
            console.warn(e);
        }
    }
    /**
     * 根据dom中的style装载字体map,不装载默认字体
     * */
    let initFont=async (defaultFont) => {
        try {
            let styleNodeCollection = document.getElementsByTagName('style');
            let arr = Array.from(styleNodeCollection);
            for (let index = 0; index < arr.length; index++) {
                //序列化
                let styleNode = new XMLSerializer().serializeToString(arr[index]);
                //console.log("styleNode:",styleNode)
                let fontMatches = styleNode.match(/@font-face\s*{[^}]*}/g)
                //console.log(fontMatches)
                if (fontMatches && fontMatches.length > 0) {
                    for(let matchString of fontMatches) {
                        let fontString = matchString;
                        let font;
                        if(fontString.split('font-family:"')[1] && fontString.split('font-family:"')[1].split('";')[0]){
                            font = fontString.split('font-family:"')[1].split('";')[0]
                            console.log("检测到字体:",font);
                        }else {
                            continue;
                        }

                        if (font && !fontUrlMap.has(font) && font!==defaultFont && font!=='element-icons') {
                            //获取这个字体的url
                            //https://font.eqh5.com/store/fonts/ZYADMGWSBZ.woff?text=%E7%88%B1%E7%9A%84%E7%9B%AE%E5%85%89%E6%97%A0%E6%89%80%E4%B8%8D%E5%9C%A8
                            let url = fontString.split('url(')[1].split(')')[0]
                            //纯净url,组装获取所需要的字
                            //url=url.split('?')[0]+'?'+`text=${encodeURIComponent(specialFontMap.get(font))}`;
                            //字体别名存储
                            try {
                                fontNickNameMap.set(font, decodeURIComponent(url.split('text=')[1]))
                            } catch (e) {
                                console.warn("字体别名存储失败!导出字体可能失效!")
                            }
                            //纯净url
                            url=url.split('?text=')[0];
                            console.log(`字体:${font},别名${fontNickNameMap.get(font)} ,对应url:${url}`)

                            fontUrlMap.set(font, url)

                        } else {
                            //console.error(`字体:${font}`)
                        }
                    }
                } else {
                    //console.warn("未找到:@font-face 字段")
                }
            }
            console.log("字体urlMap",fontUrlMap);

        } catch (e) {
            console.error("字体初始化异常!", e)
        }
    }
    /**
     *
     * */
    let getDiv2Svg=(div)=>{
        let mySvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        let divRect=window.getComputedStyle(div);
        div.setAttribute("xmlns",'http://www.w3.org/1999/xhtml');
        mySvg.setAttribute('width', divRect.width+'');
        mySvg.setAttribute('height', divRect.height+'');
        // 创建一个 foreignObject 元素,用于包装原始 div 元素
        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        foreignObject.setAttribute('width', '100%');
        foreignObject.setAttribute('height', '100%');
        foreignObject.appendChild(div.cloneNode(true));
        //包含特殊字体处理
        if(divRect.fontFamily && divRect.fontFamily!=="SourceHanSansCN_Normal"){
            mySvg=fontStyleInnerSvg(mySvg,divRect.fontFamily);
        }
        mySvg.appendChild(foreignObject);
        let mySvgData = new XMLSerializer().serializeToString(mySvg);
        return "data:image/svg+xml,"+mySvgData;
    }
    async function domain() {
        console.log('do it')
        console.log('do it')
        /*以下需要等待懒加载全部加载成功后调用*/
        Vue.loading.open('导出中...')
        /*eqc-editor  根元素*/
        //获取根节点
        const editorRoot = document.querySelector('.eqc-editor');
        //获取根节点宽高信息
        const editorRootRect = editorRoot.getBoundingClientRect();
        //获取编辑器中所有子节点,包括水印
        //const childDivALL = editorRoot.children;
        /*根据编辑器 高宽 ,设置画布,最后导出为图片*/

        canvas.width = editorRootRect.width;
        canvas.height = editorRootRect.height;
        //画出背景图  eqc-background
        //无水印获取图片
        //获取背景图div
        try{
            let background_div_0 = editorRoot.children[0].children[1].children[0];
            let background_url;
            if((new XMLSerializer().serializeToString(background_div_0)).includes('background')){
                let myBackground_url = window.getComputedStyle(background_div_0).backgroundImage.split('"')[1].split('"')[0]
                //  图片画质提升
                background_url = await upgradeImage(myBackground_url, 100);
                //console.log("背景图画质提升后url:",background_url);
            }else {
                //转为svg
                try {
                    background_div_0=editorRoot.children[0];
                    background_url=getDiv2Svg(background_div_0);

                }catch (e) {
                    console.warn("背景图转为svg失败!导出图片可能会有缺失!")
                }
            }
            if(!background_url){
                console.warn("背景图url解析失败!")
            }else {
                //同步加载背景图片,并存入队列,防止错位
                let image;
                await new Promise((resolve, reject) => {
                    try {
                        let image = new Image();
                        //防止跨域问题
                        image.setAttribute("crossOrigin", 'anonymous');
                        image.src = background_url;
                        image.msg = '背景图片';
                        resolve(image)
                    } catch (e) {
                        reject(e);
                        console.error('Failed to load image:', e)
                    }
                }).then((v)=>{
                    image=v;
                },r=>{
                    console.log(r)
                    image.msg="null image!"
                })
                console.log(image.msg,",入队!")
                //console.log(image)
                addToDrawQueue(() => {
                    imageLoad(image, canvas, ctx, 0, 0,null,null);
                })
            }
        }catch (e) {
            console.log(e)
        }
        //初始化字体map,排除默认字体
        await initFont("SourceHanSansCN_Normal");
        /**
         * 获取特殊字体
         * */
        await getSpecialFont(templateData);


        /*获取 eqc-elements */
        let eqcEle = document.querySelector('.eqc-elements');
        //获取缩放值
        scale = parseFloat(eqcEle.style.transform.split('(')[1].split(')')[0]);

        //编辑器中的div集合,包裹svg或者图片  .h2-core-check-ele
        const divCollect = document.querySelector('.eqc-elements').querySelectorAll('div')
        let domObjectArr=[];
        await divCollect.forEach((value)=>{
            if(value.style.zIndex){
                domObjectArr.push({
                    dom: value,
                    zIndex: value.style.zIndex
                });
            }
        })
        domObjectArr.sort((a, b) => {
            // 将zIndex转换为数字进行比较
            return parseInt(a.zIndex) - parseInt(b.zIndex);
        });
        console.log("dom元素数组:",domObjectArr)
        //遍历集合,确定其中是svg还是图片,得按顺序入队使用for
        let loopArr=domObjectArr
            for (let key = 0; key < loopArr.length; key++) {
                //console.log("value:", value)
                let value=loopArr[key];
                let svg = value.dom.querySelector('svg');
                let img=value.dom.querySelector('img');
                let div=value.dom.querySelector('div');
                //svg,画到canvas
                if (svg) {
                    //svg中包含image标签的情况
                    let svgImage=svg.querySelectorAll('image');
                    if(svgImage.length > 0){
                        // console.log("svgImage[0]:",svgImage[0]);
                        // console.log(svgImage[0].href.baseVal)
                        svgImage[0].src= await new Promise((resolve, reject) => {
                            // 创建一个 Image 对象
                            const img = new Image();

                            // 允许加载跨域图像
                            img.crossOrigin = "Anonymous";
                            img.src=svgImage[0].href.baseVal
                            // 图像加载完成后的处理
                            img.onload = function () {
                                // 创建一个 Canvas 元素
                                const canvas = document.createElement('canvas');
                                const ctx = canvas.getContext('2d');

                                // 设置 Canvas 的宽度和高度
                                canvas.width = img.width;
                                canvas.height = img.height;

                                // 将图像绘制到 Canvas 上
                                ctx.drawImage(img, 0, 0);

                                // 获取 Canvas 上的图像数据
                                const imageData = canvas.toDataURL('image/png'); // 使用 'image/png' 格式

                                // 解析 Base64 数据并返回
                                resolve(imageData);
                            };

                            // 加载失败的处理
                            img.onerror = function (e) {
                                reject(e);
                            };}
                            )
                        //console.log("svgImage[0].src",svgImage[0].src);
                        // 获取 Canvas 上的图像数据
                         // 使用 'image/png' 格式
                        //svgImage[0].src = myCanvas.toDataURL('image/png');
                    }
                    let svgData = new XMLSerializer().serializeToString(svg);
                    let valueData=new XMLSerializer().serializeToString(value.dom);
                    /* SVG父节点中包含旋转样式的处理*/
                    if(valueData.includes('rotate')){
                        let rect=window.getComputedStyle(value.dom);
                        let matrix=rect.getPropertyValue('transform');
                        let angle=0;
                        if(matrix!==''){
                            let values = matrix.split('(')[1].split(')')[0].split(',');
                            let a = parseFloat(values[0]);
                            let b = parseFloat(values[1]);
                            angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
                            let mySvg=svg.cloneNode(true);
                            mySvg.setAttribute('transform',`rotate(${angle})`);
                            svgData=new XMLSerializer().serializeToString(mySvg);
                        }else {
                            console.warn('图片没有旋转!但进入了旋转适应函数!')
                            return
                        }
                    }
                    //console.log(svgData)
                    /*svg对应字体获取*/
                    //获取字体名
                    if(svgData.includes("font-family"))
                    {
                        let font=svgData.split('font-family:')[1].split(';')[0]
                        try {
                            console.log(`检测到字体:${font}`)
                            if(font!=="SourceHanSansCN_Normal"&& fontMap.has(font)){
                                svgData=new XMLSerializer().serializeToString(fontStyleInnerSvg(svg,font));
                            }
                        }catch (e) {
                            console.warn("字体加载出错!",e)
                        }
                    }
                    //console.log(`svg:${svgData}`)
                    // 将SVG绘制到Canvas上
                    let blob = await new Blob([svgData], {type: 'image/svg+xml;base64,'});
                    //console.log("src:",URL.createObjectURL(blob))
                    await getImage2Queue(URL.createObjectURL(blob),key,svg,value,"svg")

                }
                //img,画到canvas
                else if(img){
                    //console.log("图片地址:",img.src)
                    //水印检查
                    img.src=checkPicWaterMaskUrl(img.src)
                    //质量提升
                    img.src=upgradeImage(img.src,100);
                    await getImage2Queue(img.src,key,img,value,"img");
                }
                else if(div){
                     //有多种情况
                    if(div.children.length>0){
                        //包含的是其他标签
                        //canvas
                        let flag=div.children[0];
                        if(flag instanceof HTMLCanvasElement){
                            //canvas->image->function
                            let canvas = flag;
                            let ctx = canvas.getContext('2d');

                            // 将 Canvas 的背景颜色设置为透明
                            canvas.style.backgroundColor = "transparent";

                            // 获取 Canvas 的宽度和高度
                            let width = canvas.width;
                            let height = canvas.height;

                            // 创建一个新的 Canvas 元素
                            let newCanvas = document.createElement('canvas');
                            let newCtx = newCanvas.getContext('2d');

                            // 设置新 Canvas 的宽度和高度
                            newCanvas.width = width;
                            newCanvas.height = height;

                            // 清空新 Canvas
                            newCtx.clearRect(0, 0, width, height);

                            // 获取 Canvas 上的非透明内容
                            let imageData = ctx.getImageData(0, 0, width, height);

                            // 在新 Canvas 上绘制非透明内容
                            newCtx.putImageData(imageData, 0, 0);

                            // 将新 Canvas 的背景颜色设置为透明
                            newCanvas.style.backgroundColor = "transparent";

                            // 将新 Canvas 转换为图片
                            let url = newCanvas.toDataURL('image/jpeg', 1);
                            await getImage2Queue(url, key, flag, value, "div has canvas");
                            continue;
                        }
                    }
                    // 获取 style 属性值
                    let styleAttr = div.getAttribute('style');
                    // 通过正则表达式匹配背景图片地址
                    let backgroundImageURL = styleAttr.match(/background:\s*url\(['"]?([^'"]*)['"]?\)/);

                    // 提取背景图片地址
                    if (backgroundImageURL && backgroundImageURL.length > 1) {
                        /**
                         * div中包含背景图片的情况
                         * @type {string}
                         */
                        try{
                            let imageURL = backgroundImageURL[1];
                            /**
                             * 检查图片是否带水印   捕获请求
                             * https://emw-api.eqxiu.com/copyright/list-style
                             * https://p1.eqxiu.com/m/print/findProductByIdsWithOrderCheck
                             * */
                            //水印检查
                            imageURL=checkPicWaterMaskUrl(imageURL)
                            //console.log("水印检查后image:",imageURL)
                            //质量提升
                            imageURL=upgradeImage(imageURL,100);
                            //console.log("div has image src:",imageURL);
                            await getImage2Queue(imageURL,key,div,value,"div to image");
                        }catch (e) {
                            console.warn("div背景图片url导出失败!导出图片可能会有缺失!",e)
                        }

                    } else {
                        //console.warn('未找到div内嵌图片地址。');
                        /**
                         * 纯div,div中包含文字
                         */
                        try {
                            let mySvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                            let divRect=window.getComputedStyle(div);
                            let divData=new XMLSerializer().serializeToString(value.dom);
                            if(divData.includes('rotate')){
                                /* 父节点中包含旋转样式的处理*/
                                let rect=window.getComputedStyle(value.dom);
                                let matrix=rect.getPropertyValue('transform');
                                let angle=0;
                                if(matrix!==''){
                                    let values = matrix.split('(')[1].split(')')[0].split(',');
                                    let a = parseFloat(values[0]);
                                    let b = parseFloat(values[1]);
                                    angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
                                    mySvg.setAttribute('transform',`rotate(${angle})`);
                                    //svgData=new XMLSerializer().serializeToString(svg);
                                }else {
                                    console.warn('图片没有旋转!但进入了旋转适应函数!')
                                    return
                                }

                            }
                            div.setAttribute("xmlns",'http://www.w3.org/1999/xhtml');
                            mySvg.setAttribute('width', divRect.width+'');
                            mySvg.setAttribute('height', divRect.height+'');
                            // 创建一个 foreignObject 元素,用于包装原始 div 元素
                            let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
                            foreignObject.setAttribute('width', '100%');
                            foreignObject.setAttribute('height', '100%');
                            foreignObject.appendChild(div.cloneNode(true));
                            //包含特殊字体处理
                            if(divRect.fontFamily && divRect.fontFamily!=="SourceHanSansCN_Normal"){
                                mySvg=fontStyleInnerSvg(mySvg,divRect.fontFamily);
                            }
                            mySvg.appendChild(foreignObject);
                            let mySvgData = new XMLSerializer().serializeToString(mySvg);
                            // let image=new Image();
                            // image.src="data:image/svg+xml,"+mySvgData;

                            // 将SVG绘制到Canvas上
                            //let myBlob = await new Blob([mySvgData], {type: 'image/svg+xml;charset=utf-8;base64,'});
                            //console.log("div to svg src:","data:image/svg+xml,"+mySvgData);

                            //这里采用数据uri,绕过浏览器检查,使用blob会导致画布被污染。
                            await getImage2Queue("data:image/svg+xml,"+mySvgData,key,div,value,"div to svg")
                        }catch (e) {
                            console.warn("div文字转为svg失败!导出图片可能会有缺失!")
                        }
                    }


                }
            }


        console.log("queue is :",drawQueue);
        //开始执行队列操作
        drawLoop();

    }
    /**
     * @param svgNode svg节点
     * @param font 字体
     * @returns String 序列化svg标签字符串
     * */
    let fontStyleInnerSvg=(svgNode,font)=>{
        /**
         * 尝试将字体嵌入svg标签中
         * */
        try {
            // 创建 <defs> 元素
            let defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
            let style = document.createElementNS("http://www.w3.org/2000/svg", "style");
            style.innerHTML = `
                                @font-face {
                                  font-family: ${font};
                                  src: url(${fontMap.get(font)});
                                  }
                            `;
            /*src: url('${fontMap.get(font)}');
            * src: url(https://asset.eqh5.com/store/0e46c94fe4785f70847594775d3e8cc3.woff format('woff'));
            * */
            defs.appendChild(style);
            // svg.appendChild(defs);
            svgNode.insertBefore(defs, svgNode.childNodes[0]);
            return svgNode;
        }catch (e) {
            console.warn("字体内嵌时错误",e)
        }
    }
    /**
     *
     * @param src 图片src
     * @returns String 重塑的无水印URL或原始URL
     */
    let checkPicWaterMaskUrl=(src)=>{
        let fullPath=src;
        src=fullPath.split('.com/')[1];
        let endPath='';
        if(src.split('?')[1]){
            endPath=src.split('?')[1];
            src=src.split('?')[0];
        }
        //console.log("fullPath,src,endPath",fullPath,src,endPath);
        let temp=src;
        if(templatePicListData.length>0){
            for (const value of templatePicListData) {
                //console.log("picList src:",src)
                //console.log("picList watermarkPath:",value.productTypeMap.watermarkPath)
                if(value.productTypeMap.watermarkPath && src===value.productTypeMap.watermarkPath){
                    src=value.productTypeMap.path!==src?value.productTypeMap.path:(src);
                    if(src===temp){
                        console.warn("图片未去水印!导出图片可能有问题!");
                    }else {
                        console.log("内嵌图已去水印!src:",src);
                    }

                }
            }
        }
        //console.log("检查后src:",realUrl)
        return fullPath.split('.com/')[0] + '.com/' + src + (endPath === '' ? '' : '?' + endPath);
    }


    /**
     *
     * @param url 图片src
     * @param key 顺序标识
     * @param self 自身节点
     * @param parent 父节点,用于获取宽高及起始坐标
     * @param source 来源 div svg img 标签
     * @returns {Promise<void>} 需同步等待操作完成
     */
    let getImage2Queue=async (url,key,self,parent,source,)=> {

        try {
            //console.log("self:",self)
            let imgChild = new Image();
            imgChild.setAttribute("crossOrigin", 'Anonymous');
            imgChild.msg = `子图片[${key}](源:${source})`;
            url=source !== "svg" ? url : upgradeImage(url, 100);
            /*try {
                //图片旋转检查
                if(new XMLSerializer().serializeToString(parent).includes("rotate")){
                    imgChild.src=await getRotatedImage(parent, url);
                }else {
                    imgChild.src = url;
                    console.log('图片不旋转');
                }
            }catch (e) {

            }*/
            imgChild.src = url;
            // 使用 Promise 包装图片加载过程
            await new Promise((resolve, reject) => {
                imgChild.onload = () => resolve();
                imgChild.onerror = reject;
            });
            //console.log(imgChild)
            //画的起始位置,(left,top) * scale
            //通过父元素div获取

            let rect = window.getComputedStyle(parent.dom);
            let rectSelf=window.getComputedStyle(self);
            let left = parseFloat(rect.left) * scale ;
            let top = parseFloat(rect.top) * scale ;
            //console.log("onload:", left, top)
            //  svg的宽高,(width,height) * scale
            //  实际宽高考虑内边距   padding 本元素内边距
            //  ((width,height) - 2*padding) * scale
            let svgWidth = (parseFloat(rect.width) - 2*parseFloat(rectSelf.padding)) * scale;
            let svgHeight = (parseFloat(rect.height) - 2*parseFloat(rectSelf.padding)) * scale;
            console.log(`子svg:层级:${parent.zIndex},开始位置xy和图片宽高(${left},${top},${svgWidth},${svgHeight})`)
            console.log(imgChild.msg, ",入队!")
            addToDrawQueue(() => {
                imageLoad(imgChild, canvas, ctx, left, top, svgWidth, svgHeight).then();
            })

        } catch (e) {
            console.warn("图片宽高设置失败!导出图片可能不正确!",e)
        }
    }

    /**
     * @param nodeParent 父节点
     * @param imageSrc 图片索引
     * @returns image 图片对象
     * */
    let getRotatedImage=async  (nodeParent,imageSrc)=>{
        //使用缓存canvas生成图片后在旋转
        let cacheCanvas=document.createElement("canvas");

        let cacheCtx=cacheCanvas.getContext("2d");
        let image = new Image();
        let rect=window.getComputedStyle(nodeParent);
        cacheCanvas.width=parseFloat(rect.width);
        cacheCanvas.height=parseFloat(rect.height);
        let matrix=rect.getPropertyValue('transform');
        let angle=0;
        if(matrix!==''){
            let values = matrix.split('(')[1].split(')')[0].split(',');
            let a = parseFloat(values[0]);
            let b = parseFloat(values[1]);
            angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
        }else {
            console.warn('图片没有旋转!但进入了旋转适应函数!')
            return
        }
        if(angle!==0){
            //构造图片,并画到临时canvas上
            image.onload=()=>{
                cacheCtx.drawImage(image,0,0,cacheCanvas.width,cacheCanvas.height);
                //旋转角度
                if(angle!==0){
                    cacheCtx.rotate(angle)
                }else {
                    console.warn('未检测到旋转角度!')
                }
                console.log('旋转后的图片:',cacheCanvas.toDataURL('image/jpeg',1));
                return cacheCanvas.toDataURL('image/jpeg',1);
            }

            image.src=imageSrc;
        }

    }
    async function requestFontDate(url) {
        return await new Promise((resolve) => {
            GM_xmlhttpRequest({
                'url': url,
                method: 'GET',
                headers: {
                    "accept": "*/*",
                    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
                    "priority": "u=0",
                    "sec-ch-ua": "\"Chromium\";v=\"124\", \"Microsoft Edge\";v=\"124\", \"Not-A.Brand\";v=\"99\"",
                    "sec-ch-ua-mobile": "?0",
                    "sec-ch-ua-platform": "\"Windows\"",
                    "sec-fetch-dest": "font",
                    "sec-fetch-mode": "cors",
                    "sec-fetch-site": "cross-site",
                    "referrer": "https://www.eqxiu.com/",
                    "referrerPolicy": "strict-origin-when-cross-origin",
                    "mode": "cors",
                    "credentials": "omit",
                    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0"
                },
                responseType: 'blob',
                onload: async function (res) {
                    if (res.status===200){
                        console.log(`${url}请求成功!`,res)
                        var byteString = res.response;
                        var arrayBuffer = new Uint8Array(byteString.length);
                        for (var i = 0; i < byteString.length; i++) {
                            arrayBuffer[i] = byteString.charCodeAt(i);
                        }
                       /*if(Base64){
                       }else{
                           console.warn("base64 not load")
                       }*/
                        var blob = new Blob([byteString], { type: 'application/font-woff;charset=utf-8' });
                        var file = new File([blob], 'font.woff', { type: 'application/font-woff;charset=utf-8' });
                        var reader = new FileReader();
                        reader.onload = function(event) {
                            var base64String = event.target.result;
                            //console.log(base64String); // 输出 Base64 编码的字符串
                            resolve(base64String)
                        };
                        reader.readAsDataURL(file);
                    }else{
                        console.log("请求失败!")
                    }
                },
                onerror: function (err) {
                    console.warn('请求错误!' +err.message)
                }
            });
        })
    }


/*let requestFontDate=async (url)=>{
        try{

            let response=await fetch(url, {
                "headers": {
                    "accept": "*!/!*",
                    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
                    "priority": "u=0",
                    "sec-ch-ua": "\"Chromium\";v=\"124\", \"Microsoft Edge\";v=\"124\", \"Not-A.Brand\";v=\"99\"",
                    "sec-ch-ua-mobile": "?0",
                    "sec-ch-ua-platform": "\"Windows\"",
                    "sec-fetch-dest": "font",
                    "sec-fetch-mode": "cors",
                    "sec-fetch-site": "cross-site"
                },
                "referrer": "https://www.eqxiu.com/",
                "referrerPolicy": "no-referrer-when-downgrade",
                "body": null,
                "method": "GET",
                "mode": "cors",
                "credentials": "omit"
            })
            if (response.status===200){
                let blob=await response.blob()
                let reader =await new FileReader()
                return new Promise((resolve, reject) => {
                    reader.onload = () => {
                        resolve(reader.result);
                    };
                    reader.onerror = () => {
                        reject(reader.error);
                    };
                    reader.readAsDataURL(blob);
                });
            }else{
                console.log("请求失败!")
            }
        }catch (e) {
            console.warn("请求失败!",e)
        }
    }*/
    /**********************************************************************************/
        /*
        html2canvas(document.getElementsByClassName('eqc-editor')[0]).then(canvas => {
            // 创建一个图片元素
            var img = canvas.toDataURL("image/png");

            // 可以选择将图片添加到页面中
            //var image = document.createElement('img');
            //image.src = img;
            //document.body.appendChild(image);

            // 也可以选择下载图片
            var downloadLink = document.createElement('a');
            downloadLink.href = img;
            downloadLink.download = 'html-snapshot.png';
            downloadLink.click();
        });
         }*/
        /**********************************************************************************/
        /**********************************************************************************/
        /* */
        /**********************************************************************************/
        /* div  to  svg*/
        /**********************************************************************************/
        /* convertToSVG()
         function convertToSVG() {
             const div = document.querySelectorAll('.h2-core-check-ele')[0];
             const svg = convertToSVGElement(div);
             svg.id='mysvg';
             document.body.appendChild(svg);
             svgToImage('mysvg');
         }

         function convertToSVGElement(htmlElement) {
             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             const html = new XMLSerializer().serializeToString(htmlElement.cloneNode(true));
             svg.innerHTML = `<foreignObject width="100%" height="100%">${html}</foreignObject>`;
             return svg;
         }*/
        /**********************************************************************************/




    // Your code here...
})();