forked from TransparentLC/WechatMomentScreenshot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 21.3 KB
/
index.html
1
<!doctype html><html><head><title>朋友圈转发截图生成工具</title><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"><meta content="TransparentLC" name="author"><meta content="no-siteapp" http-equiv="Cache-Control"><meta content="no-transform" http-equiv="Cache-Control"><link href="https://cdn.jsdelivr.net/npm/mdui@1/dist/css/mdui.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/style.min.css" rel="stylesheet"></head><body class="mdui-appbar-with-toolbar mdui-theme-accent-pink mdui-theme-primary-indigo"><header class="mdui-appbar mdui-appbar-fixed"><div class="mdui-color-theme mdui-toolbar"><span class="mdui-typo-title">朋友圈转发截图生成工具</span><div class="mdui-toolbar-spacer"></div><a class="mdui-btn mdui-btn-icon" mdui-tooltip="{content:'关于'}" mdui-dialog="{target:'#about'}"><i class="mdui-icon material-icons">info_outline</i></a> <a href="https://github.com/TransparentLC/WechatMomentScreenshot" class="mdui-btn mdui-ripple mdui-btn-icon mdui-ripple-white" mdui-tooltip="{content:'查看 GitHub'}"><svg class="mdui-icon" style="width:24px;height:24px" viewBox="0 0 36 36"><path clip-rule="evenodd" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5c0.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-1c1.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.4c-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.7c0.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.5c0,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" fill="#fff" fill-rule="evenodd"/></svg></a></div></header><div class="mdui-container"><div class="mdui-row"><div class="mdui-col-sm-10 mdui-col-xs-8"><div class="mdui-textfield"><label class="mdui-textfield-label">用户名</label> <input id="configName" type="text" class="mdui-textfield-input"></div></div><div class="mdui-col-xs-4 mdui-col-sm-2"><div class="mdui-textfield"><label class="mdui-textfield-label"> </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 class="mdui-textfield-input" id="configText"></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" type="text" class="mdui-textfield-input" value="还不会用Google的你，就要被时代淘汰了"></div><div class="mdui-row"><div class="mdui-col-xs-6"><button class="mdui-btn mdui-btn-block mdui-text-color-theme-accent mdui-ripplet" 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 class="mdui-textfield"><label class="mdui-textfield-label">转发出处</label> <input id="configApp" type="text" class="mdui-textfield-input" value=""></div></div><div id="configSingleImage" style="display:none"><button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById("configSetSingleImage").click()">上传图片</button> <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" type="text" class="mdui-textfield-input" value=""></div><div class="mdui-row"><div class="mdui-textfield mdui-col-xs-6"><label class="mdui-textfield-label">发表日期</label> <input id="configPostDate" type="date" class="mdui-textfield-input"></div><div class="mdui-textfield mdui-col-xs-3"><label class="mdui-textfield-label">发表时间</label> <input id="configPostTimeHour" type="number" class="mdui-textfield-input" min="0" max="23"></div><div class="mdui-textfield mdui-col-xs-3"><label class="mdui-textfield-label"> </label> <input id="configPostTimeMinute" type="number" class="mdui-textfield-input" min="0" max="59"></div><div class="mdui-textfield mdui-col-xs-6"><label class="mdui-textfield-label">截图日期</label> <input id="configScreenshotDate" type="date" class="mdui-textfield-input"></div><div class="mdui-textfield mdui-col-xs-3"><label class="mdui-textfield-label">截图时间</label> <input id="configScreenshotTimeHour" type="number" class="mdui-textfield-input" min="0" max="23"></div><div class="mdui-textfield mdui-col-xs-3"><label class="mdui-textfield-label"> </label> <input id="configScreenshotTimeMinute" type="number" class="mdui-textfield-input" min="0" max="59"></div><div class="mdui-textfield mdui-col-sm-6 mdui-col-xs-4"><label class="mdui-textfield-label">点赞数</label> <input id="configLike" type="number" class="mdui-textfield-input" 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" type="number" class="mdui-textfield-input" min="1920" value="1920"></div></div><div class="mdui-col-xs-4 mdui-col-sm-3"><div class="mdui-textfield"><label class="mdui-textfield-label"> </label> <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById("configHeight").value=Math.round(document.body.clientHeight/document.body.clientWidth*1080)" mdui-tooltip="{content:'图片宽度默认为 1080 像素，长度根据设备长宽比确定计算，可能和实际存在偏差'}">自动设定</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.toggle("mdui-hidden")"> <i class="mdui-checkbox-icon"></i> 显示评论区</label></div><div class="mdui-col-xs-12 mdui-hidden" id="configCommentPreview"><div class="mdui-m-y-2 mdui-table-fluid"><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'}">添加评论</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-12"><label class="mdui-checkbox"><input id="configUIWhite" type="checkbox" name="configUIWhite"> <i class="mdui-checkbox-icon"></i>使用 7.0 以上版本白色界面</label></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="configTopBarAppIcons" type="checkbox" name="configTopBarAppIcons"> <i class="mdui-checkbox-icon"></i> 显示 APP 图标</label></div><div class="mdui-col-xs-6"><label class="mdui-checkbox"><input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons"> <i class="mdui-checkbox-icon"></i> 随机信号和电量</label></div></div><button class="mdui-btn mdui-ripple mdui-btn-block mdui-color-theme-accent mdui-m-t-2" id="generate">生成</button> <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" mdui-dialog="{target:'#donate'}">请小透明喝一瓶肥宅快乐水～(*´∀`)</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 class="topBar" id="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 class="header" id="header"><div style="width:40px"></div><img style="width:auto;height:48px"><div style="width:40px"></div>详情</div><div class="main" id="main"><div style="height:30px"></div><div class="avatarOut"><div class="squareImage avatarIn" id="avatar"></div></div><div class="content"><div class="name" id="name"></div><div style="height:11px"></div><div class="text" id="text"></div><div class="article" id="article" style="display:none"><div class="squareImage articleIcon" id="articleIcon" style="background-image:url(https://ae01.alicdn.com/kf/HTB1ci0Da5zxK1RjSspjq6AS.pXaD.jpg)"></div><div class="articleTitle" id="articleTitle"></div></div><div class="singleImage" id="singleImage" style="display:none"><img id="image" class="image" src="https://ae01.alicdn.com/kf/HTB13rXuJCzqK1RjSZPxq6A4tVXae.jpg"></div><div class="multiImage" id="multiImage" style="display:none"><div class="squareImage multiImageBox" id="image1"></div><div class="squareImage multiImageBox" id="image2"></div><div class="squareImage multiImageBox" id="image3"></div><div class="squareImage multiImageBox" id="image4"></div><div class="squareImage multiImageBox" id="image5"></div><div class="squareImage multiImageBox" id="image6"></div><div class="squareImage multiImageBox" id="image7"></div><div class="squareImage multiImageBox" id="image8"></div><div class="squareImage multiImageBox" id="image9"></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> <span style="color:#576b95">删除</span></div><img style="position:relative;display:inline-block;width:auto;height:42px;top:9px"></div><div style="height:50px"></div><img id="triangle" src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/triangle.svg" width="40" height="16" style="position:relative;left:25px;top:5px"><div class="like" id="like"><img src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/like.svg" width="32" height="32" style="position:relative;left:30px;top:43px;display:inline-block;vertical-align:top"><div class="likeAvatarList" id="likeAvatarList"></div><div style="height:17px"></div></div><div class="like" id="comment" style="margin-top:1px"><img src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/commentlist.svg" width="32" height="32" style="position:relative;left:30px;top:45px;display:inline-block;vertical-align:top"><div class="likeAvatarList" id="commentList"></div></div></div><div class="footer" id="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 class="mdui-m-y-2" style="text-align:center;line-height:1.5em"><a href="https://github.com/TransparentLC/WechatMomentScreenshot" style="text-decoration:none" target="_blank"><img src="https://img.shields.io/github/stars/TransparentLC/WechatMomentScreenshot.svg?style=social"></a><br><span class="mdui-typo-caption-opacity">© 2021 ✨小透明・宸✨</span></div><div class="mdui-dialog" id="addComment"><div class="mdui-dialog-title">添加评论</div><div class="mdui-dialog-content mdui-typo"><div class="mdui-row"><div class="mdui-col-sm-10 mdui-col-xs-8"><div class="mdui-textfield"><label class="mdui-textfield-label">用户名</label> <input id="configCommentName" type="text" class="mdui-textfield-input" value=""></div></div><div class="mdui-col-xs-4 mdui-col-sm-2"><div class="mdui-textfield"><label class="mdui-textfield-label"> </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 class="mdui-textfield-input" id="configCommentText"></textarea></div></div><div class="mdui-textfield mdui-col-xs-6"><label class="mdui-textfield-label">评论日期</label> <input id="configCommentDate" type="date" class="mdui-textfield-input"></div><div class="mdui-textfield mdui-col-xs-3"><label class="mdui-textfield-label">评论时间</label> <input id="configCommentTimeHour" type="number" class="mdui-textfield-input" min="0" max="23"></div><div class="mdui-textfield mdui-col-xs-3"><label class="mdui-textfield-label"> </label> <input id="configCommentTimeMinute" type="number" class="mdui-textfield-input" min="0" max="59"></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" onclick="if(void 0===document.getElementById("configCommentAvatar").files[0])mdui.alert("还没有设定头像啦⊂彡☆))∀`)");else{var configCommentDate=document.getElementById("configCommentDate").valueAsDate;configCommentDate.setHours(document.getElementById("configCommentTimeHour").value),configCommentDate.setMinutes(document.getElementById("configCommentTimeMinute").value),addComment(window.URL.createObjectURL(document.getElementById("configCommentAvatar").files[0]),document.getElementById("configCommentName").value,document.getElementById("configCommentText").value,configCommentDate)}" mdui-dialog-close>OK</button></div></div><div class="mdui-dialog" id="generatedPopup"><div class="mdui-dialog-title">生成完毕| ω・`)</div><img id="generated"><div class="mdui-m-y-2 mdui-typo-caption-opacity"><p>如果点击“保存”没有反应<br>请尝试长按/右键图片进行另存为操作( ﾟ 3ﾟ)</p><p>当前使用的头像与设置已保存到本地<br>下次打开本工具将自动读取～</p></div><div class="mdui-dialog-actions"><a class="mdui-btn mdui-ripple" id="save">保存</a> <button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button></div></div><div class="mdui-dialog" id="about"><div class="mdui-dialog-title">关于</div><div class="mdui-dialog-content mdui-typo"><h4>这个小工具是什么？</h4>一个因为不喜欢也不想往朋友圈发某些不得不发的废文而做出来的摸鱼产物。<h4>为什么生成的截图和我在手机上截的不一样？能不能做出 iOS 的样式？</h4>不同手机的界面总是有那么一点区别的，要和真正的截图完全一样……我也很难办啊！（摊手）<br>如果实在是很在意通知栏的样式的话，可以从自己的手机上截一个通知栏的图然后覆盖上去……<h4>能不能生成纯文字/转发图片的截图？</h4><del>懒得写样式，心情好的时候再加上～(*´ω`*)</del><br>已经可以生成啦～<h4>生成图片后点击“保存”没有反应？</h4>也可以试试长按图片手动另存为呢( ﾟ 3ﾟ)<h4>开源就是好</h4><ul><li><a href="https://html2canvas.hertzen.com">html2canvas</a> 开源许可：<a href="https://github.com/niklasvh/html2canvas/blob/master/LICENSE">The MIT License</a></li><li><a href="https://www.mdui.org">MDUI</a> 开源许可：<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> 开源许可：<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 class="mdui-dialog" id="request"><div class="mdui-dialog-title" id="requestResult"></div><div class="mdui-dialog-content mdui-typo" id="requestResultContent"></div><div class="mdui-dialog-actions"><button class="mdui-btn mdui-ripple" mdui-dialog-close id="requestAction">OK</button></div></div><div class="mdui-dialog" id="donate"><div class="mdui-dialog-title">请小透明喝一瓶肥宅快乐水～(*´∀`)</div><div class="mdui-dialog-content mdui-typo"><div style="text-align:center"><div><img id="donateWechat" src="https://ae01.alicdn.com/kf/HTB1DpS1VMHqK1RjSZFE763GMXXac.png" width="50%"><img id="donateAlipay" src="https://ae01.alicdn.com/kf/HTB1.nuUVHvpK1RjSZPi762mwXXat.png" width="50%"></div><span class="mdui-typo-caption-opacity">扫一扫(`ε´ )<br>左：微信 右：支付宝</span></div></div><div class="mdui-dialog-actions"><button class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button></div></div></div><script src="https://cdn.jsdelivr.net/combine/npm/mdui@1/dist/js/mdui.min.js,npm/html2canvas@1.0.0-rc.1/dist/html2canvas.min.js,gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script></body></html>