master

分支 (1)

管理

管理

master

my_keep
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keep运动截图生成</title>
    <link rel="icon" href="./favicon.ico">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="styles.css"> <!-- 引用外部CSS文件 -->
</head>

<body id="body">
    <div id="main-div">
        <div id="new-Img" class="new-img">
            <div class="bgimgwrap" id="bgimgwrap">
                <img src="" class="innerbgimg" id="bg-img" />
            </div>
            <img src="" id="gui-img" />
            <div class="portrait-wrap" id="portrait-wrap">
                <img class="portrait" id="portrait" src="" />
            </div>
            <div class="weather-imgwrap">
                <img src="" class="weather" id="weather" src="" />
            </div>
            <span class="username" id="username">UserName</span>
            <span class="keep-title" id="keep-title">户外跑步</span>
            <span class="mile"><span id="mile" class="mile-data">0.00</span><span class="gongli">公里</span></span>
            <span class="datetime date" id="date">0000/00/00</span>
            <span class="datetime time" id="time">00:00</span>
            <span class="env temperature" id="temperature">00</span>
            <span class="env humidity" id="humidity">00</span>
            <span class="speed-time speed" id="speed">00'00"</span>
            <span class="speed-time cost-time" id="cost-time">00:00:00</span>
            <span class="speed-time calorie" id="calorie">0</span>
        </div>
        <div class="set-data">
            <h4>数据设置</h4>
            <ul class="setDataList">
                <hr />
                <li>
                    <label>用户名：</label>
                    <input id="inpt_username" onchange="setData()" type="text" class="username-inp">
                </li>
                <li>
                    <label>头像：</label>
                    <button onclick="inpt_portrait_onClick()" class="inpt-btn">选择图片</button>
                    <input style="display:none;" type="file" accept="image/*" id="inpt_portrait"
                        onchange="portrait_inpt()" />
                    <button onclick="init_portrait()" class="init-btn">恢复默认</button>
                </li>
                <li>
                    <label>标题：</label>
                    <span>keep•</span>
                    <input id="inpt_keep_title" onchange="setData()" type="text" class="keep-title-inp">
                </li>
                <li>
                    <button onclick="storeToIndexedDB(tmp_portrait_src)" class="cookies-btn">永久保存信息</button>
                    <div id="messageBox">
                        用户名、头像、标题已永久保存。</br>
                        （你不换浏览器的话）
                    </div>
                </li>
                <hr />
                <li>
                    <label>公里：</label>
                    <input type="number" min="0" max="20" id="inpt_miles" onchange="setData()" class="mile2-inp">
                </li>
                <li>
                    <label>配速：</label>
                    <input id="inpt_speeds" onchange="setData()" type="text">
                </li>
                <li>
                    <label>时间：</label>
                    <input id="inpt_year" onchange="setData()" type="text" class="time-inp year-inp">
                    <span>年</span>
                    <input id="inpt_month" onchange="setData()" type="text" class="time-inp">
                    <span>月</span>
                    <input id="inpt_day" onchange="setData()" type="text" class="time-inp">
                    <span>日</span>
                    <input id="inpt_hour" onchange="setData()" type="text" class="time-inp">
                    <span>时</span>
                    <input id="inpt_min" onchange="setData()" type="text" class="time-inp">
                    <span>分</span>
                </li>
                <li>
                    <label>天气：</label>
                    <select onchange="weather_Select_onChange()" id="weather_Select">
                        <option value="images/weather1.png">晴</option>
                        <option value="images/weather2.png">多云</option>
                        <option value="images/weather3.png">阴天</option>
                    </select>
                </li>
                <li>
                    <label>温度：</label>
                    <input id="inpt_temperature" onchange="setData()" type="text">
                </li>
                <li>
                    <label>湿度：</label>
                    <input id="inpt_humidity" onchange="setData()" type="text">
                </li>
                <hr />
                <li>
                    <label>背景：</label>
                    <select onchange="default_bgImgSelect_onChange()" id="default_bgImgSelect">
                        <option value="guiji_Select_1">南体育场</option>
                        <option value="guiji_Select_2">军工操场</option>
                        <option value="guiji_Select_3">北体育场</option>
                    </select>
                </li>
                <li>
                    <label>自定义背景：</label>
                    <button onclick="inpt_bgimg_onClick()">选择图片</button>
                    <input style="display:none;" type="file" accept="image/*" id="inpt_bgimg" onchange="bgimg_inpt()" />
                    <button onclick="init_bgimg()" class="init-btn">恢复默认</button>
                </li>
                <li>
                    <label>预设轨迹：</label>
                    <select onchange="guijiSelect_onChange()" id="guiji_Select_1" class="guijiSelect">
                        <option value="['images/bg1_1.png', 'images/bg1_empty2.png']">预设1</option>
                        <option value="['images/bg1_2.png', 'images/bg1_empty2.png']">预设2</option>
                        <option value="['images/bg1_3.png', 'images/bg1_empty2.png']">预设3</option>
                        <option value="['images/bg1_4.png', 'images/bg1_empty2.png']">预设4</option>
                        <option value="['images/bg1_5.png', 'images/bg1_empty2.png']">预设5</option>
                        <option value="['images/bg1_empty2.png', 'images/bg1_empty2.png']">空</option>
                    </select>
                    <select onchange="guijiSelect_onChange()" id="guiji_Select_2" class="guijiSelect">
                        <option value="['images/bg2_empty.png', 'images/bg2_empty.png']">空</option>
                    </select>
                    <select onchange="guijiSelect_onChange()" id="guiji_Select_3" class="guijiSelect">
                        <option value="['images/bg3_empty.png', 'images/bg3_empty.png']">空</option>
                    </select>
                </li>
                <li>
                    <label>绘制轨迹：</label>
                    <button onclick="inpt_drawbtn_onClick()">点击绘制</button>
                </li>
                <li>
                    <label>路径变色：</label>
                    <input type="checkbox" id="inpt_colorchange_checkbox"
                        onchange="inpt_colorchange_checkbox_onchange()" /><span>启用</span>
                </li>
                <li id="bs_prop_inpt_wrap">
                    <label>变色概率：</label>
                    <input id="inpt_bs_prob" onchange="setData()" type="text">
                </li>
                <li id="inpt_bs_range_wrap">
                    <label>变色步长范围：</label>
                    <input id="inpt_bs_range_min" onchange="setData()" type="text">
                    <span>~</span>
                    <input id="inpt_bs_range_max" onchange="setData()" type="text">
                </li>
                <hr />
                <li>
                    <label>图片宽度：</label>
                    <input id="inpt_savePic_width" onchange="setData()" type="text">
                </li>
                <li>
                    <button onclick="Download(Download1)" class="large-btn">保存图片</button>
                </li>
                <li>
                    <button onclick="Download(Download2)">查看图片</button>
                </li>
                <li>
                    <button onclick="Download(Download3)">保存图片</button>
                    <span>(备用方案)</span>
                </li>
                <li>
                    <button onclick="Download(Download4)">保存图片</button>
                    <span>(备用方案2, 请手动重命名下载文件)</span>
                </li>
            </ul>
            <div id="drawpic_overlay">
                <div class="drawpic_popup">
                    <div>
                        <h5>绘制轨迹</h5>
                    </div>
                    <div id="drawpic_canvas_wrap2">
                        <div id="drawpic_canvas_wrap">
                            <canvas id="drawpic_canvas" width="1" height="1"></canvas>
                        </div>
                    </div>
                    <div>
                        <button onclick="drawpic_hidebtn_onClick()">取消</button>
                        <button onclick="drawpic_initbtn_onClick()" class="init-btn">重置</button>
                        <button onclick="drawpic_yesbtn_onClick()">确定</button>
                    </div>
                    <canvas id="buffer_canvas" style="display: none;"></canvas>
                </div>
            </div>
        </div>
        <div class="warning-wrap">
            <ul class="setDataList">
                <li>
                    <div class="warning">
                        <span>
                            <b>免责声明: 页面仅供学习交流，<br />请勿用于其他用途，<br />否则后果作者概不负责！</b>
                        </span>
                    </div>
                    <div class="explanation">
                        <span>1. 修改输入框中的内容即可更改截图中出现的各项数值.</span>
                        <br />
                        <span>2. 点击"保存图片"即可自动生成截图并保存到本地.</span>
                        <br />
                        <br />
                        <span>keep运动截图生成&ensp;v3.1</span>
                        <br />
                        <span>项目历程：<a href="https://gitee.com/jimaske/njupt-keep" target="_blank">@jimaske</a>--&gt<a
                                href="https://gitee.com/fyhb/keep" target="_blank">@fyhb</a>--&gt<a
                                href="https://gitee.com/joytion/my_keep/" target="_blank">@joytion</a></span>
                    </div>
                </li>
                <br />
                <li>
                    <div class="update">
                        <span>更新：</span>
                        <br />
                        <span>1、调用api获取实时温度湿度，解放双手。</span>
                        <br />
                        <br />
                        <span>2、使用IndexedDB实现永久保存用户名、标题以及头像。</span>
                        <br />
                        <br />
                        <div class="explanation">
                            <span>计划：</span>
                            <span>1、尝试随机生成路径</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script src="./html2canvas.min.js"></script>

    <script src="amapHelper.js"></script>
    <script src="indexedDB.js"></script>
    <script type="text/javascript">
        var miles, speeds, username, keep_title, date_year, date_month, date_day, time_hour, time_min, temperature, humidity, savePic_width;
        var now_location = '南岗区'
        var bgSRC = "", ptSRC = "";
        var display_guijiSelect_id;
        var default_bgSRC = [];
        var use_default_bg = true;

        var canvas, ctx, drawdown, convasData, current_img_width, current_img_height, draw_suofang, buffer_canvas;
        var bs_range_min, bs_range_max;
        var bs, bs_prob, is_bs, bs_max, bs_range, bs_now, bs_start_x, bs_start_y, bs_end_x, bs_end_y, bs_pres_x, bs_pres_y, bs_pres_color;
        var draw_start_x, draw_start_y, draw_end_x, draw_end_y;

        var empty_bg_src = "images/empty_bg.png" + "?_=" + new Date().getTime();
        var gui_img_src = "images/1.png" + "?_=" + new Date().getTime();
        var default_portrait_scr = "images/default_portrait.png" + "?_=" + new Date().getTime();
        var start_sign_src = "images/start.png" + "?_=" + new Date().getTime();
        var end_sign_src = "images/end.png" + "?_=" + new Date().getTime();

        var frameWidth = 300;
        var frameHeight = 600;

        var bgWidth = 360;
        var bgHeight = 719;

        let ptWidth = 40;
        let ptHeight = 40;

        function fract(num) {
            return num - Math.trunc(num);
        }
        function addZero(i) {
            if (i < 10) {
                i = "0" + String(i);
                return i;
            }
            return String(i);
        }

        //将输入框的输入内容存储到对应的变量中
        function setData() {
            username = document.getElementById("inpt_username").value;
            keep_title = document.getElementById("inpt_keep_title").value;
            miles = parseFloat(document.getElementById("inpt_miles").value);
            speeds = parseFloat(document.getElementById("inpt_speeds").value);
            date_year = parseInt(document.getElementById("inpt_year").value);
            date_month = parseInt(document.getElementById("inpt_month").value);
            date_day = parseInt(document.getElementById("inpt_day").value);
            time_hour = parseInt(document.getElementById("inpt_hour").value);
            time_min = parseInt(document.getElementById("inpt_min").value);
            temperature = parseInt(document.getElementById("inpt_temperature").value);
            humidity = parseInt(document.getElementById("inpt_humidity").value);
            bs_prob = parseFloat(document.getElementById("inpt_bs_prob").value);
            bs_range_min = parseInt(document.getElementById("inpt_bs_range_min").value);
            bs_range_max = parseInt(document.getElementById("inpt_bs_range_max").value);
            savePic_width = parseInt(document.getElementById("inpt_savePic_width").value);
            render();
        }

        //初始化输入框, 将变量的内容放到输入框中
        function initInputData() {
            document.getElementById("inpt_username").value = username;
            document.getElementById("inpt_keep_title").value = keep_title;
            document.getElementById("inpt_miles").value = miles;
            document.getElementById("inpt_speeds").value = speeds;
            document.getElementById("inpt_year").value = date_year;
            document.getElementById("inpt_month").value = date_month;
            document.getElementById("inpt_day").value = date_day;
            document.getElementById("inpt_hour").value = time_hour;
            document.getElementById("inpt_min").value = time_min;
            document.getElementById("inpt_temperature").value = temperature;
            document.getElementById("inpt_humidity").value = humidity;
            document.getElementById("inpt_bs_prob").value = bs_prob;
            document.getElementById("inpt_bs_range_min").value = bs_range_min;
            document.getElementById("inpt_bs_range_max").value = bs_range_max;
            document.getElementById("inpt_savePic_width").value = savePic_width;
            document.getElementById("gui-img").src = gui_img_src;
            // document.getElementById("portrait").src = default_portrait_scr;

            // 从cookies中检索值
            // const retrievedUsername = getCookie("username");
            // const retrievedKeepTitle = getCookie("keep_title");
            // const retrievedPortraitSrc = getCookie("portrait_src");

            // 填充值到输入框
            // if (retrievedUsername) {
            //     document.getElementById("inpt_username").value = retrievedUsername;
            // }

            // if (retrievedKeepTitle) {
            //     document.getElementById("inpt_keep_title").value = retrievedKeepTitle;
            // }

            // if (retrievedPortraitSrc) {
            //     document.getElementById("portrait").src = retrievedPortraitSrc;
            // }
            let bgimg_select = document.getElementById("default_bgImgSelect");
            for (let i = 0; i < bgimg_select.options.length; i++) {
                let guijiSelect = document.getElementById(bgimg_select.options[i].value);
                for (let j = 0; j < guijiSelect.options.length; j++) {
                    guijiSelect.options[j].value = '[\"' + String(eval(guijiSelect.options[j].value)[0] + "?_=" + new Date().getTime()) + '\", \"' + String(eval(guijiSelect.options[j].value)[1] + "?_=" + new Date().getTime()) + '\"]';
                }
            }
            let weather_select = document.getElementById("weather_Select");
            for (let i = 0; i < weather_select.options.length; i++) {
                weather_select.options[i].value = weather_select.options[i].value + "?_=" + new Date().getTime();
            }
        }


        //渲染, 将输入的内容放到图片的对应位置
        function render() {
            let miles_int = Math.floor(miles);
            let miles_dec = Math.round((miles - miles_int) * 100);
            let speeds_int = Math.floor(speeds);
            let speeds_dec = Math.round((speeds - speeds_int) * 100);
            let times = (speeds_dec / 60 + speeds_int) * miles;
            let timeInc = Math.trunc(times);
            let cost_hour = Math.floor(timeInc / 60);
            let cost_min = timeInc % 60;
            let cost_sec = Math.round((times - timeInc) * 60);
            let calorie = Math.round(69 * miles * 1.036);
            document.getElementById("mile").innerHTML = String(miles_int) + "." + String(addZero(miles_dec));
            document.getElementById("date").innerHTML = String(date_year) + "/" + addZero(date_month) + "/" + addZero(date_day);
            document.getElementById("time").innerHTML = addZero(time_hour) + ":" + addZero(time_min);
            document.getElementById("temperature").innerHTML = String(temperature) + "℃";
            document.getElementById("humidity").innerHTML = String(humidity) + "%";
            document.getElementById("username").innerHTML = username;
            document.getElementById("keep-title").innerHTML = "Keep&nbsp;•&nbsp;" + keep_title;

            document.getElementById("speed").innerHTML = String(addZero(speeds_int)) + "'" + String(addZero(speeds_dec)) + '"';
            document.getElementById("cost-time").innerHTML = String(addZero(cost_hour)) + ":" + String(addZero(cost_min)) + ":" + String(addZero(cost_sec));
            document.getElementById("calorie").innerHTML = addZero(calorie);
        }

        //选择预设图片
        function default_bgImgSelect_onChange() {
            if (display_guijiSelect_id) {
                document.getElementById(display_guijiSelect_id).style.display = "none";
            }
            display_guijiSelect_id = document.getElementById("default_bgImgSelect").value;
            document.getElementById(display_guijiSelect_id).style.display = "inline"
            default_bgSRC = eval(document.getElementById(display_guijiSelect_id).value);
            setbgImg(default_bgSRC[0]);
        }
        function guijiSelect_onChange() {
            default_bgSRC = eval(document.getElementById(display_guijiSelect_id).value);
            setbgImg(default_bgSRC[0]);
        }
        //选择天气
        function weather_Select_onChange() {
            document.getElementById("weather").src = document.getElementById("weather_Select").value;
        }

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(',');
            //注意base64的最后面中括号和引号是不转译的
            var _arr = arr[1].substring(0, arr[1].length - 2);
            var mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(_arr),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }

        //按下更改背景图片的按钮时调用的方法
        function inpt_bgimg_onClick() {
            document.getElementById("inpt_bgimg").click();
        }
        //按下更改头像的按钮时调用的方法
        function inpt_portrait_onClick() {
            document.getElementById("inpt_portrait").click();
        }
        //选择并设置背景图片
        function bgimg_inpt() {
            var bgimg_oFReader = new FileReader();
            bgimg_oFReader.onload = function (event) {
                var bgimg_osrc = event.target.result;
                if (bgSRC) {
                    URL.revokeObjectURL(bgSRC);
                }
                bgSRC = URL.createObjectURL(dataURLtoBlob(bgimg_osrc));
                let IMG = new Image();
                IMG.src = bgSRC;
                setbgImg(bgSRC);
                use_default_bg = false;
            }
            var bgimg_ofile = document.getElementById("inpt_bgimg").files[0];
            bgimg_oFReader.readAsDataURL(bgimg_ofile);
        }

        function setbgImg(src) {
            document.getElementById("bg-img").src = src;
            document.getElementById("bg-img").onload = function () {
                getNaturalSize();
            }
            let IMG = new Image();
            IMG.src = src;
            IMG.onload = function () {
                getNaturalSize();
                if (parseInt(IMG.width) / parseInt(IMG.height) > 0.5010) {
                    document.getElementById("bg-img").style.height = String(bgHeight) + "px";
                    document.getElementById("bg-img").style.width = String(parseInt(IMG.width) * bgHeight / parseInt(IMG.height)) + "px";
                } else {
                    document.getElementById("bg-img").style.height = String(parseInt(IMG.height) * bgWidth / parseInt(IMG.width)) + "px";
                    document.getElementById("bg-img").style.width = String(bgWidth) + "px";
                }
            }
        }
        let tmp_portrait_src;

        //选择并设置头像
        function portrait_inpt() {
            var portrait_oFReader = new FileReader();
            portrait_oFReader.onload = function (event) {
                var portrait_osrc = event.target.result;
                tmp_portrait_src = portrait_osrc;
                // 保存到IndexedDB
                // storeData({
                //     id: "user_portrait",
                //     portrait_data: portrait_osrc
                // });

                if (ptSRC) {
                    URL.revokeObjectURL(ptSRC)
                }
                ptSRC = URL.createObjectURL(dataURLtoBlob(portrait_osrc));
                document.getElementById("portrait").src = ptSRC;
                let IMG = new Image();
                IMG.src = ptSRC;
                IMG.onload = function () {
                    if (parseInt(IMG.width) / parseInt(IMG.height) > 1) {
                        document.getElementById("portrait").style.height = String(ptHeight) + "px";
                        document.getElementById("portrait").style.width = String(parseInt(IMG.width) * ptHeight / parseInt(IMG.height)) + "px";
                    } else {
                        document.getElementById("portrait").style.height = String(parseInt(IMG.height) * ptWidth / parseInt(IMG.width)) + "px";
                        document.getElementById("portrait").style.width = String(ptWidth) + "px";
                    }
                }
            }
            var portrait_ofile = document.getElementById("inpt_portrait").files[0];
            portrait_oFReader.readAsDataURL(portrait_ofile);
        }

        //恢复默认背景图片
        function init_bgimg() {
            setbgImg(default_bgSRC[0]);
            use_default_bg = true;
        }
        //恢复默认头像
        function init_portrait() {
            document.getElementById("portrait").style.height = ptHeight;
            document.getElementById("portrait").style.width = ptHeight;
            document.getElementById("portrait").src = default_portrait_scr;
        }

        /*----- 以下为[绘制自定义轨迹]用到的方法 -----*/
        function inpt_drawbtn_onClick() {
            if (current_img_width / current_img_height > 0.5010) {
                draw_suofang = current_img_height / frameHeight;
                document.getElementById("drawpic_canvas_wrap").innerHTML = '<canvas id="drawpic_canvas" width="' + String(current_img_width) + '" height="' + String(current_img_height) + '" style="width: ' + String(Math.floor(current_img_width * (frameHeight / current_img_height))) + 'px; height: ' + String(frameHeight) + 'px;"></canvas>';
            } else {
                draw_suofang = current_img_width / frameWidth;
                document.getElementById("drawpic_canvas_wrap").innerHTML = '<canvas id="drawpic_canvas" width="' + String(current_img_width) + '" height="' + String(current_img_height) + '" style="width: ' + String(frameWidth) + 'px; height: ' + String(Math.floor(current_img_height * (frameWidth / current_img_width))) + 'px;"></canvas>';
            }
            document.getElementById("drawpic_overlay").style.display = "flex";
            document.getElementById("body").style.overflow = "hidden";
            document.getElementById("body").style.height = "100%";
            document.body.addEventListener('touchmove', self.welcomeShowedListener, false);
            start_draw();
        }
        function inpt_colorchange_checkbox_onchange() {
            bs = document.getElementById("inpt_colorchange_checkbox").checked;

            if (bs) {
                document.getElementById("bs_prop_inpt_wrap").style.display = "list-item";
                document.getElementById("inpt_bs_range_wrap").style.display = "list-item";
            } else {
                document.getElementById("bs_prop_inpt_wrap").style.display = "none";
                document.getElementById("inpt_bs_range_wrap").style.display = "none";
            }
        }
        function start_draw() {
            let drawingActions = [];
            if (bs) {
                handlePointerDown = (e) => {
                    ctx.beginPath();
                    ctx.lineJoin = "round";
                    ctx.lineCap = "round";
                    ctx.lineWidth = String(Math.floor(5 * draw_suofang));
                    bs_pres_color = new Array(38, 201, 154);
                    if (drawdown == false) {
                        draw_start_x = e.offsetX * draw_suofang;
                        draw_start_y = e.offsetY * draw_suofang;
                        ctx.strokeStyle = "rgb(38, 201, 154)".toString();
                    }
                    drawdown = true;
                    bs_pres_x = e.offsetX * draw_suofang;
                    bs_pres_y = e.offsetY * draw_suofang;
                    ctx.moveTo(e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                    // 保存操作
                    drawingActions.push({
                        action: "down",
                        x: e.offsetX,
                        y: e.offsetY,
                        //... 其他需要保存的参数 ...
                    });
                }
                handlePointerMove = (e) => {
                    if (drawdown) {
                        if (is_bs) {
                            if (bs_now >= bs_range) {
                                is_bs = false;
                                ctx.beginPath();
                                ctx.lineJoin = "round";
                                ctx.lineCap = "round";
                                ctx.lineWidth = String(Math.floor(5 * draw_suofang));
                                ctx.moveTo(bs_pres_x, bs_pres_y);
                                ctx.lineTo(e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                                // 保存操作
                                drawingActions.push({
                                    action: "down",
                                    x: e.offsetX,
                                    y: e.offsetY,
                                    //... 其他需要保存的参数 ...
                                });
                                var gradient = ctx.createLinearGradient(bs_pres_x, bs_pres_y, e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                                gradient.addColorStop(0, "rgb(" + String(bs_pres_color[0]) + "," + String(bs_pres_color[1]) + " ," + String(bs_pres_color[2]) + " )");
                                gradient.addColorStop(1, "rgb(38, 201, 154)");
                                ctx.strokeStyle = gradient;
                                ctx.stroke();
                                bs_pres_color = new Array(38, 201, 154);
                            }
                        }
                        if (Math.random() < bs_prob && is_bs == false) {
                            is_bs = true;
                            rg = 2 * Math.random() - 1;
                            if (rg > 0) {
                                bs_max = new Array(Math.floor(193 * Math.pow(Math.abs(rg), 0.5)), Math.floor(-110 * Math.pow(Math.abs(rg), 0.5)), Math.floor(-66 * Math.pow(Math.abs(rg), 0.5)));
                            } else {
                                bs_max = new Array(Math.floor(27 * Math.pow(Math.abs(rg), 0.5)), Math.floor(16 * Math.pow(Math.abs(rg), 0.5)), Math.floor(94 * Math.pow(Math.abs(rg), 0.5)));
                            }
                            bs_range = bs_range_min + Math.floor((bs_range_max - bs_range_min) * Math.random());
                            bs_now = 0;
                        }
                        if (is_bs) {
                            ctx.beginPath();
                            ctx.lineJoin = "round";
                            ctx.lineCap = "round";
                            ctx.lineWidth = String(Math.floor(5 * draw_suofang));
                            ctx.moveTo(bs_pres_x, bs_pres_y);
                            var bs_now_color = new Array(Math.floor(38 + (4 * bs_max[0] * bs_now / bs_range) * (1 - bs_now / bs_range)), Math.floor(201 + (4 * bs_max[1] * bs_now / bs_range) * (1 - bs_now / bs_range)), Math.floor(154 + (4 * bs_max[2] * bs_now / bs_range) * (1 - bs_now / bs_range)))
                            var gradient = ctx.createLinearGradient(bs_pres_x, bs_pres_y, e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                            gradient.addColorStop(0, "rgb(" + String(bs_pres_color[0]) + "," + String(bs_pres_color[1]) + " ," + String(bs_pres_color[2]) + " )");
                            gradient.addColorStop(1, "rgb(" + String(bs_now_color[0]) + "," + String(bs_now_color[1]) + " ," + String(bs_now_color[2]) + " )");
                            ctx.strokeStyle = gradient;
                            ctx.lineTo(e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                            // 保存操作
                            drawingActions.push({
                                action: "down",
                                x: e.offsetX,
                                y: e.offsetY,
                                //... 其他需要保存的参数 ...
                            });
                            ctx.stroke();
                            bs_pres_color = bs_now_color;
                            bs_now += 1
                        } else {
                            ctx.lineTo(e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                            ctx.strokeStyle = "rgb(38, 201, 154)".toString();
                            ctx.stroke();
                        }
                        bs_pres_x = e.offsetX * draw_suofang;
                        bs_pres_y = e.offsetY * draw_suofang;
                    }
                }
                handlePointerUp = (e) => {
                    draw_end_x = e.offsetX * draw_suofang;
                    draw_end_y = e.offsetY * draw_suofang;
                    // 保存操作
                    drawingActions.push({
                        action: "down",
                        x: e.offsetX,
                        y: e.offsetY,
                        //... 其他需要保存的参数 ...
                    });
                    var startIMG = new Image();
                    var endIMG = new Image();
                    startIMG.src = start_sign_src;
                    endIMG.src = end_sign_src;
                    startIMG.onload = function () {
                        ctx.drawImage(startIMG, Math.floor(draw_start_x - 15 * draw_suofang), Math.floor(draw_start_y - 22 * draw_suofang), Math.floor(30 * draw_suofang), Math.floor(30 * draw_suofang));
                    }
                    endIMG.onload = function () {
                        ctx.drawImage(endIMG, Math.floor(draw_end_x - 15 * draw_suofang), Math.floor(draw_end_y - 22 * draw_suofang), Math.floor(30 * draw_suofang), Math.floor(30 * draw_suofang));
                    }
                    canvas.crossOrigin = "anonymous";
                    convasData = ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight);
                    drawdown = false;
                    restorePointer();
                }
            } else {
                handlePointerDown = (e) => {
                    ctx.beginPath();
                    if (drawdown == false) {
                        draw_start_x = e.offsetX * draw_suofang;
                        draw_start_y = e.offsetY * draw_suofang;
                    }
                    drawdown = true;
                    ctx.moveTo(e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                }
                handlePointerMove = (e) => {
                    if (drawdown) {
                        ctx.lineTo(e.offsetX * draw_suofang, e.offsetY * draw_suofang);
                        ctx.strokeStyle = "rgb(38, 201, 154)".toString();
                        ctx.lineJoin = "round";
                        ctx.lineCap = "round";
                        ctx.lineWidth = String(parseInt(5 * draw_suofang));
                        ctx.stroke();
                    }
                }
                handlePointerUp = (e) => {
                    draw_end_x = e.offsetX * draw_suofang;
                    draw_end_y = e.offsetY * draw_suofang;
                    var startIMG = new Image();
                    var endIMG = new Image();
                    startIMG.src = start_sign_src;
                    endIMG.src = end_sign_src;
                    startIMG.onload = function () {
                        ctx.drawImage(startIMG, parseInt(draw_start_x - 15 * draw_suofang), parseInt(draw_start_y - 22 * draw_suofang), parseInt(30 * draw_suofang), parseInt(30 * draw_suofang));
                    }
                    endIMG.onload = function () {
                        ctx.drawImage(endIMG, parseInt(draw_end_x - 15 * draw_suofang), parseInt(draw_end_y - 22 * draw_suofang), parseInt(30 * draw_suofang), parseInt(30 * draw_suofang));
                    }
                    convasData = ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight);
                    drawdown = false;
                    restorePointer();
                }
            }
            canvas = document.getElementById('drawpic_canvas');
            ctx = canvas.getContext('2d');
            var bgIMG = new Image();
            if (use_default_bg) {
                bgIMG.src = default_bgSRC[1];
            } else {
                bgIMG.src = bgSRC;
            }
            bgIMG.onload = function () {
                ctx.drawImage(bgIMG, 0, 0, current_img_width, current_img_height);
                drawdown = false;
                is_bs = false;
                convasData = null;
                canvas.addEventListener('pointerdown', handlePointerDown);
                canvas.addEventListener('pointermove', handlePointerMove);
                canvas.addEventListener('pointerup', handlePointerUp);
            }
        }
        // 保存为配置文件
        function saveDrawingActions() {
            const jsonString = JSON.stringify(drawingActions);
            // 这里可以使用其他方式保存，例如保存到本地文件或数据库
            localStorage.setItem('drawingActions', jsonString);
        }
        //这三个方法的具体内容, 取决于是否处在"路径变色"模式
        //所以这里先占个位
        var handlePointerDown, handlePointerMove, handlePointerUp;

        function restorePointer() {
            canvas.removeEventListener('pointerdown', handlePointerDown);
            canvas.removeEventListener('pointermove', handlePointerMove);
            canvas.removeEventListener('pointerup', handlePointerUp);
        }
        //取消按钮
        function drawpic_hidebtn_onClick() {
            restorePointer();
            document.getElementById("body").style.overflow = "";
            document.getElementById("body").style.height = "";
            document.body.removeEventListener('touchmove', this.welcomeShowedListener, false);
            document.getElementById("drawpic_overlay").style.display = "none";
        }
        //重置按钮
        function drawpic_initbtn_onClick() {
            ctx.clearRect(0, 0, current_img_width, current_img_height);
            start_draw();
        }
        //确定按钮
        function drawpic_yesbtn_onClick() {
            document.getElementById("body").style.overflow = "";
            document.getElementById("body").style.height = "";
            document.body.removeEventListener('touchmove', this.welcomeShowedListener, false);
            document.getElementById("bg-img").src = canvas.toDataURL();
            document.getElementById("drawpic_overlay").style.display = "none";
        }
        //获取当前使用的背景图片的尺寸
        function getNaturalSize() {
            img = document.getElementById("bg-img")
            current_img_width = img.naturalWidth;
            current_img_height = img.naturalHeight;
        }
        /*----- 以上为[绘制自定义轨迹]用到的方法 -----*/

        //下载截图
        function Download(func = Download1) {
            let ele = document.getElementById("new-Img");
            buffer_canvas = document.getElementById("buffer_canvas");
            buffer_canvas.width = savePic_width;
            buffer_canvas.height = Math.floor(savePic_width * 2157 / 1080);
            let scale = savePic_width / document.getElementById("new-Img").getBoundingClientRect().width;
            html2canvas(ele, {
                canvas: buffer_canvas,
                useCORS: true,
                logging: false,
                height: buffer_canvas.height,
                width: buffer_canvas.width,
                scale: scale,
            }).then(func);
        }
        // 使用a元素
        function Download1(buffer_canvas) {
            let dataurl = buffer_canvas.toDataURL('image/png');
            let donwLink = document.createElement('a');
            donwLink.Download = "keep" + (date_month) + "月" + (date_day) + "日" + "跑步打卡.png";
            donwLink.download = "keep" + (date_month) + "月" + (date_day) + "日" + "跑步打卡.png";
            donwLink.href = dataurl;
            donwLink.style = 'display: none';
            donwLink.dataset.downloadurl = ["image/png", donwLink.download, donwLink.href].join(':');
            document.body.appendChild(donwLink);
            donwLink.click();
            document.body.removeChild(donwLink);
        }
        // 新打开一个窗口显示图片
        function Download2(buffer_canvas) {
            let dataurl = buffer_canvas.toDataURL('image/png');
            window.open('about:blank', 'image').document.write("<img src='" + dataurl + "' alt='from canvas'/>");
        }
        // ObjectURL
        function Download3(buffer_canvas) {
            let dataurl = buffer_canvas.toDataURL('image/png');
            let picURL = URL.createObjectURL(dataURLtoBlob(dataurl));
            let donwLink = document.createElement('a');
            donwLink.Download = "keep" + (date_month) + "月" + (date_day) + "日" + "跑步打卡.png";
            donwLink.download = "keep" + (date_month) + "月" + (date_day) + "日" + "跑步打卡.png";
            donwLink.href = picURL;
            donwLink.style = 'display: none';
            donwLink.dataset.downloadurl = ["image/png", donwLink.download, donwLink.href].join(':');
            document.body.appendChild(donwLink);
            donwLink.click();
            document.body.removeChild(donwLink);
            URL.revokeObjectURL(picURL);
        }
        // window.location.href
        function Download4(buffer_canvas) {
            window.location.href = buffer_canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        }


        //初始化变量
        window.onload = async function () {
            miles = Math.floor((2.2 + Math.random() * 1.8) * 100) / 100;
            speeds = Math.floor((4.3 + Math.random() * 1.2) * 100) / 100;
            let datetime_now = new Date();
            date_year = datetime_now.getFullYear();
            date_month = datetime_now.getMonth() + 1;
            date_day = datetime_now.getDate();
            time_hour = datetime_now.getHours();
            time_min = datetime_now.getMinutes();
            username = "用户名";
            keep_title = "哈尔滨工程大学南田径场";
            humidity = 23;
            temperature = 12;
            bs_prob = 0.015;
            bs_range_min = 15;
            bs_range_max = 40;
            savePic_width = 1080;
            document.querySelector('.cookies-btn').addEventListener('click', function () {
                const data = {
                    id: "user_info",
                    username: username,
                    keep_title: keep_title,
                    // ...其他要保存的属性...
                };
                storeData(data);
            });

            // 尝试从IndexedDB检索数据
            retrieveData("user_info", function (err, data) {
                if (data) {
                    username = data.username || username;
                    keep_title = data.keep_title || keep_title;
                    // ...为其他属性设置值...
                }
            });

            retrieveData("user_portrait", function (err, data) {
                if (data && data.portrait_data) {
                    let IMG = new Image();
                    IMG.src = data.portrait_data;
                    document.getElementById("portrait").src = IMG.src;

                    IMG.onload = function () {
                        if (parseInt(IMG.width) / parseInt(IMG.height) > 1) {
                            document.getElementById("portrait").style.height = String(ptHeight) + "px";
                            document.getElementById("portrait").style.width = String(parseInt(IMG.width) * ptHeight / parseInt(IMG.height)) + "px";
                        } else {
                            document.getElementById("portrait").style.height = String(parseInt(IMG.height) * ptWidth / parseInt(IMG.width)) + "px";
                            document.getElementById("portrait").style.width = String(ptWidth) + "px";
                        }
                    }
                }
                var portrait_ofile = document.getElementById("inpt_portrait").files;
                if (portrait_ofile && portrait_ofile.length > 0) {
                    var portrait_oFReader = new FileReader();
                    portrait_oFReader.readAsDataURL(portrait_ofile[0]);
                }
            });
            // // 尝试从IndexedDB检索背景图片
            // retrieveData("bgImage", function (err, data) {
            //     if (!err && data && data.image) {
            //         bgSRC = data.image;
            //         setbgImg(bgSRC);
            //     }
            // });

            // 尝试获取天气数据
            try {
                const weatherData = await loadAMapWeather();
                temperature = parseInt(weatherData.temperature);
                humidity = parseInt(weatherData.humidity);
            } catch (err) {
                temperature = 10; // 默认值
                humidity = 42;    // 默认值
                alert('温度、湿度获取失败，请手动输入');
            }

            // 之后，初始化您的输入框和其他数据
            initInputData();
            default_bgImgSelect_onChange();
            weather_Select_onChange();
            bs = document.getElementById("inpt_colorchange_checkbox").checked = true;
            inpt_colorchange_checkbox_onchange();
            render();
        }

    </script>
</body>

</html>