Files
WechatMomentScreenshot/index.src.html
✨小透明・宸✨ 4828e10ab8 Update index.html
2023-08-11 16:00:34 +08:00

563 lines
41 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html>
<head>
<title>朋友圈转发截图生成工具</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="author" content="TransparentLC">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="no-referrer-when-downgrade">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="Cache-Control" content="no-transform">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1/dist/css/mdui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot@5153ab08ffb7c9bdce15bd5ae1f1f15e57e3f927/style.min.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- <script src="https://fastly.jsdelivr.net/npm/eruda"></script><script>eruda.init()</script> -->
<script>new URL(location.href).searchParams.has("debug")&&(document.write(atob('PHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZXJ1ZGEiPjwvc2NyaXB0PjxzY3JpcHQ+ZXJ1ZGEuaW5pdCgpPC9zY3JpcHQ+')))</script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-appbar-with-toolbar">
<header class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-typo-title">朋友圈转发截图生成工具</span>
<div class="mdui-toolbar-spacer"></div>
<a class="mdui-btn mdui-btn-icon" mdui-dialog="{target:'#about'}" mdui-tooltip="{content:'关于'}"><i class="mdui-icon material-icons">info_outline</i></a>
<a id="sourceRepo" href="https://github.com/TransparentLC/WechatMomentScreenshot" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content:'查看 GitHub'}">
<svg viewBox="0 0 36 36" class="mdui-icon" style="width:24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z" />
</svg>
</a>
</div>
</header>
<div class="mdui-container">
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-10">
<div class="mdui-textfield">
<label class="mdui-textfield-label">用户名</label>
<input id="configName" class="mdui-textfield-input" type="text" />
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label">&nbsp;</label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configAvatar').click();">选择头像</button>
<input id="configAvatar" type="file" style="display:none" />
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">正文</label>
<textarea id="configText" class="mdui-textfield-input"></textarea>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">截图类型</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeText" type="radio" name="group" checked />
<i class="mdui-radio-icon"></i>纯文字
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeWebsite" type="radio" name="group" />
<i class="mdui-radio-icon"></i>分享网页/公众号文章
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeSingleImage" type="radio" name="group" />
<i class="mdui-radio-icon"></i>图片(单张)
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeMultiImage" type="radio" name="group" />
<i class="mdui-radio-icon"></i>图片(九宫格)
</label>
</div>
</div>
<div id="configWebsite" style="display: none;">
<div class="mdui-textfield">
<label class="mdui-textfield-label">网页标题</label>
<input id="configArticleTitle" class="mdui-textfield-input" type="text" value="还不会用Google的你就要被时代淘汰了" />
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripplet mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configArticleIcon').click();">上传网页图标</button>
<input id="configArticleIcon" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="getArticleInfo();">自动获取公众号文章标题/封面图</button>
</div>
</div>
</div>
<div id="configSingleImage" style="display: none;">
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetSingleImage').click();">上传图片</button>
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="addPlayIcon()">添加视频播放图标</button>
</div>
</div>
<input id="configSetSingleImage" type="file" style="display:none" />
</div>
<div id="configMultiImage" style="display: none;">
<div class="mdui-m-y-1">请按图片 1 - 9 的顺序添加图片~<br>如果只需要显示一张图片,建议选择“图片(单张)”。</div>
<div class="mdui-row">
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage1').click();">上传图片 1</button>
<input id="configSetMultiImage1" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage2').click();">上传图片 2</button>
<input id="configSetMultiImage2" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage3').click();">上传图片 3</button>
<input id="configSetMultiImage3" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage4').click();">上传图片 4</button>
<input id="configSetMultiImage4" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage5').click();">上传图片 5</button>
<input id="configSetMultiImage5" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage6').click();">上传图片 6</button>
<input id="configSetMultiImage6" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage7').click();">上传图片 7</button>
<input id="configSetMultiImage7" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage8').click();">上传图片 8</button>
<input id="configSetMultiImage8" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage9').click();">上传图片 9</button>
<input id="configSetMultiImage9" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-12">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="clearMultiImage();">清空所有图片</button>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">定位</label>
<input id="configLocation" class="mdui-textfield-input" type="text" value="" />
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">转发出处</label>
<input id="configApp" class="mdui-textfield-input" type="text" value="" />
<div class="mdui-textfield-helper">设置为“视频号 · ○○○”时将以链接的浅蓝色显示</div>
</div>
<div class="mdui-row">
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">发表日期</label>
<input id="configPostDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">发表时间</label>
<input id="configPostTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">&nbsp;</label>
<input id="configPostTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">截图日期</label>
<input id="configScreenshotDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">截图时间</label>
<input id="configScreenshotTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">&nbsp;</label>
<input id="configScreenshotTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-textfield mdui-col-xs-4 mdui-col-sm-6">
<label class="mdui-textfield-label">点赞数</label>
<input id="configLike" class="mdui-textfield-input" type="number" min="0" />
</div>
<div class="mdui-col-xs-4 mdui-col-sm-3">
<div class="mdui-textfield">
<label class="mdui-textfield-label">图片长度</label>
<input id="configHeight" class="mdui-textfield-input" type="number" value="1920" min="1920" />
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-3">
<div class="mdui-textfield">
<label class="mdui-textfield-label">&nbsp;</label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" mdui-tooltip="{content:'图片宽度默认为 1080 像素,长度根据设备长宽比确定计算,可能和实际存在偏差'}" onclick="document.getElementById('configHeight').value = Math.round(document.body.clientHeight / document.body.clientWidth * 1080);">自动设定</button>
</div>
</div>
<div class="mdui-textfield mdui-col-xs-8 mdui-col-sm-10">
<label class="mdui-textfield-label">自定义头像库</label>
<input id="configAvatarSet" class="mdui-textfield-input" type="text" list="presetAvatarSet" />
<datalist id="presetAvatarSet">
<option value="https://i.akarin.dev/wms-avatar/avatar-stable.txt">
<option value="https://i.akarin.dev/wms-avatar/avatar-fast.txt">
</datalist>
<div class="mdui-textfield-helper">高级功能,点击<a href="javascript:;" class="mdui-text-color-theme-accent" mdui-dialog="{target:'#aboutAvatarSet'}">这里</a>查看详细说明</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label">&nbsp;</label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="xhrGet(document.getElementById('configAvatarSet').value || 'https://i.akarin.dev/wms-avatar/avatar-stable.txt', function (result) {loadAvatarSet(result, true); config.avatarSet = document.getElementById('configAvatarSet').value})">应用</button>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">评论区</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">
<label class="mdui-checkbox">
<input id="configShowComment" type="checkbox" name="configShowComment" onclick="document.getElementById('configCommentPreview').classList[this.checked ? 'remove' : 'add']('mdui-hidden');" />
<i class="mdui-checkbox-icon"></i>
显示评论区
</label>
</div>
<div id="configCommentPreview" class="mdui-col-xs-12 mdui-hidden">
<div class="mdui-table-fluid mdui-m-y-2">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>评论内容</th>
<th>时间</th>
</tr>
</thead>
<tbody id="configCommentList">
</tbody>
</table>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" mdui-dialog="{target:'#addComment'}" onclick="document.getElementById('configCommentName').value = randomName(); document.getElementById('configCommentAvatar').value = null;">添加评论</button>
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="removeComment()">删除评论</button>
</div>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">通知栏</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">
<label class="mdui-checkbox">
<input id="configTopBarAppIcons" type="checkbox" name="configTopBarAppIcons" />
<i class="mdui-checkbox-icon"></i>
显示 APP 图标
</label>
</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">
<label class="mdui-checkbox">
<input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons" />
<i class="mdui-checkbox-icon"></i>
随机信号和电量
</label>
</div>
<div class="mdui-col-xs-12 mdui-col-sm-4">
<label class="mdui-checkbox">
<input id="configTopBarIos" type="checkbox" name="configTopBarIos" />
<i class="mdui-checkbox-icon"></i>
使用 iOS 的样式(以上两项不可用)
</label>
</div>
<div class="mdui-col-xs-8 mdui-col-sm-10">
<label class="mdui-checkbox">
<input id="configTopBarCustom" type="checkbox" name="configTopBarCustom" />
<i class="mdui-checkbox-icon"></i>
使用自定义通知栏图片
</label>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configTopBarCustomImage').click();">选择图片</button>
<input id="configTopBarCustomImage" type="file" style="display:none" />
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">其他</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configUIWhite" type="checkbox" name="configUIWhite" />
<i class="mdui-checkbox-icon"></i>使用 7.0 以上版本白色界面
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configFirstAvatar" type="checkbox" name="configFirstAvatar" />
<i class="mdui-checkbox-icon"></i>第一个头像固定为自己
</label>
</div>
</div>
<button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block mdui-m-t-2">生成</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="window.open('https://i.akarin.dev/donate/')">请小透明喝一瓶肥宅快乐水~(*´∀`)</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="window.open('https://i.akarin.dev/wms-archive/')">公众号资源分享</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="copyGitLink()">复制本工具的链接,分享给有需要的人(`ヮ´ )</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="localStorage.removeItem('config');localStorage.removeItem('avatar');mdui.snackbar({message:'已清除~刷新后将使用默认设置'})">清除保存的设置信息</button>
<div id="gitLink" style="display:none">https://git.io/WMS</div>
<div id="fakeWechatMoment">
<div id="topBar" class="topBar">
<div id="topBarAppIcons"></div>
<div style="flex-grow:1"></div>
<img id="topBarIconWifi" class="topBarIcon" />
<img id="topBarIconSignal" class="topBarIcon" />
<img id="topBarIconBattery" class="topBarIcon" />
<span id="topBarTime"></span>
</div>
<div id="topBarIos" class="topBarIos">
<span id="topBarTimeIos"></span>
<div style="flex-grow:1"></div>
<img id="topBarIconIos" class="topBarIcon" />
</div>
<div id="topBarCustom">
<img id="topBarCustomImage" style="width:100%" />
</div>
<div id="header" class="header">
<img style="width:28px;height:48px" />
<div style="flex-grow:1;text-align:center">详情</div>
<div style="width:28px;transform:scaleX(-100%)">···</div>
</div>
<div id="main" class="main">
<div style="height:30px"></div>
<div class="avatarOut">
<div id="avatar" class="avatarIn squareImage"></div>
</div>
<div class="content">
<div id="name" class="name"></div>
<div style="height:11px"></div>
<div id="text" class="text"></div>
<div id="article" class="article" style="display:none">
<div id="articleIcon" class="articleIcon squareImage" style="background-image:url(data:image/png;base64,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)"></div>
<div id="articleTitle" class="articleTitle"></div>
</div>
<div id="singleImage" class="singleImage" style="display:none">
<img id="image" class="image" src="https://cc-im-kefu-cos.7moor-fs1.com/im/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/S9rwwjJo.jpg">
</div>
<div id="multiImage" class="multiImage" style="display:none">
<div id="image1" class="multiImageBox squareImage"></div>
<div id="image2" class="multiImageBox squareImage"></div>
<div id="image3" class="multiImageBox squareImage"></div>
<div id="image4" class="multiImageBox squareImage"></div>
<div id="image5" class="multiImageBox squareImage"></div>
<div id="image6" class="multiImageBox squareImage"></div>
<div id="image7" class="multiImageBox squareImage"></div>
<div id="image8" class="multiImageBox squareImage"></div>
<div id="image9" class="multiImageBox squareImage"></div>
</div>
<div style="height:20px"></div>
<div class="info">
<span id="location" style="color:#576b95"></span>
<div style="height:20px"></div>
<span id="time"></span>
&nbsp;
<svg viewBox="0 0 24 24" style="width:40px;height:40px;transform:translateY(4px)" fill="#576b95">
<path d="M15.4117646,4.50000215 L14.6107386,18.117444 C14.5485547,19.1745693 13.6731425,20 12.6141898,20 L5.38581016,20 C4.32685754,20 3.45144525,19.1745693 3.38926141,18.117444 L2.58823542,4.50000215 L0.5,4.50000215 L0.5,3.5 C0.5,3.22385763 0.723857625,3 1,3 L17,3 C17.2761424,3 17.5,3.22385763 17.5,3.5 L17.5,4.50000215 L15.4117646,4.50000215 Z M7,0.500034106 L11,0.500034106 C11.2761424,0.500034106 11.5,0.723891731 11.5,1.00003411 L11.5,2 L6.5,2 L6.5,1.00003411 C6.5,0.723891731 6.72385763,0.500034106 7,0.500034106 Z M6,6.99998133 L6.5,15.9999943 L8,15.9999943 L7.60000038,6.99998133 L6,6.99998133 Z M10.5,6.99998133 L10,15.9999943 L11.5,15.9999943 L12,6.99998133 L10.5,6.99998133 Z" />
</svg>
</div>
<img style="position:relative;display:inline-block;width:auto;height:42px;top:9px" />
</div>
<div style="height:50px"></div>
<div id="like" class="like">
<img src="like.svg" width="32" height="32" style="position: relative; left: 30px; top: 43px; display: inline-block; vertical-align: top;" />
<div id="likeAvatarList" class="likeAvatarList"></div>
<div style="height:17px"></div>
</div>
<div id="comment" class="like" style="margin-top:1px">
<img src="commentlist.svg" width="32" height="32" style="position: relative; left: 30px; top: 45px; display: inline-block; vertical-align: top;" />
<div id="commentList" class="likeAvatarList"></div>
</div>
</div>
<div id="footer" class="footer">
<div class="commentInput">评论</div>
<div style="width:22px;display:inline-block"></div>
<img style="width:88px!important;height:88px!important" />
<div style="width:40px;display:inline-block"></div>
<div class="commentSend">发送</div>
</div>
</div>
<div id="aboutFooter" class="mdui-m-y-2" style="text-align:center;line-height:1.5em">
<a id="aboutFooterBadge" href="https://github.com/TransparentLC/WechatMomentScreenshot" target="_blank" style="text-decoration:none"><img src="https://img.shields.io/github/stars/TransparentLC/WechatMomentScreenshot.svg?style=social"></a>
<br>
<span class="mdui-typo-caption-opacity">© 2023 ✨小透明・宸✨</span>
</div>
<div id="addComment" class="mdui-dialog">
<div class="mdui-dialog-title">添加评论</div>
<div class="mdui-dialog-content mdui-typo">
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-10">
<div class="mdui-textfield">
<label class="mdui-textfield-label">用户名</label>
<input id="configCommentName" class="mdui-textfield-input" type="text" value="" />
<div class="mdui-textfield-helper">默认的名字是随机生成的,未选择头像则会随机抽取一个头像。</div>
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label">&nbsp;</label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configCommentAvatar').click();">上传头像</button>
<input id="configCommentAvatar" type="file" style="display: none;" />
</div>
</div>
<div class="mdui-col-xs-12">
<div class="mdui-textfield">
<label class="mdui-textfield-label">评论内容</label>
<textarea id="configCommentText" class="mdui-textfield-input"></textarea>
</div>
</div>
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">评论日期</label>
<input id="configCommentDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">评论时间</label>
<input id="configCommentTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">&nbsp;</label>
<input id="configCommentTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-col-xs-12">
<div class="mdui-textfield">
<label class="mdui-textfield-label">回复给……(可选)</label>
<textarea id="configCommentReply" class="mdui-textfield-input"></textarea>
</div>
</div>
</div>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>CANCEL</button>
<button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="var avatarSrc = document.getElementById('configCommentAvatar').files[0] ? window.URL.createObjectURL(document.getElementById('configCommentAvatar').files[0]) : avatarURL[Math.floor(Math.random() * avatarURL.length)]; var configCommentDate = document.getElementById('configCommentDate').valueAsDate; configCommentDate.setHours(document.getElementById('configCommentTimeHour').value); configCommentDate.setMinutes(document.getElementById('configCommentTimeMinute').value); addComment(avatarSrc, document.getElementById('configCommentName').value, document.getElementById('configCommentText').value, configCommentDate, document.getElementById('configCommentReply').value);">OK</button>
</div>
</div>
<div id="generatedPopup" class="mdui-dialog">
<div class="mdui-dialog-title">生成完毕| ω・`)</div>
<div class="mdui-dialog-content">
<img id="generated">
<div class="mdui-typo-caption-opacity mdui-text-center">
<p>如果点击“保存”没有反应<br>请尝试长按/右键图片进行另存为操作 ( ゚ 3゚)</p>
</div>
<div class="mdui-typo">
<p class="mdui-m-b-1">如果这个工具帮到了你,请推荐给更多的人~</p>
<p>如果你从公众号获取了资源,欢迎通过<a href="https://wj.qq.com/s2/12913387/8254/" target="_blank" rel="noopener noreferrer">这个问卷</a>分享给工具的其他用户。你也可以在<a href="https://i.akarin.dev/wms-archive/" target="_blank">这里</a>查看其他人分享的资源。</p>
</div>
</div>
<div class="mdui-dialog-actions">
<a id="save" class="mdui-btn mdui-ripple">保存</a>
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
</div>
</div>
<div id="about" class="mdui-dialog">
<div class="mdui-dialog-title">关于</div>
<div class="mdui-dialog-content mdui-typo">
<h4>这个小工具是什么?</h4>
一个因为不喜欢也不想往朋友圈发某些不得不发的废文而做出来的摸鱼产物。
<h4>为什么生成的截图和我在手机上截的不一样?能不能做出 iOS 的样式?</h4>
不同手机的界面总是有那么一点区别的,要和真正的截图完全一样……我也很难办啊!(摊手)
<br>
如果实在是很在意通知栏的样式的话,可以从自己的手机上截一个通知栏的图然后覆盖上去……
<br>
2023.5.8 更新iOS 的样式已经添加了,不过因为我并没有 iOS 设备,所以只能参考网上找到的截图来写样式,<strong>不一定能做到和实机一样</strong>
<br>
2023.6.14 更新:已经添加了使用自定义通知栏图片的选项。可以自行在手机上截图并裁剪出通知栏部分,然后使它出现在生成的截图上。
<h4>能不能生成纯文字/转发图片的截图?</h4>
<del>懒得写样式,心情好的时候再加上~(*´ω`*)</del>
<br>
已经可以生成啦~
<h4>生成图片后点击“保存”没有反应?</h4>
也可以试试长按图片手动另存为呢( ゚ 3゚)
<h4>开源就是好</h4>
<ul>
<li>
<a href="https://html2canvas.hertzen.com">html2canvas</a>&nbsp;开源许可:<a href="https://github.com/niklasvh/html2canvas/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://www.mdui.org">MDUI</a>&nbsp;开源许可:<a href="https://github.com/zdhxiong/mdui/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://github.com/google/material-design-icons">Material Design icons</a>&nbsp;开源许可:<a href="https://github.com/google/material-design-icons/blob/master/LICENSE">Apache License 2.0</a>
</li>
<li>
<a href="https://www.iconfont.cn">Iconfont 阿里巴巴矢量图标库</a>
</li>
</ul>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
<div id="aboutAvatarSet" class="mdui-dialog">
<div class="mdui-dialog-title">“自定义头像库”的说明</div>
<div class="mdui-dialog-content mdui-typo">
<p>如果你希望在生成的截图的点赞区域中显示自定义的头像,可以按照以下步骤操作:</p>
<ol>
<li>收集你想要的头像,并上传到图床之类的地方。</li>
<li>将这些头像的 URL 以一行一个的格式保存为纯文本,以下是示例。</li>
<pre><code>https://example.com/avatar-0.jpg
https://example.com/avatar-1.jpg
https://example.com/avatar-2.jpg
...</code></pre>
<li>将这个文本文件上传到某个地方,例如自己的网站上,也可以按照这一格式动态生成头像库的内容,总之需要使头像库也能通过 URL 访问到。</li>
<li>在“自定义头像库”中输入头像库的 URL点击“应用”后会进行读取之后在生成截图时就会从头像库抽取头像了。</li>
<li>头像和头像库都需要支持跨域访问(响应头 <code>Access-Control-Allow-Origin: *</code></li>
</ol>
<p>这个功能有一定的技术门槛,因此并不能保证每个人都有条件使用这一功能。留空后点击“应用”将会使用默认头像库。</p>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
<div id="request" class="mdui-dialog">
<div id="requestResult" class="mdui-dialog-title"></div>
<div id="requestResultContent" class="mdui-dialog-content mdui-typo"></div>
<div class="mdui-dialog-actions">
<button id="requestAction" class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/combine/npm/html2canvas@1/dist/html2canvas.min.js,npm/mdui@1/dist/js/mdui.min.js,gh/TransparentLC/WechatMomentScreenshot@5153ab08ffb7c9bdce15bd5ae1f1f15e57e3f927/main.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/mdui@1/dist/js/mdui.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/html2canvas@1/dist/html2canvas.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script> -->
<!-- <script src="main.js"></script> -->
</body>
</html>