function desEncrypt(str, key = 'df6a551ca43181fc485f3043bcdd2fbc') {
            var APIFMS
            try {
                var keyHex_encrypt = CryptoJS.enc.Utf8.parse(key)
                var encrypted = CryptoJS.DES.encrypt(str, keyHex_encrypt, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                })
                APIFMS = CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
            } catch (err) {
                console.log('des 加密 -------------------------')
                console.log(err)
            }
            return APIFMS
        }

        (function (fabric) {
            fabric.CurvedText = fabric.util.createClass(fabric.Object, {
                type: 'curved-text',
                diameter: 250,
                kerning: 0,
                text: '',
                flipped: false,
                fill: '#000',
                fontFamily: 'Times New Roman',
                fontSize: 24, // in px
                fontWeight: 'normal',
                fontStyle: '', // "normal", "italic" or "oblique".
                cacheProperties: fabric.Object.prototype.cacheProperties.concat('diameter', 'textBackgroundColor', 'kerning', 'flipped', 'fill', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'strokeStyle', 'strokeWidth'),
                strokeStyle: null,
                strokeWidth: 0,
                initialize: function (text, options) {
                    options || (options = {});
                    if (typeof text === 'object' && text) {
                        for (let key in text) {
                            this[key] = text[key]
                        }
                    } else {
                        this.text = text;
                    }
                    this.callSuper('initialize', options);
                    this.set('lockUniScaling', true);
                    var canvas = this.getCircularText();
                    this.cropCanvas(canvas);
                    this.set('width', canvas.width);
                    this.set('height', canvas.height);
                },
                _getFontDeclaration: function () {
                    return [
                        (fabric.isLikelyNode ? this.fontWeight : this.fontStyle),
                        (fabric.isLikelyNode ? this.fontStyle : this.fontWeight),
                        this.fontSize + 'px',
                        (fabric.isLikelyNode ? ('"' + this.fontFamily + '"') : this.fontFamily)
                    ].join(' ');
                },
                cropCanvas: function (canvas) {
                    var ctx = canvas.getContext('2d'),
                        w = canvas.width,
                        h = canvas.height,
                        pix = { x: [], y: [] }, n,
                        imageData = ctx.getImageData(0, 0, w, h),
                        fn = function (a, b) { return a - b };
                    for (var y = 0; y < h; y++) {
                        for (var x = 0; x < w; x++) {
                            if (imageData.data[((y * w + x) * 4) + 3] > 0) {
                                pix.x.push(x);
                                pix.y.push(y);
                            }
                        }
                    }
                    // 如果没有找到任何非透明像素，直接返回，不进行裁剪
                    if (pix.x.length === 0 || pix.y.length === 0) {
                        return;
                    }
                    pix.x.sort(fn);
                    pix.y.sort(fn);
                    n = pix.x.length - 1;
                    w = pix.x[n] - pix.x[0];
                    h = pix.y[n] - pix.y[0];
                    // 确保宽度和高度是有效的正数
                    if (w <= 0 || h <= 0 || isNaN(w) || isNaN(h)) {
                        return;
                    }
                    var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
                    canvas.width = w;
                    canvas.height = h;
                    ctx.putImageData(cut, 0, 0);
                },
                getCircularText: function () {
                    var text = this.text,
                        diameter = this.diameter,
                        flipped = this.flipped,
                        kerning = this.kerning,
                        fill = this.fill,
                        inwardFacing = true,
                        startAngle = 0,
                        canvas = fabric.util.createCanvasElement(),
                        ctx = canvas.getContext('2d'),
                        cw, // character-width
                        x, // iterator
                        clockwise = -1; // draw clockwise for aligned right. Else Anticlockwise
                    if (flipped) {
                        // startAngle = 180;
                        inwardFacing = false;
                    }
                    startAngle *= Math.PI / 180; // convert to radians
                    var d = document.createElement('div');
                    d.style.fontFamily = this.fontFamily;
                    d.style.fontSize = this.fontSize + 'px';
                    d.style.fontWeight = this.fontWeight;
                    d.style.fontStyle = this.fontStyle;
                    d.textContent = text;
                    document.body.appendChild(d);
                    var textHeight = d.offsetHeight;
                    document.body.removeChild(d);
                    canvas.width = canvas.height = diameter;
                    ctx.font = this._getFontDeclaration();
                    if (inwardFacing) { text = text.split('').reverse().join('') };
                    ctx.translate(diameter / 2, diameter / 2); // Move to center
                    startAngle += (Math.PI * !inwardFacing); // Rotate 180 if outward
                    ctx.textBaseline = 'middle'; // Ensure we draw in exact center
                    ctx.textAlign = 'center'; // Ensure we draw in exact center
                    for (x = 0; x < text.length; x++) {
                        cw = ctx.measureText(text[x]).width;
                        startAngle += ((cw + (x == text.length - 1 ? 0 : kerning)) / (diameter / 2 - textHeight)) / 2 * -clockwise;
                    }
                    ctx.rotate(startAngle);
                    for (x = 0; x < text.length; x++) {
                        cw = ctx.measureText(text[x]).width; // half letter
                        ctx.rotate((cw / 2) / (diameter / 2 - textHeight) * clockwise);
                        if (this.strokeStyle && this.strokeWidth) {
                            ctx.strokeStyle = this.strokeStyle;
                            ctx.lineWidth = this.strokeWidth;
                            ctx.miterLimit = 2;
                            ctx.strokeText(text[x], 0, (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2));
                        }
                        ctx.fillStyle = fill;
                        ctx.fillText(text[x], 0, (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2));
                        ctx.rotate((cw / 2 + kerning) / (diameter / 2 - textHeight) * clockwise); // rotate half letter
                    }
                    return canvas;
                },
                _set: function (key, value) {
                    switch (key) {
                        case 'scaleX':
                            this.fontSize *= value;
                            this.diameter *= value;
                            this.width *= value;
                            this.scaleX = 1;
                            if (this.width < 1) { this.width = 1; }
                            break;
                        case 'scaleY':
                            this.height *= value;
                            this.scaleY = 1;
                            if (this.height < 1) { this.height = 1; }
                            break;
                        default:
                            this.callSuper('_set', key, value);
                            break;
                    }
                },
                _render: function (ctx) {
                    var canvas = this.getCircularText();
                    this.cropCanvas(canvas);
                    this.set('width', canvas.width);
                    this.set('height', canvas.height);
                    ctx.drawImage(canvas, -this.width / 2, -this.height / 2, this.width, this.height);
                    this.setCoords();
                },
                toObject: function (propertiesToInclude) {
                    return this.callSuper('toObject', ['text', 'diameter', 'textBackgroundColor', 'kerning', 'flipped', 'fill', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'strokeStyle', 'strokeWidth'].concat(propertiesToInclude));
                }
            });
            fabric.CurvedText.fromObject = function (object, callback, forceAsync) {
                return fabric.Object._fromObject('CurvedText', object, callback, forceAsync, 'curved-text');
            };
        })(typeof fabric !== 'undefined' ? fabric : require('fabric').fabric);

        const remote = require('@electron/remote')
        var path = require('path');
        // 使用用户数据目录，避免写入需要管理员权限
        const exePath = remote.app.getPath('userData')
        const { ipcRenderer } = require('electron')
        const { dialog } = require('@electron/remote')
        var jrQrcode = require('jr-qrcode')
        var JsBarcode = require('jsbarcode')
        ipcRenderer.send('get-sys-fonts')
        ipcRenderer.send('get-scale-rate')
        const { clipboard } = require('electron')
        const dpi = 300
        // 内部剪贴板
        let clipboardData = {
            objects: null,
            offset: 10  // 粘贴位置偏移量
        };
        //var encrypt = new JSEncrypt();
        //encrypt.setPublicKey(`-----BEGIN PUBLIC KEY-----
        //MIGdMA0GCSqGSIb3DQEBAQUAA4GLADCBhwKBgQDAbKQ46WevL9PapJ+AlZqSzczkTovu7STH
        //FmZmIJcNrwPPEWRR2PliUvtS28V+gNMWlu3wNWFAS5KGDbTtndIrP3hnlp9BDIcAcdNuJUM7
        //yJfAYBhtkqvj45Orvdd2RYRxhkQb34uTNXpM+biMH6Wd0wykNb9/VBNM0C12KswEdwIBEQ==
        //-----END PUBLIC KEY-----`);
        layui.use(['layer', 'slider', 'form', 'colorpicker'], function () {
            let myDate = new Date()
            let s_lan = ''
            ipcRenderer.send('get-sys-language')
            /* if(myDate.getFullYear()>2021 && myDate.getMonth() >= 1 && myDate.getDate() > 15){
                           
                       }*/
            function GetFile() {
                const params = new URLSearchParams(window.location.search);
                return params
            }
            function langua_ge(lan = 'zh') {
                $("[language='m']").each(function (i) {
                    $(this).html($(this).attr(lan))
                })

                $("[language='t']").each(function (i) {
                    $(this).attr('title', $(this).attr(lan))
                })
            }
            function language_str(str) {
                let t = {
                    whetherSave: { zh: '是否保存当前文件？', ozh: '是否保存當前文件？', en: 'Do you want to save the current file?' },
                    save: { zh: '保存', ozh: '保存', en: 'Save' },
                    noSave: { zh: '不保存', ozh: '不保存', en: 'No saving' },
                    cancel: { zh: '取消', ozh: '取消', en: 'Cancel' },
                    saveSucc: { zh: '保存成功至', ozh: '保存成功至', en: 'Save successfully to' },
                    saveFile: { zh: '保存文件', ozh: '保存文件', en: 'Save file' },
                    display: { zh: '预览', ozh: '預覽', en: 'Display' },
                    output: { zh: '导出', ozh: '導出', en: 'Export' },
                    bg: { zh: '背景', ozh: '背景', en: 'Background' },
                    selectPic: { zh: '请选择图片', ozh: '請選擇圖片', en: 'Please select a picture' },
                    selectPic: { zh: '请选择文件', ozh: '請選擇文件', en: 'Please select a file' },
                    img: { zh: '圖片', ozh: '圖片', en: 'Image' },
                    simg: { zh: '合成圖片', ozh: '合成圖片', en: 'Synthesized Image' },
                    text: { zh: '文本', ozh: '文本', en: 'Text' },
                    "ctext": { zh: "圆形文本", ozh: "圆形文本", en: "Circle Text" },
                    stext: { zh: '合成文本', ozh: '合成文本', en: 'Synthesized Text' },
                    rect: { zh: '矩形', ozh: '矩形', en: 'Rectangle' },
                    circ: { zh: '圓形', ozh: '圓形', en: 'Circle' },
                    line: { zh: '直線', ozh: '直線', en: 'Line' },
                    qrc: { zh: '二維碼', ozh: '二維碼', en: 'QR code' },
                    barc: { zh: '條形碼', ozh: '條形碼', en: 'Barcode' },
                    counter: { zh: '計數器', ozh: '计数器', en: 'Counter' },
                    about: { zh: '关于Soon Design', ozh: '關於Soon Design', en: 'About Soon Design' },
                    vers: { zh: '版本', ozh: '版本', en: 'Version' },
                    comf: { zh: '确认', ozh: '確認', en: 'Select' },
                    copyright: { zh: "© 2022 cardsoon  Co., Ltd. All rights reserved.", ozh: "© 2022 cardsoon  Co., Ltd. All rights reserved.", en: "© 2022 cardsoon  Co., Ltd. All rights reserved." }
                }
                return t[str][s_lan]
            }

            var $ = layui.$
            var layer = layui.layer,
                slider = layui.slider,
                colorpicker = layui.colorpicker
            let addState = 0 //0是不添加
            let background_image, background_image1, background_image2
            let bg_version = 1 //front_bg1.png front_bg2.png
            var zoom = 0
            $('#canvas1').attr('height', document.body.clientHeight - 100)
            $('#canvas2').attr('height', document.body.clientHeight - 100)
            $('#object_attribute').css('height', '470px')
            $('#obj_list').css('height', document.body.clientHeight - 520)
            $('.obj_list').css('height', $('#obj_list').height() - 32)

            $('.main').show()
            $('#canvas1').attr('width', $('#canvas-div').width())
            $('#canvas2').attr('width', $('#canvas-div').width())
            var openAs = {
                _name: '',
                set name(val) {
                    if (val == '') {
                        $('title').html('Soon Design')
                    } else {
                        $('title').html('Soon Design - ' + val)
                    }
                    this._name = val
                },
                get name() {
                    return this._name
                }
            } //被打开的文件名
            let objs1 = []
            let objs2 = []
            let step1 = { val: 0 },
                step2 = { val: 0 }
            let step = step1
            let objs = objs1
            let recordJson1 = [],
                recordJson2 = [],
                recordJson = recordJson1,
                recordObjs1 = [],
                recordObjs2 = [],
                recordObjs = recordObjs1
            let pre_objs1 = [],
                pre_objs2 = [],
                next_objs1 = [],
                next_objs2 = [],
                pre_objs = pre_objs1,
                next_objs = next_objs1
            let pre_json1 = [],
                pre_json2 = [],
                next_json1 = [],
                next_json2 = [],
                pre_json = pre_json1,
                next_json = next_json1
            var canvas1 = new fabric.Canvas('canvas1')
            var canvas2 = new fabric.Canvas('canvas2')
            fabric.Object.prototype.objectCaching = false
            var ctx1 = canvas1.getSelectionContext()
            var ctx2 = canvas2.getSelectionContext()
            let is_bgi_add = false
            canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
            //console.log(canvas1.width / 2, canvas1.height / 2);
            //console.log($("#canvas-div").width() / 1200 > 1 ? 1 : $("#canvas-div").width() / 1200);
            canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
            zoom = $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200
            
            // 初始化标尺
            initRulers();
            $('#source_front').width(zoom * $('#source_front').width())
            $('#source_back').width(zoom * $('#source_back').width())
            $('.canvas-container:eq(1)').hide()
            var canvas = canvas1
            fabric.Object.prototype.set({
                borderColor: '#9013FE',
                cornerColor: '#9013FE', //激活状态角落图标的填充颜色
                cornerStrokeColor: '#9013FE', //激活状态角落图标的边框颜色
                borderOpacityWhenMoving: 1,
                borderScaleFactor: 1,
                cornerSize: 6,
                cornerStyle: 'circle', //rect,circle
                centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
                centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
                transparentCorners: false, //激活状态角落的图标是否透明
                rotatingPointOffset: 20, //旋转距旋转体的距离
                padding: 0
            })
            canvas1.preserveObjectStacking = true
            canvas2.preserveObjectStacking = true

            var front_list = []
            ipcRenderer.on('font-list', (event, data) => {
                const newFontList = []
                data.map((item) => {
                    if (item.indexOf('"') === 0) {
                        newFontList.push(item.replace(/^"|"$/g, ''))
                    } else {
                        newFontList.push(item)
                    }
                })
                front_list = newFontList
                for (let item of front_list) {
                    $('#text_font_family').append("<option value='" + item + "'>" + item + '</option>')
                    $("#circle_text_font_family").append("<option value='" + item + "'>" + item + "</option>");
                    $('#out_text_font_family').append("<option value='" + item + "'>" + item + '</option>')
                    $('#barcode_font_family').append("<option value='" + item + "'>" + item + '</option>')
                    $('#count_font_family').append("<option value='" + item + "'>" + item + '</option>')
                }
            })
            ipcRenderer.on('sys-lan', (event, data) => {
                let lang = localStorage.getItem('lang')
                if (lang) {
                    s_lan = lang
                    langua_ge(lang)
                    $('#language_select').val(lang)
                    return
                }
                switch (data) {
                    case 'zh-CN':
                        s_lan = 'zh'
                        langua_ge('zh')
                        $('#language_select').val('zh')
                        localStorage.setItem('lang', 'zh')
                        break
                    case 'zh':
                        s_lan = 'zh'
                        langua_ge('zh')
                        $('#language_select').val('zh')
                        localStorage.setItem('lang', 'zh')
                        break
                    case 'zh-TW':
                        s_lan = 'ozh'
                        langua_ge('ozh')
                        $('#language_select').val('ozh')
                        localStorage.setItem('lang', 'ozh')
                        break
                    case 'en':
                        s_lan = 'en'
                        langua_ge('en')
                        $('#language_select').val('en')
                        localStorage.setItem('lang', 'en')
                        break
                    case 'en-AU':
                        s_lan = 'en'
                        langua_ge('en')
                        $('#language_select').val('en')
                        localStorage.setItem('lang', 'en')
                        break
                    case 'en-CA':
                        s_lan = 'en'
                        langua_ge('en')
                        $('#language_select').val('en')
                        localStorage.setItem('lang', 'en')
                        break
                    case 'en-GB':
                        s_lan = 'en'
                        langua_ge('en')
                        $('#language_select').val('en')
                        localStorage.setItem('lang', 'en')
                        break
                    case 'en-NZ':
                        s_lan = 'en'
                        langua_ge('en')
                        $('#language_select').val('en')
                        localStorage.setItem('lang', 'en')
                        break
                    case 'en-US':
                        s_lan = 'en'
                        langua_ge('en')
                        $('#language_select').val('en')
                        localStorage.setItem('lang', 'en')
                        break
                    case 'en-ZA':
                        s_lan = 'en'
                        langua_ge('en')
                        $('#language_select').val('en')
                        localStorage.setItem('lang', 'en')
                        break
                }
            })
            ipcRenderer.on('close', (event, message) => {
                layer.confirm(
                    '<font style="color:black">' + language_str('whetherSave') + '</font>',
                    {
                        //是否保存当前文件？
                        btn: [language_str('save'), language_str('noSave'), language_str('cancel')], //['保存', '不保存', '取消']
                        btn3: function (index, layero) { }
                    },
                    function (index, layero) {
                        output(() => ipcRenderer.send('run-close'))
                        return
                        let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                        let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                        let _g1 = [],
                            _g2 = []
                        let left = 0,
                            top = 0
                        for (let _o of canvas1.getObjects()) {
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                                left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                                top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            _g1.push(fabric.util.object.clone(_o))
                        }
                        let fp = new fabric.Group(_g1).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                            ; (left = 0), (top = 0)
                        for (let _o of canvas2.getObjects()) {
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                                left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                                top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            _g2.push(fabric.util.object.clone(_o))
                        }
                        //let fp = new fabric.Group(_g1).toDataURL();
                        let bp = new fabric.Group(_g2).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                        let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
                        if (openAs.name != '') {
                            //打开的文件
                            let fs = require('fs')
                            o.soonType = 2
                            fs.writeFileSync(openAs.name, JSON.stringify(o))
                            layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                            saveHistory()

                            ipcRenderer.send('run-close')
                            return
                        }
                        dialog
                            .showSaveDialog({
                                title: language_str('saveFile'), //'保存文件'
                                filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
                            })
                            .then((result) => {
                                if (result.filePath == '') {
                                    ipcRenderer.send('run-close')
                                    return
                                }
                                if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
                                    result.filePath += '.soon'
                                }
                                let fs = require('fs')
                                o.soonType = 2
                                fs.writeFileSync(result.filePath, JSON.stringify(o))
                                openAs.name = result.filePath
                                layer.msg(language_str('saveSucc') + openAs.name) //保存成功至
                                saveHistory()
                                ipcRenderer.send('run-close')
                            })
                            .catch((err) => {
                                console.log()
                            })
                        layer.close(index)
                    },
                    function (index) {
                        ipcRenderer.send('run-close')
                    }
                )
            })

            addBackground() //添加背景 白色卡片

            initAligningGuidelines(canvas1)
            initAligningGuidelines(canvas2)
            //canvas.setZoom(0.5)
            //recordObjs1.push(JSON.stringify(objs1));
            //recordJson1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
            //recordObjs2.push(JSON.stringify(objs2));
            //recordJson2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
            canvas.renderAll() //重新渲染画布
            var zoomSlider = slider.render({
                elem: '#zoomSlide', //绑定元素
                min: 25,
                max: 500,
                value: 100,
                change(val) {
                    canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), val / 100)
                    zoom = val / 100
                    //$(".canvas-container").css("transform","scale(" + val / 100 + ")")
                }
            })
            window.rotate = function (id) {
                let angle = $(`#${id}`).attr('angle') - 0
                angle += 90
                $(`#${id}`).css('transform', `rotate(${angle}deg)`)
                $(`#${id}`).attr('angle', angle)
            }
            $('#display').on('click', function () {
                // 类型改变
                fabric.Image.fromURL('./public/images/front_bg' + bg_version + '_2.png', function (i1) {
                    i1.left = background_image.left
                    i1.top = background_image.top
                    let img1 = i1

                    fabric.Image.fromURL('./public/images/back_bg_2.png', function (i2) {
                        i2.left = background_image.left
                        i2.top = background_image.top
                        let img2 = i2
                        fabric.Image.fromURL('./public/images/op_2.png', function (i3) {
                            i2.left = background_image.left
                            i2.top = background_image.top
                            let img3 = i3
                            display_func(img1, img2, img3)
                        })
                    })
                })
            })
            // 导出文件
            async function savePdf(buffer) {
                let fs = require('fs');
                // 弹出保存对话框
                const { canceled, filePath } = await dialog.showSaveDialog({
                    title: '保存文件',
                    defaultPath: path.join(exePath, 'output.pdf'), // 默认路径
                    filters: [{ name: 'PDF 文件', extensions: ['pdf'] }] // 文件过滤器
                });

                if (canceled) {
                    console.log('用户取消了保存操作');
                    return;
                }

                // 将Buffer写入PNG文件到用户选择的路径
                fs.writeFile(filePath, buffer, (err) => {
                    if (err) {
                        console.error('写入文件失败:', err);
                    } else {
                        layer.msg(language_str("saveSucc") + filePath);//'保存成功至'
                        console.log('PNG文件已保存至:', filePath);
                    }
                });
            }
            function display_func(img1, img2, img3) {
                $('#base_control').hide()
                $('#line_control').hide()
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $('#circle_text_control').hide()
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
                $('#component_type').text(language_str('bg')) //"背景"
                canvas1.discardActiveObject().renderAll()
                canvas2.discardActiveObject().renderAll()
                let _objs1 = canvas1.getObjects()
                let g1 = []
                let g3 = []
                let g5 = []
                let left = 0 //左裁剪
                let top = 0 //顶裁剪
                let black_left = 0 //黑色左裁剪
                let black_top = 0 //黑色顶裁剪
                let all_left = 0 //预览图左裁剪
                let all_top = 0 //预览图顶裁剪
                for (let item of _objs1) {
                    let idx = getIndex(item, canvas1)
                    //console.log("------");
                    //console.log(item.getCoords());
                    //console.log(getCoordsMinX(background_image.getCoords()));
                    //console.log(getCoordsMinX(item.getCoords()));
                    //console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
                    //console.log("------");
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                        all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
                        all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    g3.push(fabric.util.object.clone(item))
                    if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
                        continue //计数器 或 合成文字
                    }
                    if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
                        continue //二维码 条形码
                    }
                    if (idx != 0 && objs1[idx - 1].type == 2) {
                        continue //合成图片
                    }
                    if (
                        idx != 0 &&
                        ((objs1[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
                            (
                                objs1[idx - 1].type == 11
                                &&
                                (item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
                                //圆形文字 && 黑色
                            ) ||
                            //文字 && 黑色
                            (objs1[idx - 1].type == 5 && //矩形
                                (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                    (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                            (objs1[idx - 1].type == 6 && //圆形
                                (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                    (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                            (objs1[idx - 1].type == 7 && //直线
                                (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
                            objs1[idx - 1].black == true) //勾选并入黑色图层
                        // (
                        //     objs1[idx-1].type == 1//固定图片
                        //     &&
                        //     objs1[idx-1].black == true //勾选并入黑色图层
                        // )
                    ) {
                        if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
                            black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                        }
                        if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
                            black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                        }
                        g5.push(fabric.util.object.clone(item))
                        continue //黑色文字 黑色矩形 黑色线条 黑色圆形
                    } else if (idx == 0) {
                        g5.push(fabric.util.object.clone(item))
                    }

                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
                        left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
                        top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    g1.push(fabric.util.object.clone(item))
                }
                let url1 = new fabric.Group(g1).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })

                // g3.push(img1)
                let url3 = new fabric.Group(g3).toDataURL({
                    height: 648,
                    width: 1012,
                    top: all_top / zoom,
                    left: all_left / zoom
                })
                let url5 = new fabric.Group(g5).toDataURL({
                    height: 648,
                    width: 1012,
                    top: black_top / zoom,
                    left: black_left / zoom
                })
                let _objs2 = canvas2.getObjects()
                let g2 = []
                let g4 = []
                let g6 = []
                left = 0
                top = 0
                black_top = 0
                black_left = 0
                all_top = 0
                all_left = 0
                for (let item of _objs2) {
                    let idx = getIndex(item, canvas2)
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                        all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
                        all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    g4.push(fabric.util.object.clone(item))
                    if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
                        continue //黑色字或计数器 或 合成文字
                    }
                    if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
                        continue //二维码 条形码
                    }
                    if (idx != 0 && objs2[idx - 1].type == 2) {
                        continue //合成图片
                    }
                    if (idx != 0 && objs2[idx - 1].type == 10) {
                        continue //合成图片
                    }
                    if (
                        idx != 0 &&
                        ((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
                            (
                                objs2[idx - 1].type == 11
                                &&
                                (item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
                                //圆形文字 && 黑色
                            ) ||
                            //文字 && 黑色
                            (objs2[idx - 1].type == 5 && //矩形
                                (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                    (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                            (objs2[idx - 1].type == 6 && //圆形
                                (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                    (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                    ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                            (objs2[idx - 1].type == 7 && //直线
                                (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
                            objs2[idx - 1].black == true) //勾选并入黑色图层
                        // (
                        //     objs2[idx-1].type == 1//固定图片
                        //     &&
                        //     objs2[idx-1].black == true //勾选并入黑色图层
                        // )
                    ) {
                        if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
                            black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                        }
                        if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
                            black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                        }
                        g6.push(fabric.util.object.clone(item))
                        continue //黑色文字 黑色矩形 黑色线条 黑色圆形
                    } else if (idx == 0) {
                        g6.push(fabric.util.object.clone(item))
                    }
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
                        left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
                        top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    g2.push(fabric.util.object.clone(item))
                }
                let url2 = new fabric.Group(g2).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })
                let white_url1 = canvas1.getObjects()[0].toDataURL({
                    height: 648,
                    width: 1012
                })
                // g4.push(img2)
                let url4 = new fabric.Group(g4).toDataURL({
                    height: 648,
                    width: 1012,
                    top: all_top / zoom,
                    left: all_left / zoom
                })
                let url6 = new fabric.Group(g6).toDataURL({
                    height: 648,
                    width: 1012,
                    top: black_top / zoom,
                    left: black_left / zoom
                })
                let white_url2 = canvas2.getObjects()[0].toDataURL({
                    height: 648,
                    width: 1012
                })
                //console.log(canvas.getObjects())
                let w = document.body.clientWidth * 0.7 + 'px'
                let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
                let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'

                if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
                    //高度超出，则按高度计算
                    h = document.body.clientHeight * 0.8 + 'px'
                    h1 = document.body.clientHeight * 0.8 - 150 + 'px'
                    w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
                }
                let fs = require('fs');
                const Buffer = require('buffer').Buffer;
                const buffer3 = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64');
                const printPath3 = path.join(exePath, 'print3.png');
                fs.writeFileSync(printPath3, buffer3);
                const buffer4 = Buffer.from(url4.replace(/^data:image\/\w+;base64,/, ""), 'base64');
                const printPath4 = path.join(exePath, 'print4.png');
                fs.writeFileSync(printPath4, buffer4);
                // 创建 PDF 实例
                const pdf = new jspdf.jsPDF({
                    orientation: 'landscape',
                    unit: 'px',
                    format: [1012, 648]
                });
                let btns = [language_str('output')]
                if ((objs1.length != 0) & (objs2.length == 0)) {
                    //只有正面
                    let img = new Image()
                    img.src = printPath3

                    pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
                    btns.push('打印正面')
                } else if ((objs1.length == 0) & (objs2.length != 0)) {
                    //只有背面
                    let img = new Image()
                    img.src = printPath4

                    pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
                    btns.push('打印背面')
                } else {
                    let img = new Image()
                    img.src = printPath3

                    pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)

                    pdf.addPage()
                    let img2 = new Image()
                    img2.src = printPath4
                    pdf.addImage(img2, 'JPEG', 0, 0, 1012, 648)
                    btns.push('打印正面')
                    btns.push('打印背面')
                }

                var pdfBlob = pdf.output('blob')
                var pdfBuffer  = pdf.output('arraybuffer')
                
                layer.open({
                    type: 1,
                    area: [w, h],
                    title: language_str('display'), //不显示标题栏"预览"
                    shadeClose: true, //点击遮罩关闭
                    content: `
                <div style="padding:20px;background-color:#1E252D;height:${h1};display:flex;align-items: center;overflow:hidden;">
                    <div style="/*position: relative;top: 50%;transform: translateY(-50%);*/display: flex;justify-content: space-between;">
                        <div class="rotate-div" id="displayImg1" angle="0">
                            <img src="${printPath3}" style="width:95%"/>
                            <div class="rotate-wrap" onclick="window.rotate('displayImg1')">
                                <img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
                            </div>
                        </div>
                        <div class="rotate-div" id="displayImg2" angle="0">
                            <img style="width:95%;/*margin-left:6%*/" src="${printPath4}"/>
                            <div class="rotate-wrap" onclick="window.rotate('displayImg2')">
                                <img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
                            </div>
                        </div>
                    </div>
                </div>`,
                    btn: btns, //'导出'
                    btn1: function (index, layero) {
                        savePdf(Buffer.from(pdfBuffer))
                    },
                    btn2: function () {
                        if (btns[1] === '打印正面') {
                            printJS({ printable: printPath3, type: 'image', style: 'img { width: 100%; height: auto; }' })
                        } else {
                            printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' })
                        }
                    },
                    btn3: function () {
                        //打印背面
                        printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' })
                    }
                })
            }
            function output(callback = null, _save = save) {
                // 类型改变
                fabric.Image.fromURL('./public/images/op_2.png', function (i1) {
                    i1.left = background_image.left
                    i1.top = background_image.top
                    let img1 = i1
                    fabric.Image.fromURL('./public/images/op_2.png', function (i2) {
                        i2.left = background_image.left
                        i2.top = background_image.top
                        let img2 = i2

                        $('#base_control').hide()
                        $('#line_control').hide()
                        $('#pic_control').hide()
                        $("#set_bg").hide();
                        $('#out_pic_control').hide()
                        $('#text_control').hide()
                        $("#circle_text_control").hide();
                        $('#out_text_control').hide()
                        $('#rect_control').hide()
                        $('#circle_control').hide()
                        $('#counter_control').hide()
                        $('#qrcode_Controll').hide()
                        $('#barcode_controll').hide()
                        $('#component_type').text(language_str('bg')) //"背景"
                        canvas1.discardActiveObject().renderAll()
                        canvas2.discardActiveObject().renderAll()
                        let _objs1 = canvas1.getObjects()
                        let g1 = []
                        let g3 = []
                        let g5 = [] //黑色图层
                        let left = 0 //左裁剪
                        let top = 0 //顶裁剪
                        let black_left = 0 //黑色左裁剪
                        let black_top = 0 //黑色顶裁剪
                        let all_left = 0 //预览图左裁剪
                        let all_top = 0 //预览图顶裁剪
                        for (let item of _objs1) {
                            let idx = getIndex(item, canvas1)
                            //console.log("------");
                            //console.log(item.getCoords());
                            //console.log(getCoordsMinX(background_image.getCoords()));
                            //console.log(getCoordsMinX(item.getCoords()));
                            //console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
                            //console.log("------");

                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                                all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
                                all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g3.push(fabric.util.object.clone(item))
                            if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
                                continue //计数器 或 合成文字
                            }
                            if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
                                continue //二维码 条形码
                            }
                            if (idx != 0 && objs1[idx - 1].type == 2) {
                                continue //合成图片
                            }
                            if (
                                idx != 0 &&
                                ((objs1[idx - 1].type == 3 && item.get('fill') == '#000000') ||
                                    (
                                        objs1[idx - 1].type == 11
                                        &&
                                        item.get("fill") == "#000000"
                                        //圆形文字 && 黑色
                                    ) ||
                                    //文字 && 黑色
                                    (objs1[idx - 1].type == 5 && //矩形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs1[idx - 1].type == 6 && //圆形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs1[idx - 1].type == 7 && //直线
                                        (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
                                    objs1[idx - 1].black == true) //勾选并入黑色图层
                                // ||
                                // (
                                //     objs1[idx-1].type == 1//固定图片
                                //     &&
                                //     objs1[idx-1].black == true //勾选并入黑色图层
                                // )
                            ) {
                                if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
                                    black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                                }
                                if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
                                    black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                                }
                                g5.push(fabric.util.object.clone(item))
                                continue //黑色文字 黑色矩形 黑色线条 黑色圆形
                            } else if (idx == 0) {
                                g5.push(fabric.util.object.clone(item))
                            }
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
                                left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
                                top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g1.push(fabric.util.object.clone(item))
                        }
                        let url1 = new fabric.Group(g1).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                        g3.push(img1)
                        let url3 = new fabric.Group(g3).toDataURL({
                            height: 648,
                            width: 1012,
                            top: all_top / zoom,
                            left: all_left / zoom
                        })
                        let url5 = new fabric.Group(g5).toDataURL({
                            height: 648,
                            width: 1012,
                            top: black_top / zoom,
                            left: black_left / zoom
                        })
                        let _objs2 = canvas2.getObjects()
                        let g2 = []
                        let g4 = []
                        let g6 = [] //黑色图层
                        left = 0
                        top = 0
                        black_left = 0 //黑色左裁剪
                        black_top = 0 //黑色顶裁剪
                        all_left = 0 //黑色左裁剪
                        all_top = 0 //黑色顶裁剪
                        for (let item of _objs2) {
                            let idx = getIndex(item, canvas2)
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                                all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
                                all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g4.push(fabric.util.object.clone(item))
                            if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
                                continue //计数器 或 合成文字
                            }
                            if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
                                continue //二维码 条形码
                            }
                            if (idx != 0 && objs2[idx - 1].type == 2) {
                                continue //合成图片
                            }
                            if (
                                idx != 0 &&
                                ((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
                                    (
                                        objs2[idx - 1].type ==11
                                        &&
                                        (item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
                                        //圆形文字 && 黑色
                                    ) ||
                                    //文字 && 黑色
                                    (objs2[idx - 1].type == 5 && //矩形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs2[idx - 1].type == 6 && //圆形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs2[idx - 1].type == 7 && //直线
                                        (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
                                    objs2[idx - 1].black == true) //勾选并入黑色图层
                                // (
                                //     objs2[idx-1].type == 1//固定图片
                                //     &&
                                //     objs2[idx-1].black == true //勾选并入黑色图层
                                // )
                            ) {
                                if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
                                    black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                                }
                                if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
                                    black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                                }
                                g6.push(fabric.util.object.clone(item))
                                continue //黑色文字 黑色矩形 黑色线条 黑色圆形
                            } else if (idx == 0) {
                                g6.push(fabric.util.object.clone(item))
                            }
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
                                left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
                                top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g2.push(fabric.util.object.clone(item))
                        }
                        let url2 = new fabric.Group(g2).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                        let white_url1 = canvas1.getObjects()[0].toDataURL({
                            height: 648,
                            width: 1012
                        })
                        g4.push(img2)
                        let url4 = new fabric.Group(g4).toDataURL({
                            height: 648,
                            width: 1012,
                            top: all_top / zoom,
                            left: all_left / zoom
                        })
                        let url6 = new fabric.Group(g6).toDataURL({
                            height: 648,
                            width: 1012,
                            top: black_top / zoom,
                            left: black_left / zoom
                        })
                        let white_url2 = canvas2.getObjects()[0].toDataURL({
                            height: 648,
                            width: 1012
                        })
                        //console.log(canvas.getObjects())
                        let w = document.body.clientWidth * 0.7 + 'px'
                        let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
                        let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'

                        if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
                            //高度超出，则按高度计算
                            h = document.body.clientHeight * 0.8 + 'px'
                            h1 = document.body.clientHeight * 0.8 - 150 + 'px'
                            w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
                        }

                        let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 }
                        if ((objs1.length != 0) & (objs2.length == 0)) {
                            op.flag = 2
                        } else if ((objs1.length == 0) & (objs2.length != 0)) {
                            op.flag = 3
                        }
                        op.frontColorPic = desEncrypt(url1)
                        op.backColorPic = desEncrypt(url2)
                        //op.frontBlPic = url5;
                        //op.backBlPic = url6;
                        op.frontBlackPic = desEncrypt(url5)
                        op.backBlackPic = desEncrypt(url6)
                        for (let item of _objs1) {
                            let idx = getIndex(item, canvas1)
                            if (idx == 0) continue //background-image
                            let type = objs1[idx - 1].type
                            if (type == 2) {
                                //out_pic
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 1,
                                    name: objs1[idx - 1].name,
                                    FontColor: objs1[idx - 1].black ? '#000000' : '@',
                                    transparency: item.get('opacity'),
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 3) {
                                //text
                                /*2022-07-26 黑色并入黑色图层
                                                    if(item.get("fill") == "#000000"){
                                                        //纯黑
                                                        op.frontData.push({
                                                            "type" : 2,
                                                            "Text" : item.get("text"),
                                                            "FontFamily" : item.get("fontFamily"),
                                                            "FontSize" : parseInt(item.get("fontSize")),
                                                            "FontColor" : "#000000",
                                                            "FontBackgroudColor" : item.get("textBackgroundColor"),
                                                            "Bold" : item.get("fontWeight") == "bold",
                                                            "Underline" : item.get("underline"),
                                                            "Italic" : item.get("fontStyle") == "italic",
                                                            "Strikeout" : item.get("linethrough"),
                                                            "x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
                                                            "y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
                                                            "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                                            "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                                            "rotate" : parseInt(item.get("angle").toFixed(0))
                                                        });
                                                    }
                                                    */
                            } else if (type == 11) {
                                //circle_text
                                op.frontData.push({
                                    "type" : 2,
                                    "Text" : item.get("text"),
                                    "FontFamily" : item.get("fontFamily"),
                                    "FontSize" : parseInt(item.get("fontSize")),
                                    "FontColor" : "#000000",
                                    "FontBackgroudColor" : item.get("textBackgroundColor"),
                                    "Bold" : item.get("fontWeight") == "bold",
                                    "Underline" : item.get("underline"),
                                    "Italic" : item.get("fontStyle") == "italic",
                                    "Strikeout" : item.get("linethrough"),
                                    "x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
                                    "y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
                                    "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                    "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                    "rotate" : parseInt(item.get("angle").toFixed(0)),
                                    "circleCenter" : objs1[idx - 1].circleCenter || 0
                                });
                            } else if (type == 4) {
                                //out_text
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 3,
                                    name: objs1[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    DefaultText: item.get('text'),
                                    FontBackgroudColor: item.get('textBackgroundColor'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontColor: item.get('fill'),
                                    Exceed: objs1[idx - 1].exceed,
                                    AutoWrap: objs1[idx - 1].autoWrap,
                                    FixSize: objs1[idx - 1].fixSize,
                                    Bold: item.get('fontWeight') == 'bold',
                                    Underline: item.get('underline'),
                                    Italic: item.get('fontStyle') == 'italic',
                                    Strikeout: item.get('linethrough'),
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0)),
                                    align: objs1[idx - 1].align
                                })
                            } else if (type == 8) {
                                //二维码
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 4,
                                    name: objs1[idx - 1].name,
                                    FontColor: objs1[idx - 1].color,
                                    DefaultText: objs1[idx - 1].val,
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 9) {
                                //条形码
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 5,
                                    name: objs1[idx - 1].name,
                                    FontSize: parseInt(objs1[idx - 1].fontSize),
                                    DefaultText: objs1[idx - 1].val,
                                    HideText: objs1[idx - 1].show,
                                    FontFamily: objs1[idx - 1].font,
                                    FontColor: objs1[idx - 1].color,
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 10) {
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 6,
                                    name: objs1[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontColor: item.get('fill'),
                                    start: objs1[idx - 1].start,
                                    add: parseInt(objs1[idx - 1].add),
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            }
                        }
                        //obj2
                        for (let item of _objs2) {
                            let idx = getIndex(item, canvas2)
                            if (idx == 0) continue //background-image
                            let type = objs2[idx - 1].type
                            if (type == 2) {
                                //out_pic
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 1,
                                    name: objs2[idx - 1].name,
                                    FontColor: objs2[idx - 1].black ? '#000000' : '@',
                                    transparency: item.get('opacity'),
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 3) {
                                //text
                                /*2022-07-26 黑色并入黑色图层
                                                    if(item.get("fill") == "#000000"){
                                                        //纯黑
                                                        op.backData.push({
                                                            "type" : 2,
                                                            "Text" : item.get("text"),
                                                            "FontFamily" : item.get("fontFamily"),
                                                            "FontSize" : parseInt(item.get("fontSize")),
                                                            "FontColor" : "#000000",
                                                            "FontBackgroudColor" : item.get("textBackgroundColor"),
                                                            "Bold" : item.get("fontWeight") == "bold",
                                                            "Underline" : item.get("underline"),
                                                            "Italic" : item.get("fontStyle") == "italic",
                                                            "Strikeout" : item.get("linethrough"),
                                                            "x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
                                                            "y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
                                                            "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                                            "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                                            "rotate" : parseInt(item.get("angle").toFixed(0))
                                                        });
                                                    }
                                                    */
                            } else if (type == 11) {
                                //circle_text
                                op.backData.push({
                                    "type" : 2,
                                    "Text" : item.get("text"),
                                    "FontFamily" : item.get("fontFamily"),
                                    "FontSize" : parseInt(item.get("fontSize")),
                                    "FontColor" : "#000000",
                                    "FontBackgroudColor" : item.get("textBackgroundColor"),
                                    "Bold" : item.get("fontWeight") == "bold",
                                    "Underline" : item.get("underline"),
                                    "Italic" : item.get("fontStyle") == "italic",
                                    "Strikeout" : item.get("linethrough"),
                                    "x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
                                    "y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
                                    "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                    "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                    "rotate" : parseInt(item.get("angle").toFixed(0)),
                                    "circleCenter" : objs2[idx - 1].circleCenter || 0
                                });
                            } else if (type == 4) {
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 3,
                                    name: objs2[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    DefaultText: item.get('text'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontBackgroudColor: item.get('textBackgroundColor'),
                                    FontColor: item.get('fill'),
                                    Exceed: objs2[idx - 1].exceed,
                                    AutoWrap: objs2[idx - 1].autoWrap,
                                    FixSize: objs2[idx - 1].fixSize,
                                    Bold: item.get('fontWeight') == 'bold',
                                    Underline: item.get('underline'),
                                    Italic: item.get('fontStyle') == 'italic',
                                    Strikeout: item.get('linethrough'),
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0)),
                                    align: objs2[idx - 1].align
                                })
                            } else if (type == 8) {
                                //二维码
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 4,
                                    name: objs2[idx - 1].name,
                                    FontColor: objs2[idx - 1].color,
                                    DefaultText: objs2[idx - 1].val,
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 9) {
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 5,
                                    name: objs2[idx - 1].name,
                                    DefaultText: objs2[idx - 1].val,
                                    HideText: objs1[idx - 1].show,
                                    FontSize: parseInt(objs2[idx - 1].fontSize),
                                    FontFamily: objs2[idx - 1].font,
                                    FontColor: objs2[idx - 1].color,
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 10) {
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 6,
                                    name: objs2[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontColor: item.get('fill'),
                                    start: parseInt(objs2[idx - 1].start),
                                    add: parseInt(objs2[idx - 1].add),
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            }
                        }
                        _save(op, callback)
                        //return false 开启该代码可禁止点击该按钮关闭
                    })
                })
            }
            $('#output').on('click', function () {
                output(null, saveAs)
                return
                // 类型改变
                fabric.Image.fromURL('./public/images/op_2.png', function (i1) {
                    i1.left = background_image.left
                    i1.top = background_image.top
                    let img1 = i1
                    fabric.Image.fromURL('./public/images/op_2.png', function (i2) {
                        i2.left = background_image.left
                        i2.top = background_image.top
                        let img2 = i2

                        $('#base_control').hide()
                        $('#line_control').hide()
                        $('#pic_control').hide()
                        $("#set_bg").hide();
                        $('#out_pic_control').hide()
                        $('#text_control').hide()
                        $("#circle_text_control").hide();
                        $('#out_text_control').hide()
                        $('#rect_control').hide()
                        $('#circle_control').hide()
                        $('#counter_control').hide()
                        $('#qrcode_Controll').hide()
                        $('#barcode_controll').hide()
                        $('#component_type').text(language_str('bg')) //"背景"
                        canvas1.discardActiveObject().renderAll()
                        canvas2.discardActiveObject().renderAll()
                        let _objs1 = canvas1.getObjects()
                        let g1 = []
                        let g3 = []
                        let g5 = [] //黑色图层
                        let left = 0 //左裁剪
                        let top = 0 //顶裁剪
                        let black_left = 0 //黑色左裁剪
                        let black_top = 0 //黑色顶裁剪
                        let all_left = 0 //预览图左裁剪
                        let all_top = 0 //预览图顶裁剪
                        for (let item of _objs1) {
                            let idx = getIndex(item, canvas1)
                            //console.log("------");
                            //console.log(item.getCoords());
                            //console.log(getCoordsMinX(background_image.getCoords()));
                            //console.log(getCoordsMinX(item.getCoords()));
                            //console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
                            //console.log("------");

                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                                all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
                                all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g3.push(fabric.util.object.clone(item))
                            if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
                                continue //计数器 或 合成文字
                            }
                            if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
                                continue //二维码 条形码
                            }
                            if (idx != 0 && objs1[idx - 1].type == 2) {
                                continue //合成图片
                            }
                            if (
                                idx != 0 &&
                                ((objs1[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
                                        (
                                            objs2[idx - 1].type ==11
                                            &&
                                            (item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
                                            //圆形文字 && 黑色
                                        ) ||
                                    //文字 && 黑色
                                    (objs1[idx - 1].type == 5 && //矩形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs1[idx - 1].type == 6 && //圆形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs1[idx - 1].type == 7 && //直线
                                        (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
                                    objs1[idx - 1].black == true) //勾选并入黑色图层
                                //    (
                                //        objs1[idx-1].type == 1//固定图片
                                //        &&
                                //        objs1[idx-1].black == true //勾选并入黑色图层
                                //    )
                            ) {
                                if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
                                    black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                                }
                                if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
                                    black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                                }
                                g5.push(fabric.util.object.clone(item))
                                continue //黑色文字 黑色矩形 黑色线条 黑色圆形
                            } else if (idx == 0) {
                                g5.push(fabric.util.object.clone(item))
                            }
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
                                left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
                                top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g1.push(fabric.util.object.clone(item))
                        }
                        let url1 = new fabric.Group(g1).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                        g3.push(img1)
                        let url3 = new fabric.Group(g3).toDataURL({
                            height: 648,
                            width: 1012,
                            top: all_top / zoom,
                            left: all_left / zoom
                        })
                        let url5 = new fabric.Group(g5).toDataURL({
                            height: 648,
                            width: 1012,
                            top: black_top / zoom,
                            left: black_left / zoom
                        })
                        let _objs2 = canvas2.getObjects()
                        let g2 = []
                        let g4 = []
                        let g6 = [] //黑色图层
                        left = 0
                        top = 0
                        black_left = 0 //黑色左裁剪
                        black_top = 0 //黑色顶裁剪
                        all_left = 0 //黑色左裁剪
                        all_top = 0 //黑色顶裁剪
                        for (let item of _objs2) {
                            let idx = getIndex(item, canvas2)
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
                                all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
                                all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g4.push(fabric.util.object.clone(item))
                            if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
                                continue //计数器 或 合成文字
                            }
                            if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
                                continue //二维码 条形码
                            }
                            if (idx != 0 && objs2[idx - 1].type == 2) {
                                continue //合成图片
                            }
                            if (
                                idx != 0 &&
                                ((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
                                    (
                                        objs2[idx - 1].type ==11
                                        &&
                                        (item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
                                        //圆形文字 && 黑色
                                    ) ||
                                    //文字 && 黑色
                                    (objs2[idx - 1].type == 5 && //矩形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs2[idx - 1].type == 6 && //圆形
                                        (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
                                            (item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
                                            ((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
                                    (objs2[idx - 1].type == 7 && //直线
                                        (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
                                    objs2[idx - 1].black == true) //勾选并入黑色图层
                                //  (
                                //      objs2[idx-1].type == 1//固定图片
                                //      &&
                                //      objs2[idx-1].black == true //勾选并入黑色图层
                                //  )
                            ) {
                                if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
                                    black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                                }
                                if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
                                    black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                                }
                                g6.push(fabric.util.object.clone(item))
                                continue //黑色文字 黑色矩形 黑色线条 黑色圆形
                            } else if (idx == 0) {
                                g6.push(fabric.util.object.clone(item))
                            }
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
                                left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
                                top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            g2.push(fabric.util.object.clone(item))
                        }
                        let url2 = new fabric.Group(g2).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                        let white_url1 = canvas1.getObjects()[0].toDataURL({
                            height: 648,
                            width: 1012
                        })
                        g4.push(img2)
                        let url4 = new fabric.Group(g4).toDataURL({
                            height: 648,
                            width: 1012,
                            top: all_top / zoom,
                            left: all_left / zoom
                        })
                        let url6 = new fabric.Group(g6).toDataURL({
                            height: 648,
                            width: 1012,
                            top: black_top / zoom,
                            left: black_left / zoom
                        })
                        let white_url2 = canvas2.getObjects()[0].toDataURL({
                            height: 648,
                            width: 1012
                        })
                        //console.log(canvas.getObjects())
                        let w = document.body.clientWidth * 0.7 + 'px'
                        let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
                        let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'

                        if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
                            //高度超出，则按高度计算
                            h = document.body.clientHeight * 0.8 + 'px'
                            h1 = document.body.clientHeight * 0.8 - 150 + 'px'
                            w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
                        }

                        let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 }
                        if ((objs1.length != 0) & (objs2.length == 0)) {
                            op.flag = 2
                        } else if ((objs1.length == 0) & (objs2.length != 0)) {
                            op.flag = 3
                        }
                        op.frontColorPic = desEncrypt(url1)
                        op.backColorPic = desEncrypt(url2)
                        //op.frontBlPic = url5;
                        //op.backBlPic = url6;
                        op.frontBlackPic = desEncrypt(url5)
                        op.backBlackPic = desEncrypt(url6)
                        for (let item of _objs1) {
                            let idx = getIndex(item, canvas1)
                            if (idx == 0) continue //background-image
                            let type = objs1[idx - 1].type
                            if (type == 2) {
                                //out_pic
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 1,
                                    name: objs1[idx - 1].name,
                                    FontColor: objs1[idx - 1].black ? '#000000' : '@',
                                    transparency: item.get('opacity'),
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 3) {
                                //text
                                /*2022-07-26 黑色并入黑色图层
                                                    if(item.get("fill") == "#000000"){
                                                        //纯黑
                                                        op.frontData.push({
                                                            "type" : 2,
                                                            "Text" : item.get("text"),
                                                            "FontFamily" : item.get("fontFamily"),
                                                            "FontSize" : parseInt(item.get("fontSize")),
                                                            "FontColor" : "#000000",
                                                            "FontBackgroudColor" : item.get("textBackgroundColor"),
                                                            "Bold" : item.get("fontWeight") == "bold",
                                                            "Underline" : item.get("underline"),
                                                            "Italic" : item.get("fontStyle") == "italic",
                                                            "Strikeout" : item.get("linethrough"),
                                                            "x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
                                                            "y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
                                                            "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                                            "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                                            "rotate" : parseInt(item.get("angle").toFixed(0))
                                                        });
                                                    }
                                                    */
                            } else if (type == 11) {
                                //circle_text
                                op.frontData.push({
                                    "type" : 2,
                                    "Text" : item.get("text"),
                                    "FontFamily" : item.get("fontFamily"),
                                    "FontSize" : parseInt(item.get("fontSize")),
                                    "FontColor" : "#000000",
                                    "FontBackgroudColor" : item.get("textBackgroundColor"),
                                    "Bold" : item.get("fontWeight") == "bold",
                                    "Underline" : item.get("underline"),
                                    "Italic" : item.get("fontStyle") == "italic",
                                    "Strikeout" : item.get("linethrough"),
                                    "x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
                                    "y" : parseInt((item.get("top") - background_image1.top).toFixed(0)),
                                    "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                    "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                    "rotate" : parseInt(item.get("angle").toFixed(0)),
                                    "circleCenter" : objs1[idx - 1].circleCenter || 0
                                });
                            } else if (type == 4) {
                                //out_text
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 3,
                                    name: objs1[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    DefaultText: item.get('text'),
                                    FontBackgroudColor: item.get('textBackgroundColor'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontColor: item.get('fill'),
                                    Exceed: objs1[idx - 1].exceed,
                                    AutoWrap: objs1[idx - 1].autoWrap,
                                    FixSize: objs1[idx - 1].fixSize,
                                    Bold: item.get('fontWeight') == 'bold',
                                    Underline: item.get('underline'),
                                    Italic: item.get('fontStyle') == 'italic',
                                    Strikeout: item.get('linethrough'),
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0)),
                                    align: objs1[idx - 1].align
                                })
                            } else if (type == 8) {
                                //二维码
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 4,
                                    name: objs1[idx - 1].name,
                                    FontColor: objs1[idx - 1].color,
                                    DefaultText: objs1[idx - 1].val,
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 9) {
                                //条形码
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 5,
                                    name: objs1[idx - 1].name,
                                    FontSize: parseInt(objs1[idx - 1].fontSize),
                                    DefaultText: objs1[idx - 1].val,
                                    HideText: objs1[idx - 1].show,
                                    FontFamily: objs1[idx - 1].font,
                                    FontColor: objs1[idx - 1].color,
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 10) {
                                let xy = getAbsoluteXY(item)
                                op.frontData.push({
                                    type: 6,
                                    name: objs1[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontColor: item.get('fill'),
                                    start: objs1[idx - 1].start,
                                    add: parseInt(objs1[idx - 1].add),
                                    x: parseInt((xy[0] - background_image1.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image1.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            }
                        }
                        //obj2
                        for (let item of _objs2) {
                            let idx = getIndex(item, canvas2)
                            if (idx == 0) continue //background-image
                            let type = objs2[idx - 1].type
                            if (type == 2) {
                                //out_pic
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 1,
                                    name: objs2[idx - 1].name,
                                    FontColor: objs2[idx - 1].black ? '#000000' : '@',
                                    transparency: item.get('opacity'),
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 3) {
                                //text
                                /*2022-07-26 黑色并入黑色图层
                                                    if(item.get("fill") == "#000000"){
                                                        //纯黑
                                                        op.backData.push({
                                                            "type" : 2,
                                                            "Text" : item.get("text"),
                                                            "FontFamily" : item.get("fontFamily"),
                                                            "FontSize" : parseInt(item.get("fontSize")),
                                                            "FontColor" : "#000000",
                                                            "FontBackgroudColor" : item.get("textBackgroundColor"),
                                                            "Bold" : item.get("fontWeight") == "bold",
                                                            "Underline" : item.get("underline"),
                                                            "Italic" : item.get("fontStyle") == "italic",
                                                            "Strikeout" : item.get("linethrough"),
                                                            "x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
                                                            "y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
                                                            "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                                            "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                                            "rotate" : parseInt(item.get("angle").toFixed(0))
                                                        });
                                                    }
                                                    */
                            } else if (type == 11) {
                                //circle_text
                                op.backData.push({
                                    "type" : 2,
                                    "Text" : item.get("text"),
                                    "FontFamily" : item.get("fontFamily"),
                                    "FontSize" : parseInt(item.get("fontSize")),
                                    "FontColor" : "#000000",
                                    "FontBackgroudColor" : item.get("textBackgroundColor"),
                                    "Bold" : item.get("fontWeight") == "bold",
                                    "Underline" : item.get("underline"),
                                    "Italic" : item.get("fontStyle") == "italic",
                                    "Strikeout" : item.get("linethrough"),
                                    "x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
                                    "y" : parseInt((item.get("top") - background_image2.top).toFixed(0)),
                                    "h" : parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
                                    "w" : parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
                                    "rotate" : parseInt(item.get("angle").toFixed(0)),
                                    "circleCenter" : objs2[idx - 1].circleCenter || 0
                                });
                            } else if (type == 4) {
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 3,
                                    name: objs2[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    DefaultText: item.get('text'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontBackgroudColor: item.get('textBackgroundColor'),
                                    FontColor: item.get('fill'),
                                    Exceed: objs2[idx - 1].exceed,
                                    AutoWrap: objs2[idx - 1].autoWrap,
                                    FixSize: objs2[idx - 1].fixSize,
                                    Bold: item.get('fontWeight') == 'bold',
                                    Underline: item.get('underline'),
                                    Italic: item.get('fontStyle') == 'italic',
                                    Strikeout: item.get('linethrough'),
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0)),
                                    align: objs2[idx - 1].align
                                })
                            } else if (type == 8) {
                                //二维码
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 4,
                                    name: objs2[idx - 1].name,
                                    FontColor: objs2[idx - 1].color,
                                    DefaultText: objs2[idx - 1].val,
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 9) {
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 5,
                                    name: objs2[idx - 1].name,
                                    DefaultText: objs2[idx - 1].val,
                                    HideText: objs1[idx - 1].show,
                                    FontSize: parseInt(objs2[idx - 1].fontSize),
                                    FontFamily: objs2[idx - 1].font,
                                    FontColor: objs2[idx - 1].color,
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            } else if (type == 10) {
                                let xy = getAbsoluteXY(item)
                                op.backData.push({
                                    type: 6,
                                    name: objs2[idx - 1].name,
                                    FontFamily: item.get('fontFamily'),
                                    FontSize: parseInt(item.get('fontSize')),
                                    FontColor: item.get('fill'),
                                    start: parseInt(objs2[idx - 1].start),
                                    add: parseInt(objs2[idx - 1].add),
                                    x: parseInt((xy[0] - background_image2.left).toFixed(0)),
                                    y: parseInt((xy[1] - background_image2.top).toFixed(0)),
                                    h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
                                    w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
                                    rotate: parseInt(item.get('angle').toFixed(0))
                                })
                            }
                        }
                        dialog
                            .showSaveDialog({
                                title: language_str('saveFile'), //'保存文件'
                                filters: [{ name: 'CS File Type', extensions: ['cs'] }]
                            })
                            .then((result) => {
                                if (result.canceled) return
                                if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
                                    result.filePath += '.cs'
                                }
                                let fs = require('fs')
                                op.soonType = 2
                                fs.writeFileSync(result.filePath, JSON.stringify(op))
                            })
                            .catch((err) => {
                                console.log()
                            })
                        //return false 开启该代码可禁止点击该按钮关闭
                    })
                })
            })
            var _keyctrl = false,
                _keyc = false,
                _textEdit = false,
                _inputEdit = false
            $('input').focus(function () {
                console.log(1)
                _inputEdit = true
            })
            $('input').blur(function () {
                _inputEdit = false
            })
            $('textarea').focus(function () {
                console.log(1)
                _inputEdit = true
            })
            $('textarea').blur(function () {
                _inputEdit = false
            })
            $('body').keyup(function (event) {
                // 兼容三端的 modifier key 检测（Windows/Linux: Ctrl, Mac: Cmd/Meta）
                if (event.keyCode == 17 || event.keyCode == 91 || event.keyCode == 93) { // Ctrl 键或 Meta 键（Mac Cmd）释放
                    _keyctrl = false
                }
                if (event.keyCode == 67) {
                    _keyc = false
                }
            })
            $('body').keydown(function (event) {
                // 统一的快捷键处理（兼容 Windows/Linux: Ctrl, Mac: Cmd/Meta）
                const isModifierKey = event.ctrlKey || event.metaKey; // 兼容三端

                // 快捷键处理（在输入框或文本区域中时不触发，除了删除相关的）
                if (!_inputEdit && !_textEdit) {
                    // CTRL/CMD+N - 新建
                    if (isModifierKey && event.keyCode == 78) {
                        event.preventDefault();
                        $('#new').click();
                        return;
                    }
                    // CTRL/CMD+O - 打开
                    if (isModifierKey && event.keyCode == 79) {
                        event.preventDefault();
                        $('#open').click();
                        return;
                    }
                    // CTRL/CMD+S - 保存
                    if (isModifierKey && !event.shiftKey && event.keyCode == 83) {
                        event.preventDefault();
                        $('#save').click();
                        return;
                    }
                    // CTRL/CMD+SHIFT+S - 保存副本
                    if (isModifierKey && event.shiftKey && event.keyCode == 83) {
                        event.preventDefault();
                        output(null, saveAs);
                        return;
                    }
                    // CTRL/CMD+Z - 还原
                    if (isModifierKey && !event.shiftKey && event.keyCode == 90) {
                        event.preventDefault();
                        $('#previous').click();
                        return;
                    }
                    // CTRL/CMD+Y - 重做
                    if (isModifierKey && !event.shiftKey && event.keyCode == 89) {
                        event.preventDefault();
                        $('#next').click();
                        return;
                    }
                    // CTRL/CMD+C - 复制
                    if (isModifierKey && event.keyCode == 67 && event.target.nodeName == 'BODY') {
                        event.preventDefault();
                        copySelection();
                        return;
                    }
                    // CTRL/CMD+V - 粘贴
                    if (isModifierKey && event.keyCode == 86 && event.target.nodeName == 'BODY') {
                        event.preventDefault();
                        pasteFromClipboard();
                        return;
                    }
                    // CTRL/CMD+SHIFT+DEL - 清空
                    if (isModifierKey && event.shiftKey && event.keyCode == 46) {
                        event.preventDefault();
                        $('#clean').click();
                        return;
                    }
                    // CTRL/CMD+DEL - 删除
                    if (isModifierKey && !event.shiftKey && event.keyCode == 46) {
                        event.preventDefault();
                        $('#delete').click();
                        return;
                    }
                }
                // 兼容三端的 modifier key 检测（Windows/Linux: Ctrl, Mac: Cmd/Meta）
                if (event.keyCode == 17 || event.metaKey) { // Ctrl 键或 Meta 键（Mac Cmd）
                    _keyctrl = true
                    if (_keyc && _textEdit) {
                        //同时按下且在编辑状态
                        setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
                        //clipboard.writeText((clipboard.readText()+' '))
                    }
                }
                if (event.keyCode == 67) {
                    _keyc = true
                    if (_keyctrl & _textEdit) {
                        //同时按下且在编辑状态
                        setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
                        //clipboard.writeText((clipboard.readText()+' '))
                    }
                }
                if (event.keyCode == 37) {
                    //left
                    let v = -1
                    if (_keyctrl || event.ctrlKey || event.metaKey) {
                        v = -5
                    }
                    let x = canvas.getActiveObject().get('left')
                    x += v
                    canvas.getActiveObject().set('left', x)
                    canvas.renderAll()
                    recordState()
                    updateControls()
                }
                if (event.keyCode == 38) {
                    //up
                    let v = -1
                    if (_keyctrl || event.ctrlKey || event.metaKey) {
                        v = -5
                    }
                    let y = canvas.getActiveObject().get('top')
                    y += v
                    canvas.getActiveObject().set('top', y)
                    canvas.renderAll()
                    recordState()
                    updateControls()
                }
                if (event.keyCode == 39) {
                    //right
                    let v = 1
                    if (_keyctrl || event.ctrlKey || event.metaKey) {
                        v = 5
                    }
                    let x = canvas.getActiveObject().get('left')
                    x += v
                    canvas.getActiveObject().set('left', x)
                    canvas.renderAll()
                    recordState()
                    updateControls()
                }
                if (event.keyCode == 40) {
                    //down
                    let v = +1
                    if (_keyctrl || event.ctrlKey || event.metaKey) {
                        v = 5
                    }
                    let y = canvas.getActiveObject().get('top')
                    y += v
                    canvas.getActiveObject().set('top', y)
                    canvas.renderAll()
                    recordState()
                    updateControls()
                }
                // 普通删除键（DEL键，没有按CTRL/CMD）
                if (event.keyCode == 46 && !isModifierKey && !_inputEdit && !_textEdit) {
                    let actObjs = canvas.getActiveObjects()
                    let allObjs = canvas.getObjects()
                    let flag = 0
                    for (let item of actObjs) {
                        if (item != allObjs[0]) {
                            let i = getIndex(item) //0是背景，所以从1开始，但objs不包含背景图片，故要-1
                            objs.splice(i - 1, 1)
                            canvas.remove(item)
                            flag = 1
                        }
                    }
                    updateList()
                    canvas.discardActiveObject()
                    if (flag == 1) {
                        recordState()
                        canvas.renderAll()
                        handleObjectSelected()
                    }
                }
            })
            let pre_add_image
            $('#addPic').click(function () {
                OpenDialog()
                function OpenDialog() {
                    dialog
                        .showOpenDialog({
                            title: language_str('selectPic'), //请选择图片
                            buttonLabel: language_str('comf'), //"确认"
                            filters: [{ name: 'Image File Type', extensions: ['png', 'jpg', 'jpeg'] }]
                        })
                        .then((result) => {
                            if (result.canceled) return
                            //console.log(result.filePaths)
                            fabric.Image.fromURL(result.filePaths[0], function (image) {
                                //image.left = pointer.x;
                                //image.top = pointer.y;
                                image.setSrc(image.toDataURL(), function (image) {
                                    pre_add_image = image
                                    background_image.hoverCursor = 'crosshair'
                                    $(this).css('background-color', '#646E76')

                                    $('#addOutPic').css('background-color', '')
                                    $('#addText').css('background-color', '')
                                    $("#addCircleText").css("background-color", "");
                                    $('#addOutText').css('background-color', '')
                                    $('#addRect').css('background-color', '')
                                    $('#addCircle').css('background-color', '')
                                    $('#addLine').css('background-color', '')
                                    $('#addQrCode').css('background-color', '')
                                    $('#addBarCode').css('background-color', '')
                                    $('#addCounter').css('background-color', '')
                                    addState = 1
                                })
                                //canvas.add(image);
                                //objs.push({type: 1});
                                //canvas.renderAll();
                                //updateList();
                                //recordState();
                            })
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                }
            })
            $('#addOutPic').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addRect').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 2
            })
            $('#addText').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addRect').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 3
            })
            $("#addCircleText").click(function () {
                background_image.hoverCursor = "crosshair";
                $(this).css("background-color", "#646E76");

                $("#addPic").css("background-color", "");
                $("#addOutPic").css("background-color", "");
                $("#addText").css("background-color", "");
                $("#addOutText").css("background-color", "");
                $("#addRect").css("background-color", "");
                $("#addCircle").css("background-color", "");
                $("#addLine").css("background-color", "");
                $("#addQrCode").css("background-color", "");
                $("#addBarCode").css("background-color", "");
                $("#addCounter").css("background-color", "");
                addState = 11;
            });
            $('#addOutText').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addRect').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 4
            })
            $('#addRect').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 5
            })
            $('#addCircle').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addRect').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 6
            })
            $('#addLine').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addRect').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 7
            })
            $('#addQrCode').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addRect').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 8
            })
            $('#addBarCode').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addRect').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addCounter').css('background-color', '')
                addState = 9
            })
            $('#addCounter').click(function () {
                background_image.hoverCursor = 'crosshair'
                $(this).css('background-color', '#646E76')

                $('#addPic').css('background-color', '')
                $('#addOutPic').css('background-color', '')
                $('#addText').css('background-color', '')
                $("#addCircleText").css("background-color", "");
                $('#addOutText').css('background-color', '')
                $('#addRect').css('background-color', '')
                $('#addCircle').css('background-color', '')
                $('#addLine').css('background-color', '')
                $('#addQrCode').css('background-color', '')
                $('#addBarCode').css('background-color', '')
                addState = 10
            })
            $('#version_change').click(function () {
                if (bg_version == 1) {
                    bg_version = 2
                } else {
                    bg_version = 1
                }
                // 类型改变
                $('#source_front').attr('src', './public/images/front_bg' + bg_version + '_2.png')
                canvas.renderAll()
            })
            $('#front_side').click(function () {
                $(this).addClass('ui-button-active')
                $('#back_side').removeClass('ui-button-active')
                $('.canvas-container:eq(0)').show()
                $('.canvas-container:eq(1)').hide()
                console.log('------')
                console.log(recordObjs1)
                console.log('------')
                canvas = canvas1
                objs = objs1
                background_image = background_image1
                next_objs = next_objs1
                pre_objs = pre_objs1
                next_json = next_json1
                pre_json = pre_json1
                recordObjs = recordObjs1
                recordJson = recordJson1
                step = step1
                updateList()

                $('#line_control').hide()
                $('#base_control').hide()
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
                $('#component_type').text(language_str('bg')) //背景
            })
            $('#back_side').click(function () {
                $(this).addClass('ui-button-active')
                $('#front_side').removeClass('ui-button-active')
                $('.canvas-container:eq(0)').hide()
                $('.canvas-container:eq(1)').show()
                canvas = canvas2
                objs = objs2
                background_image = background_image2
                next_objs = next_objs2
                pre_objs = pre_objs2
                next_json = next_json2
                pre_json = pre_json2
                recordObjs = recordObjs2
                recordJson = recordJson2
                step = step2
                updateList()
                $('#line_control').hide()
                $('#base_control').hide()
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
                $('#component_type').text(language_str('bg')) //"背景"
            })
            $('#top_alignment').click(function () {
                let _objs = canvas.getActiveObjects()
                if (_objs.length == 1) {
                    //只选中了一个
                    _objs[0].set('top', background_image.get('top'))
                    canvas.renderAll()
                    return
                }
                let top = 0
                for (let item of _objs) {
                    let t_top = item.get('top')
                    if (t_top < top) {
                        top = t_top
                    }
                }
                groupItems = []
                for (let item of _objs) {
                    item.set('top', top)
                    groupItems.push(item)
                }
                canvas.discardActiveObject()
                let sel = new fabric.ActiveSelection(groupItems, {
                    canvas: canvas
                })
                canvas.setActiveObject(sel)
                canvas.requestRenderAll()
                canvas.renderAll()
            })
            $('#bottom_alignment').click(function () {
                let _objs = canvas.getActiveObjects()
                if (_objs.length == 1) {
                    //只选中了一个
                    let idx = getIndex(_objs[0])
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = _objs[0].get('strokeWidth')
                    }
                    _objs[0].set('top', background_image.get('top') + background_image.get('height') - _objs[0].get('height') * _objs[0].get('scaleY') - other)
                    canvas.renderAll()
                    return
                }
                let bottom = 0
                for (let item of _objs) {
                    let idx = getIndex(item)
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = item.get('strokeWidth')
                    }
                    let t_b = item.get('top') + item.get('height') * item.get('scaleY') + other
                    if (t_b > bottom) {
                        bottom = t_b
                    }
                }
                groupItems = []
                for (let item of _objs) {
                    let idx = getIndex(item)
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = item.get('strokeWidth')
                    }
                    item.set('top', bottom - item.get('height') * item.get('scaleY') - other)
                    groupItems.push(item)
                }
                canvas.discardActiveObject()
                let sel = new fabric.ActiveSelection(groupItems, {
                    canvas: canvas
                })
                canvas.setActiveObject(sel)
                canvas.requestRenderAll()
                canvas.renderAll()
            })
            $('#center_y_alignment').click(function () {
                let _objs = canvas.getActiveObjects()
                if (_objs.length == 1) {
                    //只选中了一个
                    let idx = getIndex(_objs[0])
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = _objs[0].get('strokeWidth')
                    }
                    _objs[0].set('top', background_image.get('top') + (background_image.get('height') - (_objs[0].get('height') + other) * _objs[0].get('scaleY')) / 2)
                    canvas.renderAll()
                    return
                }
                let top = 0
                for (let item of _objs) {
                    let t_top = item.get('top')
                    if (t_top < top) {
                        top = t_top
                    }
                }
                groupItems = []
                for (let item of _objs) {
                    let idx = getIndex(item)
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = item.get('strokeWidth')
                    }
                    item.set('top', top + (item.group.height - (item.get('height') + other) * item.get('scaleY')) / 2)
                    groupItems.push(item)
                }
                canvas.discardActiveObject()
                let sel = new fabric.ActiveSelection(groupItems, {
                    canvas: canvas
                })
                canvas.setActiveObject(sel)
                canvas.requestRenderAll()
                canvas.renderAll()
            })
            $('#left_alignment').click(function () {
                let _objs = canvas.getActiveObjects()
                if (_objs.length == 1) {
                    //只选中了一个
                    _objs[0].set('left', background_image.get('left'))
                    canvas.renderAll()
                    return
                }
                let left = 0
                for (let item of _objs) {
                    let t_left = item.get('left')
                    if (t_left < left) {
                        left = t_left
                    }
                }
                groupItems = []
                for (let item of _objs) {
                    item.set('left', left)
                    groupItems.push(item)
                }
                canvas.discardActiveObject()
                let sel = new fabric.ActiveSelection(groupItems, {
                    canvas: canvas
                })
                canvas.setActiveObject(sel)
                canvas.requestRenderAll()
                canvas.renderAll()
            })
            $('#right_alignment').click(function () {
                let _objs = canvas.getActiveObjects()
                if (_objs.length == 1) {
                    //只选中了一个
                    let idx = getIndex(_objs[0])
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = item.get('strokeWidth')
                    }
                    _objs[0].set('left', background_image.get('left') + background_image.get('width') - _objs[0].get('width') * _objs[0].get('scaleX') - other)
                    canvas.renderAll()
                    return
                }
                let right = 0
                for (let item of _objs) {
                    let idx = getIndex(item)
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = item.get('strokeWidth')
                    }
                    let t_r = item.get('left') + item.get('width') * item.get('scaleX') + other
                    if (t_r > right) {
                        right = t_r
                    }
                }
                let groupItems = []

                for (let item of _objs) {
                    let idx = getIndex(item)
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = item.get('strokeWidth')
                    }
                    item.set('left', right - item.get('width') * item.get('scaleX') - other)
                    groupItems.push(item)
                }
                //BUG1
                canvas.discardActiveObject()
                let sel = new fabric.ActiveSelection(groupItems, {
                    canvas: canvas
                })
                canvas.setActiveObject(sel)
                canvas.requestRenderAll()
                canvas.renderAll()
            })
            $('#center_x_alignment').click(function () {
                let _objs = canvas.getActiveObjects()
                if (_objs.length == 1) {
                    //只选中了一个
                    let idx = getIndex(_objs[0])
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = _objs[0].get('strokeWidth')
                    }
                    _objs[0].set('left', background_image.get('left') + (background_image.get('width') - (_objs[0].get('width') + other) * _objs[0].get('scaleX')) / 2)
                    canvas.renderAll()
                    return
                }
                let left = 0
                for (let item of _objs) {
                    let t_left = item.get('left')
                    if (t_left < left) {
                        left = t_left
                    }
                }
                groupItems = []
                for (let item of _objs) {
                    let idx = getIndex(item)
                    let type = objs[idx - 1].type
                    let other = 0 //strokeWidth
                    if (type == 5 || type == 6 || type == 7) {
                        other = item.get('strokeWidth')
                    }
                    item.set('left', left + (item.group.width - (item.get('width') + other) * item.get('scaleX')) / 2)
                    groupItems.push(item)
                }
                canvas.discardActiveObject()
                let sel = new fabric.ActiveSelection(groupItems, {
                    canvas: canvas
                })
                canvas.setActiveObject(sel)
                canvas.requestRenderAll()
                canvas.renderAll()
            })
            $('#up_obj').click(function () {
                //上移，放到前面 数组中在后面
                let idx = getIndex(canvas.getActiveObject())
                if (idx + 1 != canvas.getObjects().length) {
                    canvas.bringForward(canvas.getActiveObject())
                    canvas.renderAll()
                    let temp = objs[idx - 1]
                    objs[idx - 1] = objs[idx]
                    objs[idx] = temp
                    //console.log(objs);
                    //[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];

                    recordState()
                    updateList()
                    selectObj(idx)
                }
            })
            $('#down_obj').click(function () {
                //下移，放到后面 数组中在前面
                let idx = getIndex(canvas.getActiveObject())
                if (idx != 1) {
                    canvas.sendBackwards(canvas.getActiveObject())
                    canvas.renderAll()
                    //[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];

                    let temp = objs[idx - 1]
                    objs[idx - 1] = objs[idx - 2]
                    objs[idx - 2] = temp
                    recordState()
                    updateList()
                    selectObj(idx - 2)
                }
            })
            $('#set_bg').click(function () {
                //设置为背景
                let obj = canvas.getActiveObject()
                let idx = getIndex(canvas.getActiveObject())
                const scaleX = 1012 / obj.width
                const scaleY = 648 / obj.height
                obj.set({
                    scaleX: scaleX,
                    scaleY: scaleY,
                    left: ($('#canvas1').width() - 1012) / 2,
                    top: ($('#canvas1').height() - 648) / 2
                })
                $('#text_w').val(1012)
                $('#text_h').val(648)
                $('#text_x').val(0)
                $('#text_y').val(0)
                canvas.sendToBack(canvas.getActiveObject())
                canvas.bringForward(canvas.getActiveObject())
                canvas.renderAll()
                let objItem = objs.splice(idx - 1, 1)[0]
                objs.unshift(objItem)
                recordState()
                updateList()
                selectObj(0)
            })
            $('#previous').click(function () {
                //撤销一次操作
                if (step.val == 0) {
                    return
                }

                step.val--
                console.log(recordJson[step.val])
                canvas.loadFromJSON(recordJson[step.val])
                if ($('#front_side').hasClass('ui-button-active')) {
                    //objs = JSON.parse(recordObjs[step.val]);
                    objs1 = JSON.parse(recordObjs[step.val])
                    objs = objs1
                } else if ($('#back_side').hasClass('ui-button-active')) {
                    //objs = JSON.parse(recordObjs[step.val]);
                    objs2 = JSON.parse(recordObjs[step.val])
                    objs = objs2
                }

                background_image = canvas.getObjects()[0]
                canvas.renderAll()
                //recordState();
                updateList()

                selectObj(-1)

                $('#base_control').hide()
                $('#line_control').hide()
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            })
            $('#next').click(function () {
                //撤销一次撤销操作
                if (step.val >= recordObjs.length - 1) {
                    return
                }

                ++step.val
                canvas.loadFromJSON(recordJson[step.val])
                if ($('#front_side').hasClass('ui-button-active')) {
                    //objs = JSON.parse(recordObjs[step.val]);
                    objs1 = JSON.parse(recordObjs[step.val])
                    objs = objs1
                } else if ($('#back_side').hasClass('ui-button-active')) {
                    //objs = JSON.parse(recordObjs[step.val]);
                    objs2 = JSON.parse(recordObjs[step.val])
                    objs = objs2
                }
                background_image = canvas.getObjects()[0]
                canvas.renderAll()
                selectObj(-1)

                $('#base_control').hide()
                $('#line_control').hide()
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
                updateList()
            })
            $('#clean').click(function () {
                objs.splice(0, objs.length)

                let allObjs = canvas.getObjects()
                for (let item of allObjs) {
                    if (item != allObjs[0]) {
                        canvas.remove(item)
                    }
                }
                updateList()
                recordState()
            })
            $('#rotate').click(function () {
                let obj = canvas.getActiveObject()
                obj.rotate(Math.round((obj.get('angle') + 90) % 360))
                $('#text_r').val(obj.get('angle'))
                canvas.renderAll()
                updateControls()
                recordState()
            })
            $('#text_italics').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选
                    canvas.getActiveObject().set('fontStyle', 'normal')
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('fontStyle', 'italic')
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $('#text_bold').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选,恢复正常
                    canvas.getActiveObject().set('fontWeight', 'normal')
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('fontWeight', 'bold')
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $('#text_underline').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选
                    canvas.getActiveObject().set('underline', false)
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('underline', true)
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $('#text_linethrough').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选
                    canvas.getActiveObject().set('linethrough', false)
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('linethrough', true)
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $("#circle_text_italics").click(function () {
                if ($(this).hasClass("ui-radio-acitve")) {
                    //已选
                    canvas.getActiveObject().set("fontStyle", "normal")
                    $(this).removeClass("ui-radio-acitve")
                } else {
                    //未选
                    canvas.getActiveObject().set("fontStyle", "italic")
                    $(this).addClass("ui-radio-acitve")
                }
                recordState();
                canvas.renderAll();
            });
            $("#circle_text_bold").click(function () {
                if ($(this).hasClass("ui-radio-acitve")) {
                    //已选,恢复正常
                    canvas.getActiveObject().set("fontWeight", "normal")
                    $(this).removeClass("ui-radio-acitve")
                } else {
                    //未选
                    canvas.getActiveObject().set("fontWeight", "bold")
                    $(this).addClass("ui-radio-acitve")
                }
                recordState();
                canvas.renderAll();
            });
            $('#out_left_alignment').click(function () {
                $('#out_left_alignment').parent().removeClass('tool1')
                $('#out_right_alignment').parent().removeClass('tool1')
                $('#out_center_alignment').parent().removeClass('tool1')
                setTimeout(() => {
                    $('#out_left_alignment').parent().addClass('tool1')
                });
                canvas.getActiveObject().set('textAlign', 'left')
                let idx = getIndex(canvas.getActiveObject())
                objs[idx - 1].align = 'left'
                recordState()
                canvas.renderAll()
            })
            $('#out_right_alignment').click(function () {
                $('#out_left_alignment').parent().removeClass('tool1')
                $('#out_right_alignment').parent().removeClass('tool1')
                $('#out_center_alignment').parent().removeClass('tool1')
                setTimeout(() => {
                    $('#out_right_alignment').parent().addClass('tool1')
                });
                canvas.getActiveObject().set('textAlign', 'right')
                let idx = getIndex(canvas.getActiveObject())
                objs[idx - 1].align = 'right'
                recordState()
                canvas.renderAll()
            })
            $('#out_center_alignment').click(function () {
                $('#out_left_alignment').parent().removeClass('tool1')
                $('#out_right_alignment').parent().removeClass('tool1')
                $('#out_center_alignment').parent().removeClass('tool1')
                setTimeout(() => {
                    $('#out_center_alignment').parent().addClass('tool1')
                });
                canvas.getActiveObject().set('textAlign', 'center')
                let idx = getIndex(canvas.getActiveObject())
                objs[idx - 1].align = 'center'
                recordState()
                canvas.renderAll()
            })
            $('#out_text_italics').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选
                    canvas.getActiveObject().set('fontStyle', 'normal')
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('fontStyle', 'italic')
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $('#out_text_bold').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选,恢复正常
                    canvas.getActiveObject().set('fontWeight', 'normal')
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('fontWeight', 'bold')
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $('#out_text_underline').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选
                    canvas.getActiveObject().set('underline', false)
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('underline', true)
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $('#out_text_linethrough').click(function () {
                if ($(this).hasClass('ui-radio-acitve')) {
                    //已选
                    canvas.getActiveObject().set('linethrough', false)
                    $(this).removeClass('ui-radio-acitve')
                } else {
                    //未选
                    canvas.getActiveObject().set('linethrough', true)
                    $(this).addClass('ui-radio-acitve')
                }
                recordState()
                canvas.renderAll()
            })
            $('#lock').click(function () {
                canvas.getActiveObject().set('selectable', !canvas.getActiveObject().get('selectable'))
                if (canvas.getActiveObject().get('selectable')) {
                    $('#lock_img').attr('src', 'public/images/unlock20.png') //已经上锁，需要解锁
                } else {
                    $('#lock_img').attr('src', 'public/images/lock20.png') //没上锁，可以上锁
                }
                recordState()
                canvas.renderAll()
            })
            $('#text_back_transparent').click(function () {
                canvas.getActiveObject().set('textBackgroundColor', '')
                $('#text_back_color').val('#ffffff')
                canvas.renderAll()
            })
            $('#out_text_back_transparent').click(function () {
                canvas.getActiveObject().set('textBackgroundColor', '')
                $('#out_text_back_color').val('#ffffff')
                canvas.renderAll()
            })
            $('#rect_transparent').click(function () {
                canvas.getActiveObject().set('fill', '')
                $('#rect_color').val('#ffffff')
                canvas.renderAll()
            })
            $('#rect_stroke_transparent').click(function () {
                canvas.getActiveObject().set('stroke', '')
                $('#rect_stroke').val('#ffffff')
                canvas.renderAll()
            })
            $('#circle_transparent').click(function () {
                canvas.getActiveObject().set('fill', '')
                $('#circle_color').val('#ffffff')
                canvas.renderAll()
            })
            $('#circle_stroke_transparent').click(function () {
                canvas.getActiveObject().set('stroke', '')
                $('#circle_stroke').val('#ffffff')
                canvas.renderAll()
            })
            function saveAs(op1, callback) {
                let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                let _g1 = [],
                    _g2 = []
                let left = 0,
                    top = 0
                for (let _o of canvas1.getObjects()) {
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    _g1.push(fabric.util.object.clone(_o))
                }
                let fp = new fabric.Group(_g1).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })
                    ; (left = 0), (top = 0)
                for (let _o of canvas2.getObjects()) {
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    _g2.push(fabric.util.object.clone(_o))
                }
                //let fp = new fabric.Group(_g1).toDataURL();
                let bp = new fabric.Group(_g2).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })
                let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
                let con_o = Object.assign(o, op1)
                dialog
                    .showSaveDialog({
                        title: language_str('saveFile'), //'保存文件'
                        filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
                    })
                    .then((result) => {
                        if (result.filePath == '') {
                            return
                        }
                        if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
                            result.filePath += '.soon'
                        }
                        let fs = require('fs')
                        con_o.soonType = 2
                        fs.writeFileSync(result.filePath, JSON.stringify(con_o))
                        openAs.name = result.filePath
                        layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                        saveHistory()
                        if (callback && typeof callback === 'function') {
                            callback()
                        }
                    })
                    .catch((err) => {
                        console.log()
                    })
            }
            function save(op1, callback) {
                let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                let _g1 = [],
                    _g2 = []
                let left = 0,
                    top = 0
                for (let _o of canvas1.getObjects()) {
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    _g1.push(fabric.util.object.clone(_o))
                }
                let fp = new fabric.Group(_g1).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })
                    ; (left = 0), (top = 0)
                for (let _o of canvas2.getObjects()) {
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    _g2.push(fabric.util.object.clone(_o))
                }
                //let fp = new fabric.Group(_g1).toDataURL();
                let bp = new fabric.Group(_g2).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })
                let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
                let con_o = Object.assign(o, op1)
                console.log(op1)
                if (openAs.name != '') {
                    //打开的文件
                    let fs = require('fs')
                    con_o.soonType = 2
                    fs.writeFileSync(openAs.name, JSON.stringify(con_o))
                    layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                    saveHistory()
                    if (callback && typeof callback === 'function') {
                        callback()
                    }
                    return
                }
                dialog
                    .showSaveDialog({
                        title: language_str('saveFile'), //'保存文件'
                        filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
                    })
                    .then((result) => {
                        if (result.filePath == '') {
                            return
                        }
                        if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
                            result.filePath += '.soon'
                        }
                        let fs = require('fs')
                        con_o.soonType = 2
                        fs.writeFileSync(result.filePath, JSON.stringify(con_o))
                        openAs.name = result.filePath
                        layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                        saveHistory()
                        if (callback && typeof callback === 'function') {
                            callback()
                        }
                    })
                    .catch((err) => {
                        console.log()
                    })
            }
            // 复制
            $("#copy").click(function () {
                copySelection();
            })
            // 粘贴
            $("#paste").click(function () {
                pasteFromClipboard();
            })
            // 保存
            $('#save').click(function () {
                output()
                return
                let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                let _g1 = [],
                    _g2 = []
                let left = 0,
                    top = 0
                for (let _o of canvas1.getObjects()) {
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    _g1.push(fabric.util.object.clone(_o))
                }
                let fp = new fabric.Group(_g1).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })
                    ; (left = 0), (top = 0)
                for (let _o of canvas2.getObjects()) {
                    if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                    }
                    if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                    }
                    _g2.push(fabric.util.object.clone(_o))
                }
                //let fp = new fabric.Group(_g1).toDataURL();
                let bp = new fabric.Group(_g2).toDataURL({
                    height: 648,
                    width: 1012,
                    top: top / zoom,
                    left: left / zoom
                })
                let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
                let con_o = Object.assign(o, op1)
                console.log(op1)
                if (openAs.name != '') {
                    //打开的文件
                    let fs = require('fs')
                    con_o.soonType = 2
                    fs.writeFileSync(openAs.name, JSON.stringify(con_o))
                    layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                    saveHistory()
                    return
                }
                dialog
                    .showSaveDialog({
                        title: language_str('saveFile'), //'保存文件'
                        filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
                    })
                    .then((result) => {
                        if (result.filePath == '') {
                            return
                        }
                        if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
                            result.filePath += '.soon'
                        }
                        let fs = require('fs')
                        con_o.soonType = 2
                        fs.writeFileSync(result.filePath, JSON.stringify(con_o))
                        openAs.name = result.filePath
                        layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                        saveHistory()
                    })
                    .catch((err) => {
                        console.log()
                    })
            })
            function getDate() {
                let date = new Date()
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
            }
            function getAbsoluteXY(_obj) {
                let coord = _obj.get('lineCoords')
                //let xs = [], ys = [];
                //for(let item in coord){
                //    xs.push(coord[item].x);
                //    ys.push(coord[item].y);
                //}
                //xs.sort(function(a,b){return a-b});
                //ys.sort(function(a,b){return a-b});
                //return [xs[0], ys[0]];
                return [_obj.get('left'), _obj.get('top')]
            }
            let fullPath = path.join(exePath, 'data.json')
            function saveHistory() {
                let fs = require('fs')
                let j = {}
                try {
                    fsData = fs.readFileSync(fullPath)
                    j = JSON.parse(fsData.toString())
                    for (let item of j.history) {
                        if (item.path == openAs.name) {
                            item.time = getDate()
                            fs.writeFileSync(fullPath, JSON.stringify(j))
                            return
                        }
                    }
                    j.history.push({ time: getDate(), path: openAs.name })
                    fs.writeFileSync(fullPath, JSON.stringify(j))
                } catch (e) {
                    let j = { history: { time: getDate(), path: openAs.name } }
                    fs.writeFileSync(fullPath, JSON.stringify(j))
                }
            }
            function open(file) {
                let fs = require('fs')
                var fsData = fs.readFileSync(file)
                openAs.name = file
                let j = JSON.parse(fsData.toString())
                let left = background_image.left
                let top = background_image.top
                let new_left = j.f.objects[0].left
                let new_top = j.f.objects[0].top
                for (let o of j.f.objects) {
                    o.left = o.left - new_left + left
                    o.top = o.top - new_top + top
                }
                for (let o of j.b.objects) {
                    o.left = o.left - new_left + left
                    o.top = o.top - new_top + top
                }
                canvas1.loadFromJSON(j.f)
                canvas2.loadFromJSON(j.b)
                background_image1 = canvas1.getObjects()[0]
                background_image2 = canvas2.getObjects()[0]

                objs2 = j.bo
                objs1 = j.fo
                step1.val = 0
                step2.val = 0
                recordJson1 = []
                recordJson2 = []
                recordObjs1 = []
                recordObjs2 = []
                if ($('#front_side').hasClass('ui-button-active')) {
                    objs = objs1
                    recordObjs = recordObjs1
                    recordJson = recordJson1
                    step = step1
                    background_image = background_image1
                } else if ($('#back_side').hasClass('ui-button-active')) {
                    objs = objs2
                    recordObjs = recordObjs2
                    recordJson = recordJson2
                    background_image = background_image2
                    step = step2
                }
                canvas1.renderAll()
                canvas2.renderAll()
                updateList() /*
                    修复打开新文件后无法撤销的bug
                    2022-07-16
                    */
                setTimeout(() => {
                    recordObjs1.push(JSON.stringify(objs1))
                    let j1 = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                    j1.objects[0].hoverCursor = 'default'
                    recordJson1.push(j1)

                    recordObjs2.push(JSON.stringify(objs2))
                    let j2 = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                    j2.objects[0].hoverCursor = 'default'
                    recordJson2.push(j2)
                }, 0)
            }
            $('#open').click(function () {
                if (step.val == 0) {
                    OpenDialog();
                    return;
                }
                layer.confirm(
                    '<font style="color:black">' + language_str('whetherSave') + '</font>',
                    function (index) {
                        //confirm 是否保存当前文件？
                        //let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
                        //let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
                        //let o = { f : j, b : b,fo : objs1, bo : objs2};
                        //if(openAs != ""){
                        //    //打开的文件
                        //    let fs = require('fs')
                        //    fs.writeFileSync(openAs,JSON.stringify(o))
                        //    layer.msg('保存成功至'+ openAs);
                        //
                        //    OpenDialog();return;
                        //}
                        //dialog.showSaveDialog({
                        //    title:'保存文件',
                        //    filters: [
                        //        { name: 'FCS File Type', extensions: ['fcs'] },
                        //    ]
                        //}).then(result=>{
                        //    let fs = require('fs')
                        //    fs.writeFileSync(result.filePath,JSON.stringify(o))
                        //
                        //    OpenDialog();
                        //}).catch(err=>{
                        //    console.log()
                        //})
                        /*
                                    let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
                                let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
                                let _g1 = [], _g2 = [];
                                let left = 0, top = 0;
                                for( let _o of canvas1.getObjects() ){
                                    if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
                                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
                                    }
                                    if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
                                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
                                    }
                                    _g1.push(fabric.util.object.clone(_o));
                                }
                                let fp = new fabric.Group(_g1).toDataURL({
                                    height: 648,
                                    width: 1012,
                                    top:top/zoom,
                                    left:left/zoom
                                });
                                left = 0, top = 0;
                                for( let _o of canvas2.getObjects() ){
                                    if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
                                        left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
                                    }
                                    if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
                                        top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
                                    }
                                    _g2.push(fabric.util.object.clone(_o));
                                }
                                //let fp = new fabric.Group(_g1).toDataURL();
                                let bp = new fabric.Group(_g2).toDataURL({
                                    height: 648,
                                    width: 1012,
                                    top:top/zoom,
                                    left:left/zoom
                                });
                                let o = { f : j, b : b,fo : objs1, bo : objs2,fp:fp,bp:bp};
                                if(openAs.name != ""){
                                    //打开的文件
                                    let fs = require('fs')
                                    fs.writeFileSync(openAs.name,JSON.stringify(o))
                                    layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
                                    saveHistory();
                                    
                                    OpenDialog();
                                    return;
                                }
                                dialog.showSaveDialog({
                                    title:language_str("saveFile"),//'保存文件'
                                    filters: [
                                        { name: 'Soon File Type', extensions: ['soon'] },
                                    ]
                                }).then(result=>{
                                    if(result.canceled)return;
                                    if(result.filePath.substring(result.filePath.length-5).indexOf('.') == -1){
                                        result.filePath += '.soon';
                                    }
                                    let fs = require('fs')
                                    fs.writeFileSync(result.filePath,JSON.stringify(o))
                                    openAs.name = result.filePath;
                                    layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
                                    saveHistory();
                                    OpenDialog();
                                }).catch(err=>{
                                    console.log()
                                })
                                */
                        output(OpenDialog)
                        layer.close(index)
                    },
                    function (index) {
                        OpenDialog()
                    }
                )
                function OpenDialog() {
                    dialog
                        .showOpenDialog({
                            title: '请选择文件', //confirm
                            buttonLabel: language_str('comf'), //"确认"
                            filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
                        })
                        .then((result) => {
                            if (result.canceled) return
                            //console.log(result.filePaths)
                            let fs = require('fs')
                            var fsData = fs.readFileSync(result.filePaths[0])
                            openAs.name = result.filePaths[0]
                            let j = JSON.parse(fsData.toString())
                            let type = j.soonType ? j.soonType : j.backBlackPic ? 2 : 1;
                            if (type == 1) {
                                ipcRenderer.send('open-design-page', openAs.name, type);
                                return
                            }
                            let left = background_image.left
                            let top = background_image.top
                            let new_left = j.f.objects[0].left
                            let new_top = j.f.objects[0].top
                            for (let o of j.f.objects) {
                                o.left = o.left - new_left + left
                                o.top = o.top - new_top + top
                            }
                            for (let o of j.b.objects) {
                                o.left = o.left - new_left + left
                                o.top = o.top - new_top + top
                            }
                            canvas1.loadFromJSON(j.f)
                            canvas2.loadFromJSON(j.b)
                            background_image1 = canvas1.getObjects()[0]
                            background_image2 = canvas2.getObjects()[0]

                            objs2 = j.bo
                            objs1 = j.fo
                            step1.val = 0
                            step2.val = 0
                            recordJson1 = []
                            recordJson2 = []
                            recordObjs1 = []
                            recordObjs2 = []
                            if ($('#front_side').hasClass('ui-button-active')) {
                                objs = objs1
                                recordObjs = recordObjs1
                                recordJson = recordJson1
                                step = step1
                                background_image = background_image1
                            } else if ($('#back_side').hasClass('ui-button-active')) {
                                objs = objs2
                                recordObjs = recordObjs2
                                recordJson = recordJson2
                                background_image = background_image2
                                step = step2
                            }
                            canvas1.renderAll()
                            canvas2.renderAll()
                            updateList()
                            /*
                                          修复打开新文件后无法撤销的bug
                                          2022-07-16
                                          */
                            setTimeout(() => {
                                recordObjs1.push(JSON.stringify(objs1))
                                let j1 = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                                j1.objects[0].hoverCursor = 'default'
                                recordJson1.push(j1)

                                recordObjs2.push(JSON.stringify(objs2))
                                let j2 = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                                j2.objects[0].hoverCursor = 'default'
                                recordJson2.push(j2)
                            }, 0)
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                }
            })
            function clearAll() {
                //let blank = "{\"f\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":1012,\"height\":648,\"fill\":\"#000000\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAwAAAKICAYAAAD0EmiCAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3I5Xldx/HvT3SLdk0ljFyN0t1IEjN2TMEHZXcoKEjmQ9HKUkgURQtv8pGlVN6UlqBJN+Kzwhuo0MjKHhi27pJJUbG7IesNJOUurt2s6T/+cmYZd3bmc12zM7M783kd2Acy3+uc831954lvzpxrzX3w2LbtATPz+Jm5bmYeNzPXzszVM/NtM3Pl4b+r7oO35iUJECBAgAABAgQIECBAgMDFFrhjZr58+O8/ZuZzM3PTzPzTzNw4M/+w1vraxX5T62K94LZtj56ZZ8zMj87MDx3iwMV6ea9DgAABAgQIECBAgAABAgQuVYH/nJmPzsxfzsyfrrX+7WIsckGDwbZtD5mZ587M82bmSRdjIa9BgAABAgQIECBAgAABAgQuc4G/m5n3zMx711q3X6hdL0gw2LbtETPzypl54cz4pwUX6nqelwABAgQIECBAgAABAgSaBfZ/yvCumXnTWuvz5xvivAaDQyh43cz8zMx88/l+s56PAAECBAgQIECAAAECBAgQOE3gf2bm92fm9eczHJyXYLBt24MOnyh4jU8U+KtLgAABAgQIECBAgAABAgTuE4H9EwdvOHzi4Cv39h3c62CwbduJQ8nYf+uBBwECBAgQIECAAAECBAgQIHDfCnxqZn56rbX/hoVzfpxzMNi2bf/ZV8zMr87MFef8DvwgAQIECBAgQIAAAQIECBAgcL4F7pyZ187Mm9da27k8+TkFg23bHjwzfzAzzz6XF/UzBAgQIECAAAECBAgQIECAwEUReP/MPH+t9aXjvtqxg8G2bY+cmT+ZmR847ouZJ0CAAAECBAgQIECAAAECBC66wN/PzDPXWp89zisfKxhs23bNzPzFzHz3cV7ELAECBAgQIECAAAECBAgQIHCfCnx6Zn5srXXzUd/FkYPBtm2Pnpm/mZlHHfXJzREgQIAAAQIECBAgQIAAAQL3G4HPzMwPr7VuOco7OlIw2Lbt4TPzsZm59ihPaoYAAQIECBAgQIAAAQIECBC4XwrcNDNPWWt9Ib27GAy2bbtyZj4yM09OT+bPCRAgQIAAAQIECBAgQIAAgfu9wMdn5ifSFyGeNRgcfnXiH83MT93v1/UGCRAgQIAAAQIECBAgQIAAgaMKvG9mnnO2X7mYgsErZ+Y3jvpq5ggQIECAAAECBAgQIECAAIFLRuCX1lpn/P/8ZwwG27ZdNzN/OzNXXDKreqMECBAgQIAAAQIECBAgQIDAUQXuPHyfwQ339AP3GAy2bXvQzHxiZr7/qK9ijgABAgQIECBAgAABAgQIELjkBD41MyfWWl+5+zs/UzB41cy88ZJb0xsmQIAAAQIECBAgQIAAAQIEjivwmrXWaQ3gtGCwbdvVM/MvM3PVcV/BPAECBAgQIECAAAECBAgQIHDJCdwxM49da3321Hd+T8HgnTPzwktuPW+YAAECBAgQIECAAAECBAgQOFeBd621XnTGYLBt26MPny7Yv8PAgwABAgQIECBAgAABAgQIEOgQ2L/DYP+UwS0n1/2GTxhs2/a2mXlJh4UtCRAgQIAAAQIECBAgQIAAgVME3r7WeulpwWDbtofOzGdm5kpcBAgQIECAAAECBAgQIECAQJ3Af83MI9dat+2b3/UJg23bfmFmfqeOw8IECBAgQIAAAQIECBAgQIDASYEXr7XecfdgcP3MPJERAQIECBAgQIAAAQIECBAgUCtw/VrrSXcFg23brpmZm2o5LE6AAAECBAgQIECAAAECBAicFLhm//LDr/+ThG3bXjYzb2VDgAABAgQIECBAgAABAgQI1Au8bK31WyeDwYdm5mn1JAAIECBAgAABAgQIECBAgACBD6+1nr62bXvgzHxxZq5iQoAAAQIECBAgQIAAAQIECNQL3DEzD9uDwXUzc0M9BwACBAgQIECAAAECBAgQIEDgpMCJPRi8YGbezYQAAQIECBAgQIAAAQIECBAgcBB4wR4M3jIzL0dCgAABAgQIECBAgAABAgQIEDgIvHUPBh+YmWchIUCAAAECBAgQIECAAAECBAgcBD64B4P9+wv27zHwIECAAAECBAgQIECAAAECBAjsAjfuweBfZ+Z7eBAgQIAAAQIECBAgQIAAAQIEDgK37sHg8zPzHUgIECBAgAABAgQIECBAgAABAgeB2/dgsP9+xSuRECBAgAABAgQIECBAgAABAgQOAl/dg8GGgwABAgQIECBAgAABAgQIECBwqoBg4O8DAQIECBAgQIAAAQIECBAgcJqAYOAvBQECBAgQIECAAAECBAgQICAY+DtAgAABAgQIECBAgAABAgQIZAGfMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAX2YPDVmXlAHjVBgAABAgQIECBAgAABAgQIlAh8bQ8Gt83MQ0oWtiYBAgQIECBAgAABAgQIECCQBW7fg8GtM/OoPGuCAAECBAgQIECAAAECBAgQKBG4dQ8GN8zMdSULW5MAAQIECBAgQIAAAQIECBDIAjfuweADM/OsPGuCAAECBAgQIECAAAECBAgQKBH44B4M3jIzLy9Z2JoECBAgQIAAAQIECBAgQIBAFnjrHgxeMDPvzrMmCBAgQIAAAQIECBAgQIAAgRKBn9uDwYmZ+UTJwtYkQIAAAQIECBAgQIAAAQIEssCJPRg8cGa+ODNX5XkTBAgQIECAAAECBAgQIECAwGUucMfMPGztS27b9qGZedplvrD1CBAgQIAAAQIECBAgQIAAgSzw4bXW008Gg/1LD/cvP/QgQIAAAQIECBAgQIAAAQIEugVevtb6zZPB4JqZuanbw/YECBAgQIAAAQIECBAgQIDAzFy71rr568Fgf2zbdv3MPBENAQIECBAgQIAAAQIECBAgUCtw/VrrSfv2pwaDF8/Mb9eSWJwAAQIECBAgQIAAAQIECBB48VrrHXcPBg+dmc/OzLfwIUCAAAECBAgQIECAAAECBOoE/ntmrl5r3fYNwWD/H9u2vW1mXlJHYmECBAgQIECAAAECBAgQIEDg7Wutl55kuOufJByCwWNm5p9n5kGcCBAgQIAAAQIECBAgQIAAgRqB/5uZ711r3XKPweAQDd41Mz9fQ2JRAgQIECBAgAABAgQIECBA4HfXWi88leEbPmFwCAaPPHzK4CpeBAgQIECAAAECBAgQIECAwGUvcMfMPHattX+v4V2P04LBIRq8embecNmTWJAAAQIECBAgQIAAAQIECBB47VrrtAZwpmCwf4fBDTPzeG4ECBAgQIAAAQIECBAgQIDAZSvwqZk5sdb6yt03vMdgsA9t23ZiZj42M1dctiwWI0CAAAECBAgQIECAAAECvQJ3zsxT1lr7BwZOe5wxGByiwS/OzK/32tmcAAECBAgQIECAAAECBAhctgKvWmv92pm2S8Fg//M/nplnX7Y8FiNAgAABAgQIECBAgAABAn0C75uZ56y1tnMKBvsPbdv2rTPz5zPz5D4/GxMgQIAAAQIECBAgQIAAgctO4OMz87S11u1n2+ysnzA4+YPbtj388H0G1152TBYiQIAAAQIECBAgQIAAAQI9AjcdvrfgC2nlIwWD/Um2bXvMzHx0Zh6VntSfEyBAgAABAgQIECBAgAABAvc7gc/MzFPXWjcf5Z0dORgcosE1M/ORmfmuozy5GQIECBAgQIAAAQIECBAgQOB+IfDpmfnxtdb+CYMjPY4VDA7RYP+EwZ/MzBOO9AqGCBAgQIAAAQIECBAgQIAAgftS4JMz88y11v4JgyM/jh0MDtHgwTPzhzPzk0d+JYMECBAgQIAAAQIECBAgQIDAxRZ4/8w8f631peO+8DkFg0M02H/2lTPzKzNzxXFf2DwBAgQIECBAgAABAgQIECBwwQTunJlfnpk3ne1XJ57t1c85GJx80m3bThw+bfC4C7amJyZAgAABAgQIECBAgAABAgSOKvCPM/O8tdaNR/2Be5q718Fgf9Jt2/ZPGOyfNnj1zFx1b96QnyVAgAABAgQIECBAgAABAgTOSeCOmXnj4VMF+ycM7tXjvASDk+9g27ZHzMzrZuZnZ+ab7tU788MECBAgQIAAAQIECBAgQIDAUQT+d2Z+b2Zev9b6/FF+4Cgz5zUYnBIOrp6ZV8zMi2bmyqO8ETMECBAgQIAAAQIECBAgQIDAsQS+PDPvnJk3r7U+d6yfPMLwBQkGp4SDh87Mc/d/OzEzP3iE92OEAAECBAgQIECAAAECBAgQOLvA9TPznpl571rrtguFdUGDwalvetu2x8zMM2bmR2bmqTPzsAu1lOclQIAAAQIECBAgQIAAAQKXkcAXZ+avZ+avZubP1lo3X4zdLlowuFs8eMDMPGFmrpuZ75uZa2bmO2fm2w9fmrh/MsGDAAECBAgQIECAAAECBAi0COyfFNi/tPDfZ+bWmbllZvbfdrD/poNPrrW+drEh/h+5oaPdsxLhuQAAAABJRU5ErkJggg==\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"b\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":1012,\"height\":648,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAwAAAKICAYAAAD0EmiCAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3I5Xldx/HvT3SLdk0ljFyN0t1IEjN2TMEHZXcoKEjmQ9HKUkgURQtv8pGlVN6UlqBJN+Kzwhuo0MjKHhi27pJJUbG7IesNJOUurt2s6T/+cmYZd3bmc12zM7M783kd2Acy3+uc831954lvzpxrzX3w2LbtATPz+Jm5bmYeNzPXzszVM/NtM3Pl4b+r7oO35iUJECBAgAABAgQIECBAgMDFFrhjZr58+O8/ZuZzM3PTzPzTzNw4M/+w1vraxX5T62K94LZtj56ZZ8zMj87MDx3iwMV6ea9DgAABAgQIECBAgAABAgQuVYH/nJmPzsxfzsyfrrX+7WIsckGDwbZtD5mZ587M82bmSRdjIa9BgAABAgQIECBAgAABAgQuc4G/m5n3zMx711q3X6hdL0gw2LbtETPzypl54cz4pwUX6nqelwABAgQIECBAgAABAgSaBfZ/yvCumXnTWuvz5xvivAaDQyh43cz8zMx88/l+s56PAAECBAgQIECAAAECBAgQOE3gf2bm92fm9eczHJyXYLBt24MOnyh4jU8U+KtLgAABAgQIECBAgAABAgTuE4H9EwdvOHzi4Cv39h3c62CwbduJQ8nYf+uBBwECBAgQIECAAAECBAgQIHDfCnxqZn56rbX/hoVzfpxzMNi2bf/ZV8zMr87MFef8DvwgAQIECBAgQIAAAQIECBAgcL4F7pyZ187Mm9da27k8+TkFg23bHjwzfzAzzz6XF/UzBAgQIECAAAECBAgQIECAwEUReP/MPH+t9aXjvtqxg8G2bY+cmT+ZmR847ouZJ0CAAAECBAgQIECAAAECBC66wN/PzDPXWp89zisfKxhs23bNzPzFzHz3cV7ELAECBAgQIECAAAECBAgQIHCfCnx6Zn5srXXzUd/FkYPBtm2Pnpm/mZlHHfXJzREgQIAAAQIECBAgQIAAAQL3G4HPzMwPr7VuOco7OlIw2Lbt4TPzsZm59ihPaoYAAQIECBAgQIAAAQIECBC4XwrcNDNPWWt9Ib27GAy2bbtyZj4yM09OT+bPCRAgQIAAAQIECBAgQIAAgfu9wMdn5ifSFyGeNRgcfnXiH83MT93v1/UGCRAgQIAAAQIECBAgQIAAgaMKvG9mnnO2X7mYgsErZ+Y3jvpq5ggQIECAAAECBAgQIECAAIFLRuCX1lpn/P/8ZwwG27ZdNzN/OzNXXDKreqMECBAgQIAAAQIECBAgQIDAUQXuPHyfwQ339AP3GAy2bXvQzHxiZr7/qK9ijgABAgQIECBAgAABAgQIELjkBD41MyfWWl+5+zs/UzB41cy88ZJb0xsmQIAAAQIECBAgQIAAAQIEjivwmrXWaQ3gtGCwbdvVM/MvM3PVcV/BPAECBAgQIECAAAECBAgQIHDJCdwxM49da3321Hd+T8HgnTPzwktuPW+YAAECBAgQIECAAAECBAgQOFeBd621XnTGYLBt26MPny7Yv8PAgwABAgQIECBAgAABAgQIEOgQ2L/DYP+UwS0n1/2GTxhs2/a2mXlJh4UtCRAgQIAAAQIECBAgQIAAgVME3r7WeulpwWDbtofOzGdm5kpcBAgQIECAAAECBAgQIECAQJ3Af83MI9dat+2b3/UJg23bfmFmfqeOw8IECBAgQIAAAQIECBAgQIDASYEXr7XecfdgcP3MPJERAQIECBAgQIAAAQIECBAgUCtw/VrrSXcFg23brpmZm2o5LE6AAAECBAgQIECAAAECBAicFLhm//LDr/+ThG3bXjYzb2VDgAABAgQIECBAgAABAgQI1Au8bK31WyeDwYdm5mn1JAAIECBAgAABAgQIECBAgACBD6+1nr62bXvgzHxxZq5iQoAAAQIECBAgQIAAAQIECNQL3DEzD9uDwXUzc0M9BwACBAgQIECAAAECBAgQIEDgpMCJPRi8YGbezYQAAQIECBAgQIAAAQIECBAgcBB4wR4M3jIzL0dCgAABAgQIECBAgAABAgQIEDgIvHUPBh+YmWchIUCAAAECBAgQIECAAAECBAgcBD64B4P9+wv27zHwIECAAAECBAgQIECAAAECBAjsAjfuweBfZ+Z7eBAgQIAAAQIECBAgQIAAAQIEDgK37sHg8zPzHUgIECBAgAABAgQIECBAgAABAgeB2/dgsP9+xSuRECBAgAABAgQIECBAgAABAgQOAl/dg8GGgwABAgQIECBAgAABAgQIECBwqoBg4O8DAQIECBAgQIAAAQIECBAgcJqAYOAvBQECBAgQIECAAAECBAgQICAY+DtAgAABAgQIECBAgAABAgQIZAGfMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAX2YPDVmXlAHjVBgAABAgQIECBAgAABAgQIlAh8bQ8Gt83MQ0oWtiYBAgQIECBAgAABAgQIECCQBW7fg8GtM/OoPGuCAAECBAgQIECAAAECBAgQKBG4dQ8GN8zMdSULW5MAAQIECBAgQIAAAQIECBDIAjfuweADM/OsPGuCAAECBAgQIECAAAECBAgQKBH44B4M3jIzLy9Z2JoECBAgQIAAAQIECBAgQIBAFnjrHgxeMDPvzrMmCBAgQIAAAQIECBAgQIAAgRKBn9uDwYmZ+UTJwtYkQIAAAQIECBAgQIAAAQIEssCJPRg8cGa+ODNX5XkTBAgQIECAAAECBAgQIECAwGUucMfMPGztS27b9qGZedplvrD1CBAgQIAAAQIECBAgQIAAgSzw4bXW008Gg/1LD/cvP/QgQIAAAQIECBAgQIAAAQIEugVevtb6zZPB4JqZuanbw/YECBAgQIAAAQIECBAgQIDAzFy71rr568Fgf2zbdv3MPBENAQIECBAgQIAAAQIECBAgUCtw/VrrSfv2pwaDF8/Mb9eSWJwAAQIECBAgQIAAAQIECBB48VrrHXcPBg+dmc/OzLfwIUCAAAECBAgQIECAAAECBOoE/ntmrl5r3fYNwWD/H9u2vW1mXlJHYmECBAgQIECAAAECBAgQIEDg7Wutl55kuOufJByCwWNm5p9n5kGcCBAgQIAAAQIECBAgQIAAgRqB/5uZ711r3XKPweAQDd41Mz9fQ2JRAgQIECBAgAABAgQIECBA4HfXWi88leEbPmFwCAaPPHzK4CpeBAgQIECAAAECBAgQIECAwGUvcMfMPHattX+v4V2P04LBIRq8embecNmTWJAAAQIECBAgQIAAAQIECBB47VrrtAZwpmCwf4fBDTPzeG4ECBAgQIAAAQIECBAgQIDAZSvwqZk5sdb6yt03vMdgsA9t23ZiZj42M1dctiwWI0CAAAECBAgQIECAAAECvQJ3zsxT1lr7BwZOe5wxGByiwS/OzK/32tmcAAECBAgQIECAAAECBAhctgKvWmv92pm2S8Fg//M/nplnX7Y8FiNAgAABAgQIECBAgAABAn0C75uZ56y1tnMKBvsPbdv2rTPz5zPz5D4/GxMgQIAAAQIECBAgQIAAgctO4OMz87S11u1n2+ysnzA4+YPbtj388H0G1152TBYiQIAAAQIECBAgQIAAAQI9AjcdvrfgC2nlIwWD/Um2bXvMzHx0Zh6VntSfEyBAgAABAgQIECBAgAABAvc7gc/MzFPXWjcf5Z0dORgcosE1M/ORmfmuozy5GQIECBAgQIAAAQIECBAgQOB+IfDpmfnxtdb+CYMjPY4VDA7RYP+EwZ/MzBOO9AqGCBAgQIAAAQIECBAgQIAAgftS4JMz88y11v4JgyM/jh0MDtHgwTPzhzPzk0d+JYMECBAgQIAAAQIECBAgQIDAxRZ4/8w8f631peO+8DkFg0M02H/2lTPzKzNzxXFf2DwBAgQIECBAgAABAgQIECBwwQTunJlfnpk3ne1XJ57t1c85GJx80m3bThw+bfC4C7amJyZAgAABAgQIECBAgAABAgSOKvCPM/O8tdaNR/2Be5q718Fgf9Jt2/ZPGOyfNnj1zFx1b96QnyVAgAABAgQIECBAgAABAgTOSeCOmXnj4VMF+ycM7tXjvASDk+9g27ZHzMzrZuZnZ+ab7tU788MECBAgQIAAAQIECBAgQIDAUQT+d2Z+b2Zev9b6/FF+4Cgz5zUYnBIOrp6ZV8zMi2bmyqO8ETMECBAgQIAAAQIECBAgQIDAsQS+PDPvnJk3r7U+d6yfPMLwBQkGp4SDh87Mc/d/OzEzP3iE92OEAAECBAgQIECAAAECBAgQOLvA9TPznpl571rrtguFdUGDwalvetu2x8zMM2bmR2bmqTPzsAu1lOclQIAAAQIECBAgQIAAAQKXkcAXZ+avZ+avZubP1lo3X4zdLlowuFs8eMDMPGFmrpuZ75uZa2bmO2fm2w9fmrh/MsGDAAECBAgQIECAAAECBAi0COyfFNi/tPDfZ+bWmbllZvbfdrD/poNPrrW+drEh/h+5oaPdsxLhuQAAAABJRU5ErkJggg==\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"fo\":[],\"bo\":[]}";
                //let j = JSON.parse(blank);
                //canvas1.setZoom(1);
                //canvas2.setZoom(1);
                //canvas1.loadFromJSON(j.f);
                //canvas2.loadFromJSON(j.b);
                let t_objs1 = canvas1.getObjects()
                let t_objs2 = canvas2.getObjects()
                for (let i = 1; i < t_objs1.length; i++) {
                    canvas1.remove(t_objs1[i])
                }
                for (let i = 1; i < t_objs2.length; i++) {
                    canvas2.remove(t_objs2[i])
                }
                objs2 = []
                objs1 = []
                step1.val = 0
                step2.val = 0
                recordJson1 = []
                recordJson2 = []
                recordObjs1 = []
                recordObjs2 = []
                if ($('#front_side').hasClass('ui-button-active')) {
                    objs = objs1
                    recordObjs = recordObjs1
                    recordJson = recordJson1
                    step = step1
                } else if ($('#back_side').hasClass('ui-button-active')) {
                    objs = objs2
                    recordObjs = recordObjs2
                    recordJson = recordJson2
                    step = step2
                }
                openAs.name = ''
                canvas1.renderAll()
                canvas2.renderAll()
                updateList()
                console.log()
            }
            $('#new').click(function () {
                if (step.val == 0) {
                    ipcRenderer.send('open-first-page');
                    return;
                }
                layer.confirm(
                    '<font style="color:black">' + language_str('whetherSave') + '</font>',
                    function (index) {
                        //confirm 是否保存当前文件？
                        output(() => ipcRenderer.send('open-first-page'))
                        return
                        let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                        let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                        let _g1 = [],
                            _g2 = []
                        let left = 0,
                            top = 0
                        for (let _o of canvas1.getObjects()) {
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                                left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                                top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            _g1.push(fabric.util.object.clone(_o))
                        }
                        let fp = new fabric.Group(_g1).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                            ; (left = 0), (top = 0)
                        for (let _o of canvas2.getObjects()) {
                            if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
                                left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
                            }
                            if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
                                top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
                            }
                            _g2.push(fabric.util.object.clone(_o))
                        }
                        //let fp = new fabric.Group(_g1).toDataURL();
                        let bp = new fabric.Group(_g2).toDataURL({
                            height: 648,
                            width: 1012,
                            top: top / zoom,
                            left: left / zoom
                        })
                        let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
                        if (openAs.name != '') {
                            //打开的文件
                            let fs = require('fs')
                            o.soonType = 2
                            fs.writeFileSync(openAs.name, JSON.stringify(o))
                            layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                            /*
                                          2022-07-16 直接跳转至首页
                                          */
                            ipcRenderer.send('open-first-page')
                            //saveHistory();
                            //clearAll();
                            return
                        }
                        dialog
                            .showSaveDialog({
                                title: language_str('saveFile'), //'保存文件'
                                filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
                            })
                            .then((result) => {
                                if (result.filePath == '') {
                                    return
                                }
                                if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
                                    result.filePath += '.soon'
                                }
                                let fs = require('fs')
                                o.soonType = 2
                                fs.writeFileSync(result.filePath, JSON.stringify(o))
                                openAs.name = result.filePath
                                layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
                                /*
                                            2022-07-16 直接跳转至首页
                                            */
                                ipcRenderer.send('open-first-page')
                                //saveHistory();
                                //clearAll();
                            })
                            .catch((err) => {
                                console.log()
                            })
                        layer.close(index)
                    },
                    function (index) {
                        /*
                                    2022-07-16 直接跳转至首页
                                    */
                        //clearAll();
                        ipcRenderer.send('open-first-page')
                    }
                )
            })
            function chagneTitle() { }
            function addBackground() {
                // 类型改变
                fabric.Image.fromURL('./public/images/bg_front_2.png', function (image) {
                    //image.set("scaleX",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)
                    //image.set("scaleY",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)

                    image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
                    image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2

                    image.selectable = false
                    image.hoverable = false
                    image.hoverCursor = 'default'
                    image.setSrc(image.toDataURL(), function (image) {
                        background_image1 = image
                        background_image = background_image1
                        canvas.add(image)
                        canvas.renderAll()
                        //pre_objs1.push(JSON.stringify(objs1));
                        //pre_json1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor"]));

                        recordObjs1.push(JSON.stringify(objs1))
                        recordJson1.push(canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))
                    })
                    // 类型改变
                    fabric.Image.fromURL('./public/images/bg_back_2.png', function (image) {
                        image.left = ($('#canvas2').width() - image.width) / 2
                        image.top = ($('#canvas2').height() - image.height) / 2

                        image.selectable = false
                        image.hoverable = false
                        image.hoverCursor = 'default'

                        image.setSrc(image.toDataURL(), function (image) {
                            background_image2 = image
                            canvas2.add(image)
                            canvas2.renderAll()
                            //pre_objs2.push(JSON.stringify(objs2));
                            //pre_json2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor"]));

                            recordObjs2.push(JSON.stringify(objs2))
                            recordJson2.push(canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))

                            let file = GetFile().get('file')
                            console.log(file)
                            if (file && file != 'empty') {
                                open(file)
                            }
                        })
                    })
                    is_bgi_add = true
                })
            }
            function selectObject(target, index) {
                updateControls()

                $('#base_control').show()
                //$("#text_x").val((target.left - background_image.left).toFixed(1));
                //$("#text_y").val((target.top - background_image.top).toFixed(1));
                //$("#text_w").val(parseFloat(target.get("scaleX") * target.get("width")).toFixed(1));
                //$("#text_h").val(parseFloat(target.get("scaleY") * target.get("height")).toFixed(1));
                //$("#text_r").val(target.get("angle").toFixed(0));
            }
            function updateControls() {
                $('#text_r').val(canvas.getActiveObject().get('angle').toFixed(0))
                $('#text_x').val((canvas.getActiveObject().get('left') - background_image.left).toFixed(0))
                $('#text_y').val((canvas.getActiveObject().get('top') - background_image.top).toFixed(0))
                $('#text_h').val((canvas.getActiveObject().get('scaleY') * canvas.getActiveObject().get('height')).toFixed(0))
                $('#text_w').val((canvas.getActiveObject().get('scaleX') * canvas.getActiveObject().get('width')).toFixed(0))
                if (canvas.getActiveObject().get('selectable')) {
                    $('#lock_img').attr('src', 'public/images/unlock20.png') //已经上锁，需要解锁
                } else {
                    $('#lock_img').attr('src', 'public/images/lock20.png') //没上锁，可以上锁
                }
            }
            function checkName(name) {
                //检查字段名是否重复了
                for (let item of objs1) {
                    if (item.name == name) {
                        return false
                    }
                }
                for (let item of objs2) {
                    if (item.name == name) {
                        return false
                    }
                }
                return true
            }
            function resName(pre_name) {
                //返回的是不重复的字段名
                let num = objs1.length + objs2.length - 1
                do {
                    num++
                } while (!checkName(pre_name + num)) //重复了就再加1
                return pre_name + num
            }
            function addPic(pointer) {
                pre_add_image.left = pointer.x
                pre_add_image.top = pointer.y

                canvas.add(pre_add_image)

                objs.push({ type: 1, black: false })
                canvas.renderAll()
                updateList()
                recordState()
                //OpenDialog();
                //function OpenDialog()
                //{
                //    dialog.showOpenDialog({
                //        title: "请选择图片",
                //        buttonLabel: "确认",
                //        filters: [
                //            { name: 'Image File Type', extensions: ['png', 'jpg'] },
                //        ]
                //    }).then(result => {
                //        if(result.canceled)return;
                //        //console.log(result.filePaths)
                //        fabric.Image.fromURL(result.filePaths[0], function(image) {
                //            image.left = pointer.x;
                //            image.top = pointer.y;
                //
                //            canvas.add(image);
                //            objs.push({type: 1});
                //            canvas.renderAll();
                //            updateList();
                //            recordState();
                //        } );
                //    }).catch(err => {
                //        console.log(err)
                //    })
                //}
            }
            function selectPic(target, index) {
                //透明度

                $('#pic_control').show()
                $("#set_bg").show();
                pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)

                let idx = getIndex(canvas.getActiveObject())
                // $("#pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');

                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#line_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }
            function addOutPic(pointer) {
                fabric.Image.fromURL('./public/images/outpic_extra.png', function (image) {
                    let width = canvas.getWidth()
                    let height = canvas.getHeight()
                    image.left = pointer.x
                    image.top = pointer.y
                    image.opacity = 1
                    //image.on("selected",function(){//test well
                    //    console.log(222);
                    //});
                    image.setSrc(image.toDataURL(), function (image) {
                        canvas.add(image)
                        objs.push({ type: 2, name: resName('OUT_PIC_'), black: false })
                        canvas.renderAll()
                        updateList()
                        recordState()
                    })
                })
            }
            function selectOutPic(target, index) {
                //字段名
                $('#out_pic_control').show()
                out_pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
                let idx = getIndex(canvas.getActiveObject())
                $('#out_pic_field_name').val(objs[idx - 1].name)
                // $("#out_pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');

                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#line_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }

            function addText(pointer) {
                let text = new fabric.IText('TEXT', {
                    //源：文本
                    left: pointer.x,
                    top: pointer.y,
                    fill: '#000000',
                    textBackgroundColor: '',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    underline: false,
                    linethrough: false,
                    fontFamily: 'Arial'
                })
                text.setControlVisible('ml', false)
                text.setControlVisible('mt', false)
                text.setControlVisible('mr', false)
                text.setControlVisible('mb', false)
                canvas.add(text)
                objs.push({ type: 3, black: false })
                canvas.renderAll()
                updateList()
                recordState()
            }
            function selectText() {
                //console.log(canvas.getActiveObject().get("fontFamily"));
                $('#text_control').show()
                $('#text_color').val(canvas.getActiveObject().get('fill'))
                $('#text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
                let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
                if (val%0.5!==0) val = Math.round(val*2)/2
                $("#text_size").val(val);
                $('#text_text').val(canvas.getActiveObject().get('text'))
                $('#text_font_family').val(canvas.getActiveObject().get('fontFamily'))

                if (canvas.getActiveObject().get('underline') == true) {
                    $('#text_underline').addClass('ui-radio-acitve')
                } else {
                    $('#text_underline').removeClass('ui-radio-acitve')
                }
                if (canvas.getActiveObject().get('fontWeight') == 'bold') {
                    $('#text_bold').addClass('ui-radio-acitve')
                } else {
                    $('#text_bold').removeClass('ui-radio-acitve')
                }
                if (canvas.getActiveObject().get('fontStyle') == 'italic') {
                    $('#text_italics').addClass('ui-radio-acitve')
                } else {
                    $('#text_italics').removeClass('ui-radio-acitve')
                }
                if (canvas.getActiveObject().get('linethrough') == true) {
                    $('#text_linethrough').addClass('ui-radio-acitve')
                } else {
                    $('#text_linethrough').removeClass('ui-radio-acitve')
                }
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#line_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }
            function getDisdance(x1, y1, x2, y2) {
                    var dx = Math.abs(x2 - x1); // 计算x轴上的距离差，并取绝对值
                    var dy = Math.abs(y2 - y1); // 计算y轴上的距离差，并取绝对值
                    var distance = Math.sqrt(dx * dx + dy * dy); // 应用勾股定理计算距离
                    return distance;
                }
                function getDeg(pointer) {
                    // 计算点击位置与画布中心的坐标差
                    var centerX = canvas.width / 2;
                    var centerY = canvas.height / 2;
                    var mouseX = pointer.x;
                    var mouseY = pointer.y;
                    var dx = mouseX - centerX;
                    var dy = mouseY - centerY;
                    // 计算旋转角度（弧度）
                    var angleRad = Math.atan2(dy, dx);
                    // 将角度转换为度数
                    var angleDeg = angleRad * (180/Math.PI);
                    if (angleDeg < 0) {
                        angleDeg += 360;
                    }
                    angleDeg += 90
                    return angleDeg
                }
                function addCircleText(pointer) {
                    let distance =  getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
                    let angleDeg = getDeg(pointer)
                    let text = new fabric.CurvedText('Circle TEXT', {//源：圆形文本
                        left: pointer.x,
                        top: pointer.y,
                        fill: "#000000",
                        textBackgroundColor: "",
                        fontStyle: "normal",
                        fontWeight: "normal",
                        diameter: distance*2,
                        fontSize: 30,
                        underline: false,
                        linethrough: false,
                        lockScalingX: true,
                        lockScalingY: true,
                        fontFamily: 'Arial',
                        originX: 'center',
                        originY: 'center',
                        angle: angleDeg,
                        flipped: pointer.y > canvas.height/2 ? true : false
                    });
                    // distance =  getDisdance(pointer.x+text.width/2, pointer.y, canvas.width/2,canvas.height/2)
                    // text.set({diameter: distance*2})
                    text.setControlVisible("ml", false);
                    text.setControlVisible("mt", false);
                    text.setControlVisible("mr", false);
                    text.setControlVisible("mb", false);
                    canvas.add(text);
                    objs.push({ type: 11, black: false, circleCenter: 0 });
                    canvas.renderAll();
                    updateList();
                    recordState();
                }
                function selectCircleText() {
                    console.log(canvas.getActiveObject().get("text"))
                    let idx = getIndex(canvas.getActiveObject());
                    $("#circle_text_control").show();
                    $("#circle_text_color").val(canvas.getActiveObject().get("fill"));
                    $("#circle_text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor"));
                    circle_text_size.setValue(canvas.getActiveObject().get("fontSize") - 10);
                    circle_text_diameter.setValue(canvas.getActiveObject().get("diameter")-50);
                    $("#circle_text_center").prop("checked", objs[idx - 1].circleCenter ? 'checked' : '');
                    $("#circle_text_text").val(canvas.getActiveObject().get("text"));
                    $("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily"));

                    if (canvas.getActiveObject().get("underline") == true) {
                        $("#circle_text_underline").addClass("ui-radio-acitve")
                    } else {
                        $("#circle_text_underline").removeClass("ui-radio-acitve")
                    }
                    if (canvas.getActiveObject().get("fontWeight") == "bold") {
                        $("#circle_text_bold").addClass("ui-radio-acitve")
                    } else {
                        $("#circle_text_bold").removeClass("ui-radio-acitve")
                    }
                    if (canvas.getActiveObject().get("fontStyle") == "italic") {
                        $("#circle_text_italics").addClass("ui-radio-acitve")
                    } else {
                        $("#circle_text_italics").removeClass("ui-radio-acitve")
                    }
                    if (canvas.getActiveObject().get("linethrough") == true) {
                        $("#circle_text_linethrough").addClass("ui-radio-acitve")
                    } else {
                        $("#circle_text_linethrough").removeClass("ui-radio-acitve")
                    }
                    $("#pic_control").hide();
                    $("#set_bg").hide();
                    $("#rotate").hide();
                    $("#out_pic_control").hide();
                    $("#text_control").hide();
                    $("#out_text_control").hide();
                    $("#rect_control").hide();
                    $("#circle_control").hide();
                    $("#line_control").hide();
                    $("#counter_control").hide();
                    $("#qrcode_Controll").hide();
                    $("#barcode_controll").hide();

                }
            function addOutText(pointer) {
                //MERGE_TEXT_1
                let text = new fabric.Text('MERGE TEXT', {
                    //源：合成文本
                    left: pointer.x,
                    top: pointer.y,
                    fill: '#000000',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    textBackgroundColor: '',
                    underline: false,
                    linethrough: false,
                    fontFamily: 'Arial',
                    textAlign: 'center'
                })

                //text.on({
                //    'scaling': function(e) {
                //        var obj = this,
                //            w = obj.width * obj.scaleX,
                //            h = obj.height * obj.scaleY;
                //
                //        obj.set({
                //            'height'     : h,
                //            'width'      : w,
                //            'scaleX'     : 1,
                //            'scaleY'     : 1
                //        });
                //    }
                //});
                text.setControlVisible('ml', false)
                text.setControlVisible('mt', false)
                text.setControlVisible('mr', false)
                text.setControlVisible('mb', false)

                canvas.add(text)
                objs.push({ type: 4, name: resName('OUT_TEXT_'), exceed: false, autoWrap: false, fixSize: false, black: false, align: 'center' })
                canvas.renderAll()
                updateList()
                recordState()
            }
            function selectOutText() {
                //color
                //size
                const align = canvas.getActiveObject().get('textAlign')
                if (align === 'left') {
                    $('#out_left_alignment').parent().addClass('tool1')
                } else if (align === 'right') {
                    $('#out_right_alignment').parent().addClass('tool1')
                } else {
                    $('#out_center_alignment').parent().addClass('tool1')
                }
                $('#out_text_control').show()
                $('#out_text_color').val(canvas.getActiveObject().get('fill'))
                $('#out_text_text').val(canvas.getActiveObject().get('text'))
                let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
                if (val%0.5!==0) val = Math.round(val*2)/2
                $("#out_text_size").val(val);
                $('#out_text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
                let idx = getIndex(canvas.getActiveObject())
                $('#out_text_field_name').val(objs[idx - 1].name)
                $('#out_text_font_family').val(canvas.getActiveObject().get('fontFamily'))
                $('#exceed').prop('checked', objs[idx - 1].exceed ? 'checked' : '')
                $('#autoWrap').prop('checked', objs[idx - 1].autoWrap ? 'checked' : '')
                $('#fixSize').prop('checked', objs[idx - 1].fixSize ? 'checked' : '')
                if (canvas.getActiveObject().get('underline') == true) {
                    $('#out_text_underline').addClass('ui-radio-acitve')
                } else {
                    $('#out_text_underline').removeClass('ui-radio-acitve')
                }
                if (canvas.getActiveObject().get('fontWeight') == 'bold') {
                    $('#out_text_bold').addClass('ui-radio-acitve')
                } else {
                    $('#out_text_bold').removeClass('ui-radio-acitve')
                }
                if (canvas.getActiveObject().get('fontStyle') == 'italic') {
                    $('#out_text_italics').addClass('ui-radio-acitve')
                } else {
                    $('#out_text_italics').removeClass('ui-radio-acitve')
                }
                if (canvas.getActiveObject().get('linethrough') == true) {
                    $('#out_text_linethrough').addClass('ui-radio-acitve')
                } else {
                    $('#out_text_linethrough').removeClass('ui-radio-acitve')
                }

                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#line_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }
            function addRect(pointer) {
                let rect = new fabric.Rect({
                    left: pointer.x,
                    top: pointer.y,
                    fill: '',
                    stroke: "#ff0000",
                    strokeWidth: 3,
                    width: 100,
                    height: 100
                })
                canvas.add(rect)
                objs.push({ type: 5, black: false })
                canvas.renderAll()
                updateList()
                recordState()
            }
            function selectRect() {
                //color
                $('#rect_control').show()
                $('#rect_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
                $('#rect_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
                $('#rect_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
                $('#rect_radius').val(canvas.getActiveObject().get('rx'))
                rect_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
                let a = canvas.getActiveObject().getCoords()
                console.log(getCoordsMinX(a))
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#circle_control').hide()
                $('#line_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }
            function addCircle(pointer) {
                let circle = new fabric.Circle({
                    left: pointer.x,
                    top: pointer.y,
                    fill: '',
                    stroke: '#ff0000',
                    strokeWidth: 3,
                    radius: 100,
                    strokeUniform: true
                })
                canvas.add(circle)
                objs.push({ type: 6, black: false })
                canvas.renderAll()
                updateList()
                recordState()
            }
            function selectCircle() {
                //border-color
                //color
                $('#circle_control').show()
                $('#circle_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
                $('#circle_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
                $('#circle_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
                circle_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#line_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }
            function addLine(pointer) {
                let line = new fabric.Line([50, 100, 200, 100], {
                    left: pointer.x,
                    top: pointer.y,
                    stroke: '#ff0000',
                    strokeWidth: 3,
                    strokeDashArray: [0, 0],
                })

                line.setControlVisible('tl', false)
                line.setControlVisible('tr', false)
                line.setControlVisible('br', false)
                line.setControlVisible('bl', false)
                line.setControlVisible('mt', false)
                line.setControlVisible('mb', false)
                canvas.add(line)
                objs.push({ type: 7, black: false })
                canvas.renderAll()
                updateList()
                recordState()
            }
            function selectLine() {
                //color
                //weight
                $('#line_control').show()

                let idx = getIndex(canvas.getActiveObject())
                $('#line_color').val(canvas.getActiveObject().get('stroke'))
                $('#line_dist').val(canvas.getActiveObject().get('strokeDashArray')[0])
                $('#text_h').val(canvas.getActiveObject().get('strokeWidth'))

                $('#pic_control').hide()
                $("#set_bg").hide();
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }
            function addQrCode(pointer) {
                let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0 })
                fabric.Image.fromURL(qr, function (image) {
                    image.left = pointer.x
                    image.top = pointer.y
                    canvas.add(image)
                    objs.push({ type: 8, name: resName('QR_CODE_'), color: '#000000', val: 'http://www.cardsoon.com', black: false })
                    canvas.renderAll()
                    updateList()
                    recordState()
                })
            }
            function selectQrCode() {
                //字段名
                //background-color
                //color
                $('#qrcode_Controll').show()
                let idx = getIndex(canvas.getActiveObject())
                $('#qrcode_field_name').val(objs[idx - 1].name)
                $('#qrcode_color').val(objs[idx - 1].color)
                $('#qrcode_val').val(objs[idx - 1].val)
                $('#line_control').hide()
                $('#pic_control').hide()
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#barcode_controll').hide()
            }
            function addBarCode(pointer) {
                JsBarcode('#barcode', '123456789', { margin: 0, lineColor: '#000000', fontSize: 18, font: 'Arial' })
                let barcode = document.getElementById('barcode')
                let bar = barcode.toDataURL('image/png')
                fabric.Image.fromURL(bar, function (image) {
                    image.left = pointer.x
                    image.top = pointer.y

                    canvas.add(image)
                    objs.push({ type: 9, name: resName('BAR_CODE_'), val: '123456789', color: '#000000', fontSize: 18, font: 'Arial', show: false, black: false }) //show是取消文字显示
                    canvas.renderAll()
                    updateList()
                    recordState()
                })
            }
            function selectBarCode() {
                //字段名
                //background-color
                //color
                $('#barcode_controll').show()
                let idx = getIndex(canvas.getActiveObject())
                $('#barcode_field_name').val(objs[idx - 1].name)
                $('#barcode_font_family').val(objs[idx - 1].font)
                let val = parseFloat(objs[idx - 1].fontSize)*72/dpi
                if (val%0.5!==0) val = Math.round(val*2)/2
                $("#barcode_size").val(val);
                $('#barcode_val').val(objs[idx - 1].val)
                $('#barcode_show').prop('checked', objs[idx - 1].show ? 'checked' : '')
                $('#line_control').hide()
                $('#pic_control').hide()
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#counter_control').hide()
                $('#qrcode_Controll').hide()
            }
            function addCounter(pointer) {
                let text = new fabric.Text('0', {
                    left: pointer.x,
                    top: pointer.y,
                    fill: '#000000'
                })
                canvas.add(text)
                objs.push({ type: 10, name: resName('COUNTER_'), start: 0, add: 1, black: false })
                canvas.renderAll()
                updateList()
                recordState()
                console.log(canvas.getObjects())
            }
            function selectCounter() {
                //起始
                //终止
                //增量
                $('#counter_control').show()

                let idx = getIndex(canvas.getActiveObject())
                $('#counter_start').val(objs[idx - 1].start)
                $('#counter_add').val(objs[idx - 1].add)
                $('#counter_color').val(canvas.getActiveObject().get('fill'))
                $('#count_font_family').val(canvas.getActiveObject().get('fontFamily'))
                let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
                if (val%0.5!==0) val = Math.round(val*2)/2
                $("#count_size").val(val);

                $('#line_control').hide()
                $('#pic_control').hide()
                $('#out_pic_control').hide()
                $('#text_control').hide()
                $("#circle_text_control").hide();
                $('#out_text_control').hide()
                $('#rect_control').hide()
                $('#circle_control').hide()
                $('#qrcode_Controll').hide()
                $('#barcode_controll').hide()
            }
            function getIndex(target, _canvas = null) {
                let temp_objs
                if (_canvas == null) {
                    temp_objs = canvas.getObjects()
                } else {
                    temp_objs = _canvas.getObjects()
                }

                let i = 0
                for (let res of temp_objs) {
                    if (target == res) {
                        return i
                    }
                    i++
                }
                return 0
            }
            function getType(target) {
                let temp_objs = canvas.getObjects()
                let i = 0
                for (let res of temp_objs) {
                    if (target == res) {
                        return objs[i].type
                    }
                    i++
                }
            }

            function updateList() {
                let str = ''
                let i = 0
                for (let item of objs) {
                    switch (item.type) {
                        case 1 /* 2022-06-14修改*/:
                            str = '<div><img  src="public/images/images.svg" id=\'obj' + i + "'/>IMG_" + i + '</div>' + str
                            break
                        case 2:
                            str = '<div><img src="public/images/images_add.svg" id=\'obj' + i + "'/>" + item.name + '</div>' + str
                            break
                        case 3:
                            str = '<div><img src="public/images/text.svg" id=\'obj' + i + "'/>" + 'TEXT_' + i + '</div>' + str
                            break
                        case 4:
                            str = '<div><img src="public/images/text2.svg" id=\'obj' + i + "'/>" + item.name + '</div>' + str
                            break
                        case 5:
                            str = '<div><img src="public/images/rect.svg" id=\'obj' + i + "'/>RECT_" + i + '</div>' + str
                            break
                        case 6:
                            str = '<div><img src="public/images/round.svg" id=\'obj' + i + "'/>CIRCLE_" + i + '</div>' + str
                            break
                        case 7:
                            str = '<div><img src="public/images/line.svg" id=\'obj' + i + "'/>LINE_" + i + '</div>' + str
                            break
                        case 8:
                            str = '<div><img src="public/images/qrcode.svg" id=\'obj' + i + "'/>QRCODE_" + i + '</div>' + str
                            break
                        case 9:
                            str = '<div><img src="public/images/barcode.svg" id=\'obj' + i + "'/>BARCODE_" + i + '</div>' + str
                            break
                        case 10:
                            str = '<div><img src="public/images/counter.svg" id=\'obj' + i + "'/>COUNTER_" + i + '</div>' + str
                            break
                        case 11:
                            str = "<div><img src=\"public/images/text3.svg\" id='obj" + i + "'/>" + "CIRCLE_TEXT_" + i + "</div>" + str;
                            break;
                    }
                    i++
                }
                $('.obj_list').html(str)
            }
            function selectObj(i, notSelect = false) {
                //for(let item in $(".obj_list").children()){
                //    if(_i == i){
                //        item.css("background-color","#6F7A84");
                //    }else{
                //        item.css("background-color","");
                //    }
                //    _i++;
                //}
                $('.obj_list div').each(function (index) {
                    //if(index == i){
                    if ($(this).children('img').attr('id') == 'obj' + i) {
                        $(this).css('background-color', '#6F7A84')
                        canvas.setActiveObject(canvas.getObjects()[i + 1])
                        canvas.renderAll()
                    } else {
                        $(this).css('background-color', '')
                    }
                })
                if (!notSelect) {
                    handleObjectSelected()
                }
            }
            function recordState() {
                //pre_objs.push(JSON.stringify(objs));
                //pre_json.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
                //next_json = [];
                //next_objs = [];
                //recordObjs.push(JSON.stringify(objs));
                //recordJson.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
                ++step.val
                for (let i = step.val; i < recordObjs.length; i++) {
                    recordObjs.pop()
                    recordJson.pop()
                }
                //recordObjs.splice(step.val, 1, JSON.stringify(objs))
                //recordJson.splice(step.val, 1, canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]))
                recordObjs.push(JSON.stringify(objs))
                j = canvas.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
                j.objects[0].hoverCursor = 'default'
                recordJson.push(j)
                console.log(recordJson)
            }
            function getCoordsMinX(acoords) {
                x = acoords[0].x
                for (let item of acoords) {
                    if (item.x < x) {
                        x = item.x
                    }
                }
                return x
            }
            function getCoordsMaxX(acoords) {
                x = acoords[0].x
                for (let item of acoords) {
                    if (item.x > x) {
                        x = item.x
                    }
                }
                return x
            }
            function getCoordsMinY(acoords) {
                y = acoords[0].y
                for (let item of acoords) {
                    if (item.y < y) {
                        y = item.y
                    }
                }
                return y
            }
            function getCoordsMaxY(acoords) {
                y = acoords[0].y
                for (let item of acoords) {
                    if (item.y > y) {
                        y = item.y
                    }
                }
                return y
            }

            $('#text_y').bind('input propertychange', function () {
                if ($('#text_y').val() == '') {
                    $('#text_y').val(0)
                }
                let val = background_image.top
                if ($('#text_y').val() != '') {
                    val = background_image.top + parseInt($('#text_y').val())
                }
                canvas.getActiveObject().set('top', val)
                canvas.renderAll()
                recordState()
            })
            $('#text_x').bind('input propertychange', function () {
                if ($('#text_x').val() == '') {
                    $('#text_x').val(0)
                }
                let val = background_image.left
                if ($('#text_x').val() != '') {
                    val = background_image.left + parseInt($('#text_x').val())
                }
                canvas.getActiveObject().set('left', val)
                canvas.renderAll()
                recordState()
            })
            $('#text_w').bind('input propertychange', function () {
                let val = '0'
                if ($('#text_w').val() != '') {
                    val = $('#text_w').val()
                }
                let type = objs[getIndex(canvas.getActiveObject()) - 1].type
                if (type == 3 || type == 4) {
                    canvas.getActiveObject().set('width', parseInt(val))
                } else {
                    canvas.getActiveObject().set('scaleX', parseInt(val) / canvas.getActiveObject().get('width'))
                }

                canvas.renderAll()
                recordState()
            })
            $('#text_h').bind('input propertychange', function () {
                let idx = getIndex(canvas.getActiveObject())
                if (objs[idx - 1].type == 7) {
                    if ($('#text_h').val() == '') {
                        $('#text_h').val(canvas.getActiveObject().get('strokeWidth'))
                    }
                    canvas.getActiveObject().set('strokeWidth', parseInt($('#text_h').val()))
                    canvas.renderAll()
                    return
                }
                let val = '0'
                if ($('#text_h').val() != '') {
                    val = $('#text_h').val()
                }
                let type = objs[getIndex(canvas.getActiveObject()) - 1].type
                if (type == 3 || type == 4) {
                    canvas.getActiveObject().set('height', parseInt(val))
                } else {
                    canvas.getActiveObject().set('scaleY', parseInt(val) / canvas.getActiveObject().get('height'))
                }

                canvas.renderAll()
                recordState()
            })
            $('#text_r').bind('input propertychange', function () {
                if ($('#text_r').val() == '') {
                    $('#text_r').val('0')
                }
                $('#text_r').val(parseInt($('#text_r').val()) % 360)
                //canvas.getActiveObject().set("rotate", val)
                canvas.getActiveObject().rotate(parseInt($('#text_r').val()))
                canvas.renderAll()
                recordState()
            })
            $('#out_pic_field_name').bind('input propertychange', function () {
                let idx = getIndex(canvas.getActiveObject())
                objs[idx - 1].name = $('#out_pic_field_name').val()
                updateList()
                recordState()
            })

            $('#text_black').click(function () {
                let idx = getIndex(canvas.getActiveObject())
                if ($(this).prop('checked')) {
                    objs[idx - 1].black = true
                } else {
                    objs[idx - 1].black = false
                }
                recordState()
            })
            // $("#out_pic_black").click(function () {
            //     let idx = getIndex(canvas.getActiveObject());
            //     if ($(this).prop("checked")) {
            //         objs[idx-1].black = true;
            //     } else {
            //         objs[idx-1].black = false;
            //     }
            //     recordState();
            // });
            $('#out_text_field_name').bind('input propertychange', function () {
                let idx = getIndex(canvas.getActiveObject())
                objs[idx - 1].name = $('#out_text_field_name').val()
                updateList()
                recordState()
            })
            $('#qrcode_field_name').bind('input propertychange', function () {
                let idx = getIndex(canvas.getActiveObject())
                objs[idx - 1].name = $('#qrcode_field_name').val()
                updateList()
                recordState()
            })
            $('#qrcode_color').bind('input propertychange', function () {
                let item = canvas.getActiveObject()
                let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0, foreground: $(this).val() })
                let idx = getIndex(item)
                objs[idx - 1].color = $(this).val()
                item.setSrc(qr, function (img) {
                    canvas.renderAll()
                    recordState()
                })
            })
            $("#qrcode_val").bind('change', function () {
                let val = $(this).val() ? $(this).val() : 'https://www.cardsoon.com'
                let item = canvas.getActiveObject();
                let qr = jrQrcode.getQrBase64(val, { padding: 0, foreground: $("#qrcode_color").val() });
                let idx = getIndex(item);
                objs[idx - 1].val = val;
                item.setSrc(qr, function (img) {
                    canvas.renderAll();
                    recordState();
                });
            });
            $('#barcode_color').bind('input propertychange', function () {
                let item = canvas.getActiveObject()
                let idx = getIndex(item)
                objs[idx - 1].color = $(this).val()
                JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
                let barcode = document.getElementById('barcode')
                let bar = barcode.toDataURL('image/png')
                item.setSrc(bar, function (img) {
                    canvas.renderAll()
                    recordState()
                })
            })
            $('#barcode_field_name').bind('input propertychange', function () {
                let idx = getIndex(canvas.getActiveObject())
                objs[idx - 1].name = $('#barcode_field_name').val()
                updateList()
                recordState()
            })
            $('#text_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('fill', $('#text_color').val())
                canvas.renderAll()
                recordState()
            })
            $('#text_back_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('textBackgroundColor', $('#text_back_color').val())
                canvas.renderAll()
                recordState()
            })
            $('#out_text_back_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('textBackgroundColor', $('#out_text_back_color').val())

                canvas.renderAll()
                recordState()
            })
            $("#text_size").bind('input propertychange', function () {
                let val = 1
                if (parseFloat($("#text_size").val())) {
                    val = parseFloat($("#text_size").val())
                    if (val < 1) {
                        val = 1
                    } else if (val > dpi) {
                        val = dpi
                    } else if (val%0.5!==0) {
                        val = Math.round(val*2)/2
                    }

                }
                $("#text_size").val(val)
                canvas.getActiveObject().set("fontSize", val*dpi/72);
                $("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
                $("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
                canvas.renderAll();
                recordState();
            })
            $("#circle_text_color").bind('input propertychange', function () {
                canvas.getActiveObject().set("fill", $("#circle_text_color").val());
                canvas.renderAll();
                recordState();
            })
            $("#circle_text_back_color").bind('input propertychange', function () {
                canvas.getActiveObject().set("textBackgroundColor", $("#circle_text_back_color").val());

                canvas.renderAll();
                recordState();
            })
            $("#circle_text_text").bind('input propertychange', function () {
                let val = $("#circle_text_text").val().trim()
                canvas.getActiveObject().set("text", ` ${val} `);
                canvas.renderAll();
                updateList();
                recordState();
            })
            $("#circle_text_center").click(function () {
                let idx = getIndex(canvas.getActiveObject());
                if ($(this).prop("checked")) {
                    objs[idx - 1].circleCenter = 1;
                } else {
                    objs[idx - 1].circleCenter = 0;
                }
                recordState();
            });
            $('#out_text_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('fill', $('#out_text_color').val())
                canvas.renderAll()
                recordState()
            })
            $("#out_text_size").bind('input propertychange', function () {
                    let val = 1
                    if (parseFloat($("#out_text_size").val())) {
                        val = parseFloat($("#out_text_size").val())
                        if (val < 1) {
                            val = 1
                        } else if (val > dpi) {
                            val = dpi
                        } else if (val%0.5!==0) {
                            val = Math.round(val*2)/2
                        }

                    }
                    $("#out_text_size").val(val)
                    canvas.getActiveObject().set("fontSize", val*dpi/72);
                    $("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
                    $("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
                    canvas.renderAll();
                    recordState();
                })
            $('#out_text_text').bind('input propertychange', function () {
                let val = $("#out_text_text").val().trim()
                canvas.getActiveObject().set("text", ` ${val} `);
                canvas.renderAll()
                updateList()
                recordState()
            })
            $('#rect_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('fill', $('#rect_color').val())

                canvas.renderAll()
                recordState()
            })
            $('#rect_stroke').bind('input propertychange', function () {
                canvas.getActiveObject().set('stroke', $('#rect_stroke').val())

                canvas.renderAll()
                recordState()
            })
            $('#rect_stroke_width').bind('input propertychange', function () {
                if ($('#rect_stroke_width').val() == '') {
                    $('#rect_stroke_width').val('0')
                } else {
                    $('#rect_stroke_width').val(parseInt($('#rect_stroke_width').val()))
                }
                canvas.getActiveObject().set('strokeWidth', parseInt($('#rect_stroke_width').val()))
                canvas.renderAll()
                recordState()
            })
            $('#rect_radius').bind('input propertychange', function () {
                if ($('#rect_radius').val() == '') {
                    $('#rect_radius').val('0')
                } else {
                    $('#rect_radius').val(parseInt($('#rect_radius').val()))
                }
                canvas.getActiveObject().set('rx', parseInt($('#rect_radius').val()))
                canvas.getActiveObject().set('ry', parseInt($('#rect_radius').val()))
                canvas.renderAll()
                recordState()
            })
            $('#circle_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('fill', $('#circle_color').val())

                canvas.renderAll()
                recordState()
            })
            $('#circle_stroke').bind('input propertychange', function () {
                canvas.getActiveObject().set('stroke', $('#circle_stroke').val())

                canvas.renderAll()
                recordState()
            })
            $('#circle_stroke_width').bind('input propertychange', function () {
                if ($('#circle_stroke_width').val() == '') {
                    $('#circle_stroke_width').val('0')
                } else {
                    $(this).val(parseInt($(this).val()))
                }
                canvas.getActiveObject().set('strokeWidth', parseInt($('#circle_stroke_width').val()))
                canvas.renderAll()
                recordState()
            })
            $('#counter_start').bind('input propertychange', function () {
                canvas.getActiveObject().set('text', $('#counter_start').val())
                let item = canvas.getActiveObject()
                let idx = getIndex(item)
                objs[idx - 1].start = $(this).val()
                canvas.renderAll()
                recordState()
            })
            $('#counter_add').bind('input propertychange', function () {
                let item = canvas.getActiveObject()
                let idx = getIndex(item)
                objs[idx - 1].add = $(this).val()
                canvas.renderAll()
                recordState()
            })
            $('#counter_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('fill', $('#counter_color').val())
                canvas.renderAll()
                recordState()
            })
            $("#count_size").bind('input propertychange', function () {
                let val = 1
                if (parseFloat($("#count_size").val())) {
                    val = parseFloat($("#count_size").val())
                    if (val < 1) {
                        val = 1
                    } else if (val > dpi) {
                        val = dpi
                    } else if (val%0.5!==0) {
                        val = Math.round(val*2)/2
                    }

                }
                $("#count_size").val(val)
                canvas.getActiveObject().set("fontSize", val*dpi/72);
                $("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
                $("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
                canvas.renderAll();
                recordState();
            })
            $('#line_color').bind('input propertychange', function () {
                canvas.getActiveObject().set('stroke', $('#line_color').val())
                canvas.renderAll()
                recordState()
            })
            $('#line_dist').bind('input propertychange', function () {
                if ($('#line_dist').val() == '') {
                    $('#line_dist').val(0)
                }
                canvas.getActiveObject().set('strokeDashArray', [parseInt($('#line_dist').val()), parseInt($('#line_dist').val())])
                canvas.renderAll()
                recordState()
            })
            $('#text_text').bind('input propertychange', function () {
                let val = $("#text_text").val().trim()
                canvas.getActiveObject().set("text", ` ${val} `);
                canvas.renderAll()
                updateList()
                recordState()
            })
            $('#barcode_val').bind('input propertychange', function () {
                let item = canvas.getActiveObject()
                let idx = getIndex(item)
                objs[idx - 1].val = $(this).val()
                JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })

                let barcode = document.getElementById('barcode')
                let bar = barcode.toDataURL('image/png')
                item.setSrc(bar, function (img) {
                    canvas.renderAll()
                    recordState()
                })
            })
            $("#barcode_show").click(function () {
                let item = canvas.getActiveObject();
                let idx = getIndex(canvas.getActiveObject());
                let val = $("#barcode_size").val()
                if ($(this).prop("checked")) {
                    objs[idx - 1].show = true;
                    val = 0
                } else {
                    objs[idx - 1].show = false;
                }
                JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: val*dpi/72, font: objs[idx - 1].font });
                let barcode = document.getElementById('barcode');
                let bar = barcode.toDataURL("image/png");
                item.setSrc(bar, function (img) {
                    canvas.renderAll();
                    recordState();
                });
            });
            $("#barcode_size").bind('input propertychange', function () {
                let item = canvas.getActiveObject();
                let idx = getIndex(item);
                let val = 1
                if (parseFloat($(this).val())) {
                    val = parseFloat($(this).val())
                    if (val < 1) {
                        val = 1
                    } else if (val > dpi) {
                        val = dpi
                    } else if (val%0.5!==0) {
                        val = Math.round(val*2)/2
                    }

                }
                $("#barcode_size").val(val)
                objs[idx - 1].fontSize = val*dpi/72;
                JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });

                let barcode = document.getElementById('barcode');
                let bar = barcode.toDataURL("image/png");
                item.setSrc(bar, function (img) {
                    canvas.renderAll();
                    recordState();
                });
            })
            $('#count_font_family').on('change', function () {
                canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
                canvas.renderAll()
                recordState()
            })
            $('#text_font_family').on('change', function () {
                canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
                canvas.renderAll()
                recordState()
            })
                
            $('#circle_text_font_family').on('change', function () {
                canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
                canvas.renderAll()
                recordState();
            });

            $('#language_select').on('change', function () {
                //语言选择
                langua_ge($(this).find('option:selected').val())
                s_lan = $(this).find('option:selected').val()
                localStorage.setItem('lang', s_lan)
            })
            $('#barcode_font_family').on('change', function () {
                let item = canvas.getActiveObject()
                let idx = getIndex(item)
                objs[idx - 1].font = $(this).find('option:selected').text()
                JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })

                let barcode = document.getElementById('barcode')
                let bar = barcode.toDataURL('image/png')
                item.setSrc(bar, function (img) {
                    canvas.renderAll()
                    recordState()
                })
                //recordState();
            })
            $('#out_text_font_family').on('change', function () {
                canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
                canvas.renderAll()
                recordState()
            })
            $('.obj_list').on('click', 'div', function () {
                let idx = objs.length - 1 - $(this).index()
                selectObj(idx)
            })
            $('#exceed').click(function () {
                let idx = getIndex(canvas.getActiveObject())
                if ($(this).prop('checked')) {
                    objs[idx - 1].exceed = true
                } else {
                    objs[idx - 1].exceed = false
                }
                recordState()
            })
            $('#autoWrap').click(function () {
                let idx = getIndex(canvas.getActiveObject())
                if ($(this).prop('checked')) {
                    objs[idx - 1].autoWrap = true
                } else {
                    objs[idx - 1].autoWrap = false
                }
                recordState()
            })
            $('#fixSize').click(function () {
                let idx = getIndex(canvas.getActiveObject())
                if ($(this).prop('checked')) {
                    objs[idx - 1].fixSize = true
                } else {
                    objs[idx - 1].fixSize = false
                }
                recordState()
            })
            $('#delete').click(function () {
                let actObjs = canvas.getActiveObjects()
                let allObjs = canvas.getObjects()
                let flag = 0
                for (let item of actObjs) {
                    if (item != allObjs[0]) {
                        let i = getIndex(item) //0是背景，所以从1开始，但objs不包含背景图片，故要-1
                        objs.splice(i - 1, 1)
                        canvas.remove(item)
                        flag = 1
                    }
                }
                updateList()
                canvas.discardActiveObject()
                if (flag == 1) {
                    recordState()
                    canvas.renderAll()
                }
                // let actObjs = canvas.getActiveObjects();
                // let allObjs = canvas.getObjects();
                // let flag = 0;
                // for( let item of actObjs){
                //     if ( item != allObjs[0]){
                //         let i = getIndex(item);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
                //         objs.splice(i-1,1);
                //         canvas.remove(item);
                //         flag = 1;
                //         updateList();
                //     }
                // }
                // selectObj(-1);
                // if(flag == 1){
                //     recordState();
                // }
            })

            //在关于我们获取版本号。
            // 注意：function 前面加了 async 关键字
            $("#about").click(async function () {
                
                // 1. 先异步获取版本号
                let version = "0.0.0"; // 默认值，防止获取失败
                try {
                    if (window.sysAPI && window.sysAPI.getAppVersion) {
                        const v = await window.sysAPI.getAppVersion();
                        version = "v" + v; // 拼接一个 v，变成 v2.3.017
                    }
                } catch (e) {
                    console.error("获取版本号失败", e);
                }

                // 2. 获取成功后再弹出窗口
                layer.open({
                    type: 1
                    , title: language_str("about")
                    , area: '450px;'
                    , id: 'LAY_layuipro'
                    , moveType: 1
                    , content: '<div style="padding-top:20px;padding-bottom:30px;background-color: #32363A; color: #fff; font-weight: 300;text-align:center;">' +
                            '<div style="width: 120px;margin: 0 auto;"><img style="width: 120px;" src="./public/images/IconA.png"></div>' +
                            '<div style="font-size:24px;">Soon Design</div>' +
                            // 【修改点】这里使用了刚才获取到的 version 变量
                            '<div style="font-size:14px;">' + language_str("vers") + ' ' + version + '</div>' +
                            '<div style="font-size:14px;">' + language_str("copyright") + '</div>' +
                            '</div>'
                });
            })
            $("#help").click(() => {
                    ipcRenderer.send('open-help-file');
            });
            function handleObjectSelected() {
                let select_obj = canvas.getActiveObject()
                if (!select_obj) {
                    $('#base_control').hide()
                    $('#line_control').hide()
                    $('#pic_control').hide()
                    $('#out_pic_control').hide()
                    $('#text_control').hide()
                    $("#circle_text_control").hide();
                    $('#out_text_control').hide()
                    $('#rect_control').hide()
                    $('#circle_control').hide()
                    $('#counter_control').hide()
                    $('#qrcode_Controll').hide()
                    $('#barcode_controll').hide()
                    $('#component_type').text(language_str('bg')) //comfirm
                    return
                }
                let i = getIndex(select_obj)
                if (i != 0) {
                    //不是背景
                    //console.log(objs);
                    --i
                    switch (objs[i].type) {
                        case 1:
                            //console.log("图片");
                            $('#component_type').text(language_str('img')) //"图片"
                            selectObject(select_obj, i)
                            selectPic(select_obj, i)
                            break
                        case 2:
                            //console.log("预留图片");

                            $('#component_type').text(language_str('simg')) //"合成图片"
                            selectObject(select_obj, i)
                            selectOutPic(select_obj, i)
                            break
                        case 3:
                            $('#component_type').text(language_str('text')) //"文字"
                            //console.log("文字");
                            selectObject(select_obj, i)
                            selectText(select_obj, i)
                            break
                        case 4:
                            //console.log("标签");

                            $('#component_type').text(language_str('stext')) //"合成文字"
                            selectObject(select_obj, i)
                            selectOutText(select_obj, i)
                            break
                        case 5:
                            //console.log("矩形");

                            $('#component_type').text(language_str('rect')) //"矩形"
                            selectObject(select_obj, i)
                            selectRect(select_obj, i)
                            break
                        case 6:
                            //console.log("圆形");

                            $('#component_type').text(language_str('circ')) //"圆形"
                            selectObject(select_obj, i)
                            selectCircle(select_obj, i)
                            break
                        case 7:
                            //console.log("直线");

                            $('#component_type').text(language_str('line')) //"直线"
                            selectObject(select_obj, i)
                            selectLine(select_obj, i)
                            break
                        case 8:
                            //console.log("二维码");

                            $('#component_type').text(language_str('qrc')) //"二维码"
                            selectObject(select_obj, i)
                            selectQrCode(select_obj, i)
                            break
                        case 9:
                            //console.log("条形码");

                            $('#component_type').text(language_str('barc')) //"条形码"
                            selectObject(select_obj, i)
                            selectBarCode(select_obj, i)
                            break
                        case 10:
                            //console.log("计数器");

                            $('#component_type').text(language_str('counter')) //"计数器"
                            selectObject(select_obj, i)
                            selectCounter(select_obj, i)
                            break
                        case 11:

                            $("#component_type").text(language_str("ctext"));//"圆形文字"
                            //console.log("圆形文字");
                            selectObject(select_obj, i);
                            selectCircleText(select_obj, i);
                            break;
                    }
                } else {
                    //背景，收起对象属性
                    $('#base_control').hide()
                    $('#line_control').hide()
                    $('#pic_control').hide()
                    $('#out_pic_control').hide()
                    $('#text_control').hide()
                    $("#circle_text_control").hide();
                    $('#out_text_control').hide()
                    $('#rect_control').hide()
                    $('#circle_control').hide()
                    $('#counter_control').hide()
                    $('#qrcode_Controll').hide()
                    $('#barcode_controll').hide()
                    $('#component_type').text(language_str('bg'))
                }
            }

            canvas1.on('mouse:move', (e) => {
                let width = canvas.getWidth()
                let height = canvas.getHeight()
                $('#posText').text(
                    'X: ' + (e.pointer.x - (width / 2 - (width / 2 - background_image.left) * zoom)).toFixed(0) + ' Y: ' + (e.pointer.y - (height / 2 - (height / 2 - background_image.top) * zoom)).toFixed(0)
                )
            })
            canvas1.on("object:moving", function (e) {
                let obj = canvas1.getActiveObject()
                let idx = getIndex(e.target, canvas1);
                // 添加边界检查，避免访问 undefined
                if (idx > 0 && idx <= objs1.length && objs1[idx - 1] && objs1[idx - 1].type && objs1[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
                    let pointer = {
                        x: obj.left,
                        y: obj.top
                    }
                    let distance = getDisdance(pointer.x, pointer.y, canvas1.width/2, canvas1.height/2)
                    let angleDeg = getDeg(pointer)
                    let flipped = pointer.y > canvas1.height/2 ? true : false
                    circle_text_diameter.setValue(distance*2-50);
                    obj.set("diameter", distance*2);
                    obj.set("angle", angleDeg);
                    obj.set("flipped", flipped);
                }
                updateControls();
            });
            // 监听键盘事件

            // 复制选中对象
            function copySelection() {
                const activeObjects = canvas.getActiveObjects();
                
                if (!activeObjects || activeObjects.length === 0) {
                    console.log("未选中任何对象");
                    layer.msg("未选中任何对象")
                    return;
                }

                // 存储原始对象用于克隆
                clipboardData.objects = activeObjects;
                console.log(activeObjects)
                console.log(`已复制 ${activeObjects.length} 个对象`);
            }

            // 粘贴对象
            function pasteFromClipboard() {
                if (!clipboardData.objects || clipboardData.objects.length === 0) {
                    console.log("剪贴板为空");
                    layer.msg("剪贴板为空")
                    return;
                }

                // 克隆所有对象
                fabric.util.enlivenObjects(
                    clipboardData.objects.map(obj => obj.toObject()),
                        clonedObjects => {
                        // 设置新位置（添加偏移）
                        clonedObjects.forEach((clone, index) => {
                            let idx = getIndex(clipboardData.objects[index])
                            console.log(clone)
                            clone.set({
                                left: clone.left + clipboardData.offset,
                                top: clone.top + clipboardData.offset,
                                evented: true
                            });
                            // 计算整体偏移
                            const groupOffset = clone.group;
                            if (groupOffset) {
                                clone.set({
                                    left: groupOffset.left + clipboard.offset,
                                    top: groupOffset.top + clipboard.offset
                                });
                            }
                            
                            // 添加到画布
                            canvas.add(clone);
                            let tobj = {...objs[idx-1]}
                            if (tobj.name) tobj.name = tobj.name + objs.length
                            objs.push(tobj);
                            canvas.renderAll();
                            updateList();
                            recordState();
                        });

                        // 选中粘贴的对象
                        canvas.discardActiveObject();
                        const sel = new fabric.ActiveSelection(clonedObjects, {
                            canvas: canvas
                        });
                        canvas.setActiveObject(sel);
                        canvas.requestRenderAll();
                        selectObj(objs.length - 1);
                        // 增加下次偏移
                        clipboardData.offset += 10;
                    }
                );
            }
            canvas1.on('object:scaling', function (event) {
                //if(objs[getIndex(event.target) - 1].type == 5 || objs[getIndex(event.target) - 1].type == 6){
                //    //canvas.getActiveObject().set("width", canvas.getActiveObject().get("width") * canvas.getActiveObject().get("scaleX"));
                //    //canvas.getActiveObject().set("height", canvas.getActiveObject().get("height") * canvas.getActiveObject().get("scaleY"));
                //    //canvas.getActiveObject().set("scaleX", 1);
                //    //canvas.getActiveObject().set("scaleY", 1);
                //    //console.log(canvas.getActiveObject().get("scaleX"));
                //    //canvas1.discardActiveObject();
                //    //canvas1.setActiveObject(event.target);
                //    //canvas1.renderAll();
                //    //updateControls();
                //}
            })
            canvas1.on('object:rotating', function (e) {
                updateControls()
            })
            canvas1.on('object:rotated', function (e) {
                console.log('object:rotated')
                recordState()
            })
            canvas1.on('object:added', function (e) {
                //console.log("object:added");
                //recordState();
                ////console.log(objs);
            })
            canvas1.on('mouse:down', (e) => {
                //单选
                let select_obj = canvas.getActiveObject()
                console.log(select_obj)
                let i = getIndex(select_obj)
                if (i != 0) {
                    //不是背景
                    //console.log(objs);
                    --i
                    switch (objs[i].type) {
                        case 1:
                            //console.log("图片");
                            $('#component_type').text(language_str('img')) //"图片"
                            selectObject(select_obj, i)
                            selectPic(select_obj, i)
                            break
                        case 2:
                            //console.log("预留图片");

                            $('#component_type').text(language_str('simg')) //"合成图片"
                            selectObject(select_obj, i)
                            selectOutPic(select_obj, i)
                            break
                        case 3:
                            $('#component_type').text(language_str('text')) //"文字"
                            //console.log("文字");
                            selectObject(select_obj, i)
                            selectText(select_obj, i)
                            break
                        case 4:
                            //console.log("标签");

                            $('#component_type').text(language_str('stext')) //"合成文字"
                            selectObject(select_obj, i)
                            selectOutText(select_obj, i)
                            break
                        case 5:
                            //console.log("矩形");

                            $('#component_type').text(language_str('rect')) //"矩形"
                            selectObject(select_obj, i)
                            selectRect(select_obj, i)
                            break
                        case 6:
                            //console.log("圆形");

                            $('#component_type').text(language_str('circ')) //"圆形"
                            selectObject(select_obj, i)
                            selectCircle(select_obj, i)
                            break
                        case 7:
                            //console.log("直线");

                            $('#component_type').text(language_str('line')) //"直线"
                            selectObject(select_obj, i)
                            selectLine(select_obj, i)
                            break
                        case 8:
                            //console.log("二维码");

                            $('#component_type').text(language_str('qrc')) //"二维码"
                            selectObject(select_obj, i)
                            selectQrCode(select_obj, i)
                            break
                        case 9:
                            //console.log("条形码");

                            $('#component_type').text(language_str('barc')) //"条形码"
                            selectObject(select_obj, i)
                            selectBarCode(select_obj, i)
                            break
                        case 10:
                            //console.log("计数器");

                            $('#component_type').text(language_str('counter')) //"计数器"
                            selectObject(select_obj, i)
                            selectCounter(select_obj, i)
                            break
                        case 11:

                            $("#component_type").text(language_str("ctext"));//"圆形文字"
                            //console.log("圆形文字");
                            selectObject(select_obj, i);
                            selectCircleText(select_obj, i);
                            break;
                    }
                    selectObj(i, true) //如果是点击画布中，则相应列表
                } else {
                    //背景，收起对象属性
                    $('#base_control').hide()
                    $('#line_control').hide()
                    $('#pic_control').hide()
                    $('#out_pic_control').hide()
                    $('#text_control').hide()
                    $("#circle_text_control").hide();
                    $('#out_text_control').hide()
                    $('#rect_control').hide()
                    $('#circle_control').hide()
                    $('#counter_control').hide()
                    $('#qrcode_Controll').hide()
                    $('#barcode_controll').hide()
                    selectObj(-1)
                    $('#component_type').text(language_str('bg'))
                }
            })
            canvas1.on('text:editing:entered', function () {
                _textEdit = true
            })
            canvas1.on('text:editing:exited', function () {
                _textEdit = false
            })
            canvas1.on('object:modified', function (event) {
                if (canvas1.getActiveObjects().length > 1) {
                    return
                }
                if (objs[getIndex(event.target) - 1].type == 3) {
                    event.target.fontSize *= event.target.scaleX
                    event.target.fontSize = event.target.fontSize.toFixed(0)
                    event.target.scaleX = 1
                    event.target.scaleY = 1
                    event.target._clearCache()
                    // $('#text_size').val(event.target.fontSize)
                    canvas1.renderAll()
                    updateControls()
                } else if (objs[getIndex(event.target) - 1].type == 4) {
                    event.target.fontSize *= event.target.scaleX
                    event.target.fontSize = event.target.fontSize.toFixed(0)
                    event.target.scaleX = 1
                    event.target.scaleY = 1
                    event.target._clearCache()
                    // $('#out_text_size').val(event.target.fontSize)
                    canvas1.renderAll()
                } else if (objs[getIndex(event.target) - 1].type == 10) {
                    event.target.fontSize *= event.target.scaleX
                    event.target.fontSize = event.target.fontSize.toFixed(0)
                    event.target.scaleX = 1
                    event.target.scaleY = 1
                    event.target._clearCache()
                    // $('#count_size').val(event.target.fontSize)
                    canvas1.renderAll()
                } else if (objs[getIndex(event.target) - 1].type == 5) {
                    canvas1.getActiveObject().set('width', canvas1.getActiveObject().get('width') * canvas1.getActiveObject().get('scaleX'))
                    canvas1.getActiveObject().set('height', canvas1.getActiveObject().get('height') * canvas1.getActiveObject().get('scaleY'))
                    canvas1.getActiveObject().set('scaleX', 1)
                    canvas1.getActiveObject().set('scaleY', 1)
                    updateControls()
                }
                recordState()
            })
            canvas1.on('mouse:up', (e) => {
                //HERE
                switch (addState) {
                    case 1:
                        addPic(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addPic').css('background-color', '')
                        break
                    case 2:
                        addOutPic(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addOutPic').css('background-color', '')
                        break
                    case 3:
                        addText(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addText').css('background-color', '')
                        break
                    case 4:
                        addOutText(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addOutText').css('background-color', '')
                        break
                    case 5:
                        addRect(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addRect').css('background-color', '')
                        break
                    case 6:
                        addCircle(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addCircle').css('background-color', '')
                        break
                    case 7:
                        addLine(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addLine').css('background-color', '')
                        break
                    case 8:
                        addQrCode(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addQrCode').css('background-color', '')
                        break
                    case 9:
                        addBarCode(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas1.renderAll()
                        $('#addBarCode').css('background-color', '')
                        break
                    case 10:
                        addCounter(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        $('#addCounter').css('background-color', '')
                        break
                    case 11:
                        addCircleText(e.pointer);
                        addState = 0;
                        background_image.hoverCursor = "default";
                        canvas1.renderAll();
                        $("#addCircleText").css("background-color", "");
                        break;
                }
            })
            canvas1.on('text:changed', (e) => {
                $('#text_text').val(e.target.get('text'))
            })
            canvas1.on('after:render', function () {
                if (is_bgi_add) {
                    var image = document.getElementById('source_front')
                    ctx1.drawImage(image, (canvas.width - $('#source_front').width()) / 2, (canvas.height - $('#source_front').height()) / 2, $('#source_front').width(), $('#source_front').height())

                    /*
                                      实际905 * 534
                                      1052 * 
                                  */
                }
            })
            canvas2.on('text:editing:entered', function () {
                _textEdit = true
            })
            canvas2.on('text:editing:exited', function () {
                _textEdit = false
            })
            canvas2.on('after:render', function () {
                if (is_bgi_add) {
                    var image = document.getElementById('source_back')
                    ctx2.drawImage(image, (canvas.width - $('#source_back').width()) / 2, (canvas1.height - $('#source_back').height()) / 2, $('#source_back').width(), $('#source_back').height())
                }
            })
            canvas2.on('mouse:move', (e) => {
                $('#posText').text('X: ' + (e.pointer.x - background_image.left).toFixed(0) + ' Y: ' + (e.pointer.y - background_image.top).toFixed(0))
            })
            canvas2.on("object:moving", function (e) {
                let obj = canvas2.getActiveObject()
                let idx = getIndex(e.target, canvas2);
                // 添加边界检查，避免访问 undefined
                if (idx > 0 && idx <= objs2.length && objs2[idx - 1] && objs2[idx - 1].type && objs2[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
                    let pointer = {
                        x: obj.left,
                        y: obj.top
                    }
                    let distance = getDisdance(pointer.x, pointer.y, canvas2.width/2, canvas2.height/2)
                    // 计算角度时需要使用 canvas2
                    let centerX = canvas2.width / 2;
                    let centerY = canvas2.height / 2;
                    let mouseX = pointer.x;
                    let mouseY = pointer.y;
                    let dx = mouseX - centerX;
                    let dy = mouseY - centerY;
                    let angleRad = Math.atan2(dy, dx);
                    let angleDeg = angleRad * (180/Math.PI);
                    if (angleDeg < 0) {
                        angleDeg += 360;
                    }
                    angleDeg += 90;
                    let flipped = pointer.y > canvas2.height/2 ? true : false
                    circle_text_diameter.setValue(distance*2-50);
                    obj.set("diameter", distance*2);
                    obj.set("angle", angleDeg);
                    obj.set("flipped", flipped);
                }
                updateControls();
            });
            canvas2.on('object:scaling', function (e) {
                updateControls()
            })
            canvas2.on('object:rotating', function (e) {
                updateControls()
            })
            canvas2.on('object:rotated', function (e) {
                console.log('object:rotated')
                recordState()
            })
            canvas2.on('object:added', function (e) {
                //console.log("object:added");
                //recordState();
                ////console.log(objs);
            })
            canvas2.on('mouse:down', (e) => {
                //单选
                let select_obj = canvas.getActiveObject()
                let i = getIndex(select_obj)
                if (i != 0) {
                    //不是背景
                    //console.log(objs);
                    --i
                    switch (objs[i].type) {
                        case 1:
                            //console.log("图片");
                            $('#component_type').text(language_str('img')) //"图片"
                            selectObject(select_obj, i)
                            selectPic(select_obj, i)
                            break
                        case 2:
                            //console.log("预留图片");

                            $('#component_type').text(language_str('simg')) //"合成图片"
                            selectObject(select_obj, i)
                            selectOutPic(select_obj, i)
                            break
                        case 3:
                            $('#component_type').text(language_str('text')) //"文字"
                            //console.log("文字");
                            selectObject(select_obj, i)
                            selectText(select_obj, i)
                            break
                        case 4:
                            //console.log("标签");

                            $('#component_type').text(language_str('stext')) //"合成文字"
                            selectObject(select_obj, i)
                            selectOutText(select_obj, i)
                            break
                        case 5:
                            //console.log("矩形");

                            $('#component_type').text(language_str('rect')) //"矩形"
                            selectObject(select_obj, i)
                            selectRect(select_obj, i)
                            break
                        case 6:
                            //console.log("圆形");

                            $('#component_type').text(language_str('circ')) //"圆形"
                            selectObject(select_obj, i)
                            selectCircle(select_obj, i)
                            break
                        case 7:
                            //console.log("直线");

                            $('#component_type').text(language_str('line')) //"直线"
                            selectObject(select_obj, i)
                            selectLine(select_obj, i)
                            break
                        case 8:
                            //console.log("二维码");

                            $('#component_type').text(language_str('qrc')) //"二维码"
                            selectObject(select_obj, i)
                            selectQrCode(select_obj, i)
                            break
                        case 9:
                            //console.log("条形码");

                            $('#component_type').text(language_str('barc')) //"条形码"
                            selectObject(select_obj, i)
                            selectBarCode(select_obj, i)
                            break
                        case 10:
                            //console.log("计数器");

                            $('#component_type').text(language_str('counter')) //"计数器"
                            selectObject(select_obj, i)
                            selectCounter(select_obj, i)
                            break
                        case 11:

                            $("#component_type").text(language_str("ctext"));//"圆形文字"
                            //console.log("圆形文字");
                            selectObject(select_obj, i);
                            selectCircleText(select_obj, i);
                            break;
                    }
                    selectObj(i, true) //如果是点击画布中，则相应列表
                } else {
                    //背景，收起对象属性
                    $('#base_control').hide()
                    $('#line_control').hide()
                    $('#pic_control').hide()
                    $('#out_pic_control').hide()
                    $('#text_control').hide()
                    $("#circle_text_control").hide();
                    $('#out_text_control').hide()
                    $('#rect_control').hide()
                    $('#circle_control').hide()
                    $('#qrcode_Controll').hide()
                    $('#barcode_controll').hide()
                    $('#counter_control').hide()
                    selectObj(-1)
                    $('#component_type').text(language_str('bg'))
                }
            })
            canvas2.on('object:modified', function (event) {
                if (canvas.getActiveObjects().length > 1) {
                    return
                }
                if (objs[getIndex(event.target) - 1].type == 3) {
                    event.target.fontSize *= event.target.scaleX
                    event.target.fontSize = event.target.fontSize.toFixed(0)
                    event.target.scaleX = 1
                    event.target.scaleY = 1
                    event.target._clearCache()
                    // $('#text_size').val(event.target.fontSize)
                    canvas2.renderAll()
                } else if (objs[getIndex(event.target) - 1].type == 4) {
                    event.target.fontSize *= event.target.scaleX
                    event.target.fontSize = event.target.fontSize.toFixed(0)
                    event.target.scaleX = 1
                    event.target.scaleY = 1
                    event.target._clearCache()
                    // $('#out_text_size').val(event.target.fontSize)
                    canvas2.renderAll()
                } else if (objs[getIndex(event.target) - 1].type == 10) {
                    event.target.fontSize *= event.target.scaleX
                    event.target.fontSize = event.target.fontSize.toFixed(0)
                    event.target.scaleX = 1
                    event.target.scaleY = 1
                    event.target._clearCache()
                    // $('#count_size').val(event.target.fontSize)
                    canvas2.renderAll()
                } else if (objs[getIndex(event.target) - 1].type == 5) {
                    canvas2.getActiveObject().set('width', canvas2.getActiveObject().get('width') * canvas2.getActiveObject().get('scaleX'))
                    canvas2.getActiveObject().set('height', canvas2.getActiveObject().get('height') * canvas2.getActiveObject().get('scaleY'))
                    canvas2.getActiveObject().set('scaleX', 1)
                    canvas2.getActiveObject().set('scaleY', 1)
                    updateControls()
                }
                console.log('object:modified')
                recordState()
            })
            canvas2.on('mouse:up', (e) => {
                //HERE
                switch (addState) {
                    case 1:
                        addPic(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addPic').css('background-color', '')
                        break
                    case 2:
                        addOutPic(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addOutPic').css('background-color', '')
                        break
                    case 3:
                        addText(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addText').css('background-color', '')
                        break
                    case 4:
                        addOutText(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addOutText').css('background-color', '')
                        break
                    case 5:
                        addRect(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addRect').css('background-color', '')
                        break
                    case 6:
                        addCircle(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addCircle').css('background-color', '')
                        break
                    case 7:
                        addLine(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addLine').css('background-color', '')
                        break
                    case 8:
                        addQrCode(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addQrCode').css('background-color', '')
                        break
                    case 9:
                        addBarCode(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addBarCode').css('background-color', '')
                        break
                    case 10:
                        addCounter(e.pointer)
                        addState = 0
                        background_image.hoverCursor = 'default'
                        canvas2.renderAll()
                        $('#addCounter').css('background-color', '')
                        break
                    case 11:
                        addCircleText(e.pointer);
                        addState = 0;
                        background_image.hoverCursor = "default";
                        canvas2.renderAll();
                        $("#addCircleText").css("background-color", "");
                        break;
                }
            })
            var circle_text_size = slider.render({
                elem: '#circle_text_size',
                min: 10,
                max: 120
                , change: function (value) {
                    canvas.getActiveObject().set("fontSize", value);
                    canvas.renderAll();
                }
            });
            var circle_text_diameter = slider.render({
                elem: '#circle_text_diameter',
                min: 50,
                max: 1100
                , change: function (value) {
                    canvas.getActiveObject().set("diameter", value);
                    canvas.renderAll();
                }
            });
            var out_pic_op = slider.render({
                elem: '#out_pic_op',
                change: function (value) {
                    console.log(value)
                    console.log(canvas.getActiveObject())
                    canvas.getActiveObject().set('opacity', (100 - value) / 100)
                    canvas.renderAll()
                }
            })
            var pic_op = slider.render({
                elem: '#pic_op',
                change: function (value) {
                    console.log(value)
                    console.log(canvas.getActiveObject())
                    canvas.getActiveObject().set('opacity', (100 - value) / 100)
                    canvas.renderAll()
                }
            })
            var rect_op = slider.render({
                elem: '#rect_op',
                change: function (value) {
                    console.log(value)
                    console.log(canvas.getActiveObject())
                    canvas.getActiveObject().set('opacity', (100 - value) / 100)
                    canvas.renderAll()
                }
            })
            var circle_op = slider.render({
                elem: '#circle_op',
                change: function (value) {
                    console.log(value)
                    console.log(canvas.getActiveObject())
                    canvas.getActiveObject().set('opacity', (100 - value) / 100)
                    canvas.renderAll()
                }
            })
            
            // 标尺绘制函数
            function initRulers() {
                const dpi = 300;
                const mmToPx = dpi / 25.4; // 1mm = 11.811px (300 DPI)
                const rulerHeight = 20;
                const rulerWidth = 20;
                
                // 获取实际画布的像素尺寸（px）
                // design2.html 的实际画布尺寸是 1012px x 648px
                const actualCanvasWidth = canvas1.width || 1012; // 实际画布宽度（px）
                const actualCanvasHeight = canvas1.height || 648; // 实际画布高度（px）
                
                // 获取显示区域的尺寸（包括 margin）
                const canvasDiv = $('#canvas-div');
                const canvasWrapper = $('.canvas-wrapper');
                // 使用 canvas-wrapper 的宽度，如果没有则使用 canvas_div 的宽度
                let canvasWidth = canvasWrapper.width();
                let canvasHeight = canvasWrapper.height();
                if (!canvasWidth || canvasWidth === 0) {
                    const canvas1Width = $('#canvas1').width() || canvasDiv.width() - 20;
                    canvasWidth = canvas1Width + 20; // 加上 margin-left: 20px
                }
                if (!canvasHeight || canvasHeight === 0) {
                    const canvas1Height = $('#canvas1').height() || canvasDiv.height() - 20;
                    canvasHeight = canvas1Height + 20; // 加上 margin-top: 20px
                }
                
                // 设置标尺尺寸（使用显示区域的尺寸）
                $('#ruler-h').attr('width', canvasWidth).attr('height', rulerHeight);
                $('#ruler-v').attr('width', rulerWidth).attr('height', canvasHeight);
                $('.ruler-horizontal').css('width', canvasWidth + 'px');
                $('.ruler-vertical').css('height', canvasHeight + 'px');
                
                // 绘制水平标尺
                function drawHorizontalRuler() {
                    const ctx = document.getElementById('ruler-h').getContext('2d');
                    ctx.clearRect(0, 0, canvasWidth, rulerHeight);
                    
                    // 背景
                    ctx.fillStyle = '#2C2C2C';
                    ctx.fillRect(0, 0, canvasWidth, rulerHeight);
                    
                    // 边框
                    ctx.strokeStyle = '#1E1E1E';
                    ctx.lineWidth = 1;
                    ctx.strokeRect(0, 0, canvasWidth, rulerHeight);
                    ctx.beginPath();
                    ctx.moveTo(0, rulerHeight - 1);
                    ctx.lineTo(canvasWidth, rulerHeight - 1);
                    ctx.stroke();
                    
                    // 刻度线
                    ctx.strokeStyle = '#888888';
                    ctx.fillStyle = '#CCCCCC';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'top';
                    
                    // 计算：实际画布尺寸（px）对应的物理尺寸（mm），然后根据显示区域的缩放比例计算
                    // 实际画布物理宽度 = actualCanvasWidth / dpi * 25.4 (mm)
                    // 显示区域宽度 = actualCanvasWidth * zoom (px)
                    // 所以：1mm 在显示区域中 = (actualCanvasWidth * zoom) / (actualCanvasWidth / dpi * 25.4) = zoom * dpi / 25.4
                    const pxPerMm = zoom * mmToPx; // 在显示区域中，1mm对应的像素数
                    const startX = 0;
                    const endX = canvasWidth;
                    
                    // 绘制主要刻度（每10mm）
                    for (let mm = 0; mm * pxPerMm <= endX; mm += 10) {
                        const x = startX + mm * pxPerMm;
                        if (x > endX) break;
                        
                        ctx.beginPath();
                        ctx.moveTo(x, 0);
                        ctx.lineTo(x, rulerHeight);
                        ctx.stroke();
                        
                        // 数字
                        ctx.fillText(mm + 'mm', x + 2, 2);
                    }
                    
                    // 绘制次要刻度（每1mm）
                    for (let mm = 0; mm * pxPerMm <= endX; mm += 1) {
                        const x = startX + mm * pxPerMm;
                        if (x > endX) break;
                        if (mm % 10 === 0) continue; // 跳过主要刻度
                        
                        ctx.beginPath();
                        ctx.moveTo(x, rulerHeight - 8);
                        ctx.lineTo(x, rulerHeight);
                        ctx.stroke();
                    }
                }
                
                // 绘制垂直标尺
                function drawVerticalRuler() {
                    const ctx = document.getElementById('ruler-v').getContext('2d');
                    ctx.clearRect(0, 0, rulerWidth, canvasHeight);
                    
                    // 背景
                    ctx.fillStyle = '#2C2C2C';
                    ctx.fillRect(0, 0, rulerWidth, canvasHeight);
                    
                    // 边框
                    ctx.strokeStyle = '#1E1E1E';
                    ctx.lineWidth = 1;
                    ctx.strokeRect(0, 0, rulerWidth, canvasHeight);
                    ctx.beginPath();
                    ctx.moveTo(rulerWidth - 1, 0);
                    ctx.lineTo(rulerWidth - 1, canvasHeight);
                    ctx.stroke();
                    
                    // 刻度线
                    ctx.strokeStyle = '#888888';
                    ctx.fillStyle = '#CCCCCC';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'top';
                    
                    // 计算：实际画布尺寸（px）对应的物理尺寸（mm），然后根据显示区域的缩放比例计算
                    const pxPerMm = zoom * mmToPx; // 在显示区域中，1mm对应的像素数
                    const startY = 0;
                    const endY = canvasHeight;
                    
                    // 绘制主要刻度（每10mm）
                    for (let mm = 0; mm * pxPerMm <= endY; mm += 10) {
                        const y = startY + mm * pxPerMm;
                        if (y > endY) break;
                        
                        ctx.beginPath();
                        ctx.moveTo(0, y);
                        ctx.lineTo(rulerWidth, y);
                        ctx.stroke();
                        
                        // 数字（旋转90度）
                        ctx.save();
                        ctx.translate(2, y + 8);
                        ctx.rotate(-Math.PI / 2);
                        ctx.fillText(mm + 'mm', 0, 0);
                        ctx.restore();
                    }
                    
                    // 绘制次要刻度（每1mm）
                    for (let mm = 0; mm * pxPerMm <= endY; mm += 1) {
                        const y = startY + mm * pxPerMm;
                        if (y > endY) break;
                        if (mm % 10 === 0) continue; // 跳过主要刻度
                        
                        ctx.beginPath();
                        ctx.moveTo(rulerWidth - 8, y);
                        ctx.lineTo(rulerWidth, y);
                        ctx.stroke();
                    }
                }
                
                // 初始绘制
                drawHorizontalRuler();
                drawVerticalRuler();
                
                // 监听窗口大小变化
                $(window).on('resize', function() {
                    setTimeout(function() {
                        const canvasWrapper = $('.canvas-wrapper');
                        let newWidth = canvasWrapper.width();
                        let newHeight = canvasWrapper.height();
                        if (!newWidth || newWidth === 0) {
                            const canvas1Width = $('#canvas1').width() || $('#canvas-div').width() - 20;
                            newWidth = canvas1Width + 20; // 加上 margin-left: 20px
                        }
                        if (!newHeight || newHeight === 0) {
                            const canvas1Height = $('#canvas1').height() || $('#canvas-div').height() - 20;
                            newHeight = canvas1Height + 20; // 加上 margin-top: 20px
                        }
                        if (newWidth !== canvasWidth || newHeight !== canvasHeight) {
                            canvasWidth = newWidth;
                            canvasHeight = newHeight;
                            $('#ruler-h').attr('width', newWidth);
                            $('#ruler-v').attr('height', newHeight);
                            $('.ruler-horizontal').css('width', newWidth + 'px');
                            $('.ruler-vertical').css('height', newHeight + 'px');
                            drawHorizontalRuler();
                            drawVerticalRuler();
                        }
                    }, 100);
                });
                
                // 监听画布缩放变化
                canvas1.on('after:render', function() {
                    drawHorizontalRuler();
                    drawVerticalRuler();
                });
                canvas2.on('after:render', function() {
                    drawHorizontalRuler();
                    drawVerticalRuler();
                });
            }
        })