2019-01-26 21:33:27 +08:00
<!DOCTYPE HTML>
< html >
< head >
2019-01-26 21:43:00 +08:00
< title > 朋友圈转发截图生成工具< / title >
2019-01-26 21:33:27 +08:00
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no" / >
2019-02-19 22:16:50 +08:00
< meta http-equiv = "Cache-Control" content = "no-siteapp" / >
< meta http-equiv = "Cache-Control" content = "no-transform" / >
2019-01-26 21:33:27 +08:00
<!-- <link href="mdui.min.css" rel="stylesheet"> -->
< link href = "https://cdn.bootcss.com/mdui/0.4.2/css/mdui.min.css" rel = "stylesheet" >
< style >
body {
margin: 0 0 0 0;
}
#fakeWechatMoment {
background-color: #ffffff;
display: none;
position: fixed;
2019-03-01 16:14:11 +08:00
/*display: block;*/
2019-01-26 21:33:27 +08:00
left: 100%;
top: 0;
}
.topBar {
width: calc(100% - 32px);
height: 72px;
background-color: #303030;
font-size: 34px;
font-weight: 500;
color: #ffffff;
display: flex;
justify-content: flex-end;
align-items: Center;
padding-left: 16px;
padding-right: 16px;
}
.header {
width: 100%;
height: 132px;
background-color: #303030;
font-size: 48px;
color: #ffffff;
display: flex;
align-items: Center;
}
.main {
margin-left: 33px;
margin-right: 33px;
}
.footer {
width: calc(100% - 64px);
height: 132px;
border-top: 2px solid #d8d8d8;
position: relative;
display: flex;
align-items: Center;
justify-content: center;
padding-left: 32px;
padding-right: 32px;
background-color: #f5f5f5;
}
.avatarOut {
display: inline-block;
background-color: #f1f1f1;
width: 116px;
height: 116px;
vertical-align: top;
}
.avatarIn {
position: relative;
left: 6px;
top: 6px;
width: 104px;
height: 104px;
}
.content {
position: relative;
display: inline-block;
width: calc(100% - 143px);
left: 22px;
vertical-align: top;
}
.name {
color: #576b95;
font-size: 40px;
}
.text {
font-size: 36px;
line-height: 1.25em;
}
.article {
background-color: #ececec;
2019-03-01 16:14:11 +08:00
margin-top: 36px;
2019-01-26 21:33:27 +08:00
height: 170px;
display: flex;
align-items: Center;
}
.articleIcon {
position: relative;
left: 16px;
width: 138px;
height: 138px;
}
.articleTitle {
position: relative;
left: 32px;
width: calc(100% - 170px);
font-size: 36px;
max-width: 700px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2019-03-01 16:14:11 +08:00
.singleImage {
margin-top: 28px;
}
.multiImage {
margin-top: 28px;
}
.image {
max-width: 550px;
max-height: 550px;
}
.multiImageBox {
width: 265px;
height: 265px;
margin: 0 8px 8px 0;
display: inline-block;
}
2019-01-26 21:33:27 +08:00
.info {
display: inline-block;
color: #808080;
font-size: 32px;
width: calc(100% - 65px);
}
.like {
width: 100%;
background-color: #eeeeee;
font-size: 0;
}
.likeAvatarList {
position: relative;
display: inline-block;
width: calc(100% - 92px);
left: 60px;
vertical-align: top;
}
.likeAvatar {
width: 88px;
height: 88px;
margin: 17px 17px 0 0;
display: inline-block;
}
#generatedPopup {
text-align: center;
}
#generated {
width: auto;
height: 400px;
display: inline-block;
}
.squareImage {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.heimu{
background-color: #000000;
color: #000000;
transition: color .2s ease;
}
.heimu:hover{
color: #ffffff;
}
< / style >
< / 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 href = "https://github.com/TransparentLC/WechatMomentScreenshot" class = "mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip = "{content: '查看 Github'}" >
< svg version = "1.1" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px" viewBox = "0 0 36 36" enable-background = "new 0 0 36 36" xml:space = "preserve" class = "mdui-icon" style = "width: 24px;height:24px;" >
< path fill-rule = "evenodd" clip-rule = "evenodd" fill = "#ffffff" 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" value = "营销号免费广告姬" / >
< / div >
< / div >
< div class = "mdui-col-xs-4 mdui-col-sm-2" >
< div class = "mdui-textfield" >
< label class = "mdui-textfield-label" > < / label >
2019-03-01 16:14:11 +08:00
< button class = "mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick = "javascript: document.getElementById('configAvatar').click();" > 上传头像< / button >
2019-01-26 21:33:27 +08:00
< input id = "configAvatar" type = "file" style = "display: none;" / >
< / div >
< / div >
< / div >
< div class = "mdui-textfield" >
2019-03-01 16:14:11 +08:00
< 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 >
2019-01-26 21:33:27 +08:00
< / div >
< div class = "mdui-row" >
< div class = "mdui-col-xs-6" >
2019-03-01 16:14:11 +08:00
< 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 >
2019-01-26 21:33:27 +08:00
< / div >
< div class = "mdui-col-xs-6" >
2019-03-01 16:14:11 +08:00
< 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 = "javascript: 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" mdui-dialog = "{target: '#helpArticleIcon'}" > 如何获取文章图标< / button >
< / div >
< / div >
< div class = "mdui-textfield" >
< label class = "mdui-textfield-label" > 转发出处< / label >
< input id = "configApp" class = "mdui-textfield-input" type = "text" value = "" / >
< / div >
< / div >
< div id = "configSingleImage" style = "display: none;" >
< button class = "mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: 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 = "javascript: clearMultiImage();" > 清空所有图片< / button >
2019-01-26 21:33:27 +08:00
< / div >
< / div >
< / div >
2019-03-01 16:14:11 +08:00
2019-01-26 21:33:27 +08:00
< div class = "mdui-textfield" >
2019-03-01 16:14:11 +08:00
< label class = "mdui-textfield-label" > 定位< / label >
< input id = "configLocation" class = "mdui-textfield-input" type = "text" value = "" / >
2019-01-26 21:33:27 +08:00
< / div >
< div class = "mdui-row" >
< div class = "mdui-textfield mdui-col-xs-5" >
< label class = "mdui-textfield-label" > 日期< / label >
< input id = "configDate" class = "mdui-textfield-input" type = "date" / >
< / div >
< div class = "mdui-textfield mdui-col-xs-2" >
< label class = "mdui-textfield-label" > 时间< / label >
< input id = "configTimeHour" class = "mdui-textfield-input" type = "number" min = "0" max = "23" / >
< / div >
< div class = "mdui-textfield mdui-col-xs-2" >
< label class = "mdui-textfield-label" > < / label >
< input id = "configTimeMinute" class = "mdui-textfield-input" type = "number" min = "0" max = "59" / >
< / div >
< div class = "mdui-textfield mdui-col-xs-3" >
< label class = "mdui-textfield-label" > 点赞数< / label >
< input id = "configLike" class = "mdui-textfield-input" type = "number" min = "0" / >
< / div >
< / div >
< button id = "generate" class = "mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-btn-block" > 生成< / button >
< div id = "fakeWechatMoment" >
< div id = "topBar" class = "topBar" >
< img src = "icons.svg" height = "36" / >
< span id = "topBarTime" > < / span >
< / div >
< div id = "header" class = "header" >
< div style = "width: 40px;" > < / div >
< img src = "back.svg" style = "width: auto; height: 48px;" / >
< div style = "width: 40px;" > < / div >
详情
< / div >
< div id = "main" class = "main" >
< div style = "height: 30px;" > < / div >
< div class = "avatarOut" >
< div id = "avatar" class = "avatarIn squareImage" style = "background-image: url(https://ae01.alicdn.com/kf/HTB1sqJDa.LrK1Rjy1zbq6AenFXaf.jpg);" > < / div >
< / div >
< div class = "content" >
< div id = "name" class = "name" > < / div >
< div style = "height: 11px;" > < / div >
< div id = "text" class = "text" > < / div >
2019-03-01 16:14:11 +08:00
2019-03-01 16:16:12 +08:00
< div id = "article" class = "article" style = "display: none;" >
2019-01-26 21:33:27 +08:00
< div id = "articleIcon" class = "articleIcon squareImage" style = "background-image: url(https://ae01.alicdn.com/kf/HTB1ci0Da5zxK1RjSspjq6AS.pXaD.jpg);" > < / div >
< div id = "articleTitle" class = "articleTitle" > < / div >
< / div >
2019-03-01 16:14:11 +08:00
2019-03-01 16:16:12 +08:00
< div id = "singleImage" class = "singleImage" style = "display: none;" >
2019-03-01 16:14:11 +08:00
< img id = "image" class = "image" src = "https://ae01.alicdn.com/kf/HTB13rXuJCzqK1RjSZPxq6A4tVXae.jpg" / >
< / div >
2019-03-01 16:16:12 +08:00
< div id = "multiImage" class = "multiImage" style = "display: none;" >
2019-03-01 16:14:11 +08:00
< 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 >
2019-01-26 21:33:27 +08:00
< div style = "height: 20px;" > < / div >
< div class = "info" >
2019-03-01 16:14:11 +08:00
< span id = "location" style = "color: #576b95;" > < / span >
< div style = "height: 20px;" > < / div >
2019-01-26 21:33:27 +08:00
< span id = "time" > < / span > < span style = "color: #576b95" > 删除< / span >
< / div >
< img src = "comment.svg" style = "position: relative; display: inline-block; width: auto; height: 42px; top: 9px;" / >
< / div >
< div style = "height: 50px;" > < / div >
< img id = "triangle" src = "triangle.svg" width = "40" height = "16" style = "position: relative; left: 25px; top: 5px;" / >
< div id = "like" class = "like" >
< img src = "like.svg" width = "32" height = "32" style = "position: relative; left: 30px; top: 40px; display: inline-block; vertical-align: top;" / >
< div id = "likeAvatarList" class = "likeAvatarList" > < / div >
< div style = "height: 17px;" > < / div >
< / div >
< / div >
< div id = "footer" class = "footer" >
< div style = "border: none; border-bottom: 2px solid #5ec838; font-size: 40px; color: #bbbbbb; width:760px; height: 88px; padding-left: 24px; padding-right: 24px; display: flex; align-items: center;" > 评论< / div >
< div style = "width: 22px; display: inline-block;" > < / div >
< img src = "emoticon.svg" width = "88" height = "88" / >
< div style = "width: 40px; display: inline-block;" > < / div >
< div style = "border: 2px solid #dcdcdc; border-radius: 7px; font-size: 36px; color: #dcdcdc; width: 122px; height: 88px; display: flex; align-items: center; justify-content: center; " > 发送< / div >
< / div >
< / div >
< div style = "height: 50px;" > < / div >
< div class = "mdui-typo-caption-opacity" style = "text-align: center;" >
2019-03-01 16:14:11 +08:00
© 2019 ✨小透明・宸✨
2019-01-26 21:33:27 +08:00
< / div >
< div id = "generatedPopup" class = "mdui-dialog" >
< div class = "mdui-dialog-title" > 生成完毕| ω・`)< / div >
< img id = "generated" / >
< 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 = "helpArticleIcon" class = "mdui-dialog" >
< div class = "mdui-dialog-title" > 如何获取文章图标< / div >
< div class = "mdui-dialog-content mdui-typo" >
2019-01-27 11:49:56 +08:00
最简单的方法当然是直接截图啦|ω•`)
< img class = "mdui-center mdui-img-rounded mdui-shadow-2 mdui-hoverable" src = "https://ae01.alicdn.com/kf/HTB18rlKaZ_vK1Rjy0Fo760IxVXaD.png" / >
< hr / >
也可以使用下面的< del > 很复杂的< / del > 方法，直接获取这张图片的链接：
2019-01-26 21:33:27 +08:00
< ol >
< li > 在右上角的菜单中复制文章的链接。< / li >
< li > 获取文章的网页源代码。你可以使用< a href = "http://mk.mkblog.cn/home/html.php" > 这个< / a > 在线工具。< / li >
< li > 在源代码中查找< kbd > Ctrl+F< / kbd > < code > msg_cdn_url< / code > ，后面就是文章图标的链接。< / li >
< li > 将图标保存下来，然后上传。< / li >
< / ol >
由于浏览器同源策略限制，这里无法通过输入文章链接自动读取网页源代码并载入图标，请手动完成以上步骤。
< / div >
< div class = "mdui-dialog-actions" >
< 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版/7.x版的界面样式？ < / h4 >
因为手上只有猴机，
< h4 > 能不能生成纯文字/转发图片的截图？< / h4 >
2019-03-01 16:14:11 +08:00
< del > 懒得写样式，心情好< span class = "heimu" > 有了萌妹子< / span > 的时候再加上～(*´ω`*)< / del >
< br / >
已经可以生成啦～但是小透明有< span class = "heimu" > 萌妹子< / span > 了吗？
< br / >
< strong > 还没有。< / strong >
2019-03-01 16:27:20 +08:00
< h4 > 生成图片后点击“保存”没有反应< / h4 >
也可以试试长按图片手动另存为呢( ﾟ 3ﾟ)
2019-01-26 21:33:27 +08:00
< 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 >
< / ul >
< / div >
< div class = "mdui-dialog-actions" >
< button class = "mdui-btn mdui-ripple" mdui-dialog-close > 关闭< / button >
< / div >
< / div >
< / div >
<!-- <script src="mdui.min.js"></script> -->
< script src = "https://cdn.bootcss.com/mdui/0.4.2/js/mdui.min.js" > < / script >
<!-- <script src="html2canvas.min.js"></script> -->
< script src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js" > < / script >
< script src = "avatarURL.js" > < / script >
< script src = "fuckWechat.js" > < / script >
< script >
2019-03-01 16:14:11 +08:00
function clearMultiImage() {
for (var i = 1; i < = 9; i++) {
document.getElementById('image' + i).style.backgroundImage = '';
}
}
//设置界面显示
document.getElementById('configTypeText').onclick = function () {
document.getElementById('configWebsite').style.display = 'none';
document.getElementById('configSingleImage').style.display = 'none';
document.getElementById('configMultiImage').style.display = 'none';
document.getElementById('article').style.display = 'none';
document.getElementById('singleImage').style.display = 'none';
document.getElementById('multiImage').style.display = 'none';
}
document.getElementById('configTypeWebsite').onclick = function () {
document.getElementById('configWebsite').style.display = 'block';
document.getElementById('configSingleImage').style.display = 'none';
document.getElementById('configMultiImage').style.display = 'none';
document.getElementById('article').style.display = 'flex';
document.getElementById('singleImage').style.display = 'none';
document.getElementById('multiImage').style.display = 'none';
}
document.getElementById('configTypeSingleImage').onclick = function () {
document.getElementById('configWebsite').style.display = 'none';
document.getElementById('configSingleImage').style.display = 'block';
document.getElementById('configMultiImage').style.display = 'none';
document.getElementById('article').style.display = 'none';
document.getElementById('singleImage').style.display = 'block';
document.getElementById('multiImage').style.display = 'none';
}
document.getElementById('configTypeMultiImage').onclick = function () {
document.getElementById('configWebsite').style.display = 'none';
document.getElementById('configSingleImage').style.display = 'none';
document.getElementById('configMultiImage').style.display = 'block';
document.getElementById('article').style.display = 'none';
document.getElementById('singleImage').style.display = 'none';
document.getElementById('multiImage').style.display = 'block';
}
2019-01-26 21:33:27 +08:00
//设初始值
document.getElementById('configDate').valueAsDate = new Date();
document.getElementById('configTimeHour').value = (new Date()).getHours();
document.getElementById('configTimeMinute').value = (new Date()).getMinutes();
document.getElementById('configLike').value = Math.floor(20 * Math.random());
//检验数值是否合法
document.getElementById('configTimeHour').addEventListener('input', function () {
if (document.getElementById('configTimeHour').value > 23) {
document.getElementById('configTimeHour').value = 23;
} else if (document.getElementById('configTimeHour').value < 0 ) {
document.getElementById('configTimeHour').value = 0;
}
})
document.getElementById('configTimeMinute').addEventListener('input', function () {
if (document.getElementById('configTimeMinute').value > 59) {
document.getElementById('configTimeMinute').value = 59;
} else if (document.getElementById('configTimeMinute').value < 0 ) {
document.getElementById('configTimeMinute').value = 0;
}
})
document.getElementById('configLike').addEventListener('input', function () {
if (document.getElementById('configLike').value < 0 ) {
document.getElementById('configLike').value = 0;
}
})
//上传图片
document.getElementById('configAvatar').addEventListener('change', function () {
2019-01-26 21:59:33 +08:00
document.getElementById('avatar').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
2019-01-26 21:33:27 +08:00
});
document.getElementById('configArticleIcon').addEventListener('change', function () {
document.getElementById('articleIcon').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
2019-03-01 16:14:11 +08:00
document.getElementById('configSetSingleImage').addEventListener('change', function () {
var reader = new FileReader;
reader.readAsDataURL(this.files[0]);
reader.onload = function () {
document.getElementById('image').src = this.result;
}
});
document.getElementById('configSetMultiImage1').addEventListener('change', function () {
document.getElementById('image1').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage2').addEventListener('change', function () {
document.getElementById('image2').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage3').addEventListener('change', function () {
document.getElementById('image3').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage4').addEventListener('change', function () {
document.getElementById('image4').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage5').addEventListener('change', function () {
document.getElementById('image5').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage6').addEventListener('change', function () {
document.getElementById('image6').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage7').addEventListener('change', function () {
document.getElementById('image7').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage8').addEventListener('change', function () {
document.getElementById('image8').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
document.getElementById('configSetMultiImage9').addEventListener('change', function () {
document.getElementById('image9').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")';
});
2019-01-26 21:33:27 +08:00
document.getElementById('generate').addEventListener('click', function () {
//设置生成的图片上的各种属性
document.getElementById('name').innerText = document.getElementById('configName').value;
document.getElementById('text').innerText = document.getElementById('configText').value;
document.getElementById('articleTitle').innerText = document.getElementById('configArticleTitle').value;
2019-03-01 16:14:11 +08:00
if (document.getElementById('configLocation').value == '') {
document.getElementById('location').style.display = 'none';
} else {
document.getElementById('location').style.display = 'inline';
document.getElementById('location').innerText = document.getElementById('configLocation').value;
}
//九宫格模式设定
if (document.getElementById('configTypeMultiImage').checked) {
for (var i = 1; i < = 9; i++) {
document.getElementById('image' + i).style.display = 'inline-block';
}
var multiImageCount = 0;
for (multiImageCount = 9; multiImageCount >= 1; multiImageCount--) {
if (document.getElementById('image' + multiImageCount).style.backgroundImage != '') {
break;
}
}
//四张图的修正
if (multiImageCount == 4) {
document.getElementById('image5').style.backgroundImage = document.getElementById('image4').style.backgroundImage;
document.getElementById('image4').style.backgroundImage = document.getElementById('image3').style.backgroundImage;
document.getElementById('image3').style.backgroundImage = '';
multiImageCount = 5;
}
for (var i = multiImageCount + 1; i < = 9; i++) {
console.log(i);
document.getElementById('image' + i).style.display = 'none';
}
}
2019-01-26 21:33:27 +08:00
//设置时间
var configDate = document.getElementById('configDate').valueAsDate;
configDate.setHours(document.getElementById('configTimeHour').value);
configDate.setMinutes(document.getElementById('configTimeMinute').value);
var date = new Date();
date.setSeconds(0);
date.setMilliseconds(0);
var diff = date.getTime() - configDate.getTime();
if (diff > 0 & & diff < 60 * 60 * 1000 ) {
document.getElementById('time').innerText = Math.floor(diff / (60 * 1000)) + '分钟前';
} else if (diff > 0 & & diff < 60 * 60 * 24 * 1000 ) {
document.getElementById('time').innerText = Math.floor(diff / (60 * 60 * 1000)) + '小时前';
} else {
document.getElementById('time').innerText = configDate.getFullYear() + '年' + (configDate.getMonth() + 1) + '月' + configDate.getDate() + '日 ' + ((configDate.getHours() < 10 ) ? ( ' 0 ' + configDate . getHours ( ) ) : configDate . getHours ( ) ) + ' : ' + ( ( configDate . getMinutes ( ) < 10 ) ? ( ' 0 ' + configDate . getMinutes ( ) ) : configDate . getMinutes ( ) ) ;
}
document.getElementById('topBarTime').innerText = ((date.getHours() < 10 ) ? ( ' 0 ' + date . getHours ( ) ) : date . getHours ( ) ) + ' : ' + ( ( date . getMinutes ( ) < 10 ) ? ( ' 0 ' + date . getMinutes ( ) ) : date . getMinutes ( ) ) ;
if (document.getElementById('configApp') != '') {
document.getElementById('time').innerText += ' ' + document.getElementById('configApp').value;
}
//加入点赞头像
var avatar = document.getElementsByClassName('likeAvatar');
var avatarSource = avatarURL.concat();
var avatarUsedIndex = 0;
document.getElementById('likeAvatarList').innerHTML = '';
for (var i = 0; i < document.getElementById ( ' configLike ' ) . value ; i + + ) {
if (avatarSource.length < = 0) {
avatarSource = avatarURL.concat();
}
avatarUsedIndex = Math.floor(Math.random() * avatarSource.length);
var div = document.createElement('div');
div.setAttribute('class', 'likeAvatar squareImage');
div.setAttribute('style', 'background-image: url(\"' + avatarSource[avatarUsedIndex] + '\");');
document.getElementById('likeAvatarList').appendChild(div);
avatarSource.splice(avatarUsedIndex, 1)
}
//显示用于生成图片的div
document.getElementById('fakeWechatMoment').style.display = 'block';
document.getElementById('fakeWechatMoment').style.width = '1080px';
document.getElementById('fakeWechatMoment').style.height = '';
document.getElementById('fakeWechatMoment').style.height = ((window.getComputedStyle(document.getElementById('fakeWechatMoment')).height.replace('px', '') > 1920) ? window.getComputedStyle(document.getElementById('fakeWechatMoment')).height.replace('px', '') : 1920) + 'px';
//点赞数为0时隐藏点赞区
if (document.getElementById('configLike').value < = 0) {
document.getElementById('triangle').style.display = 'none';
document.getElementById('like').style.display = 'none';
} else {
document.getElementById('triangle').style.display = 'block';
document.getElementById('like').style.display = 'block';
}
//修正底部位置
var offset = Number(window.getComputedStyle(document.getElementById('topBar')).height.replace('px', '')) + Number(window.getComputedStyle(document.getElementById('header')).height.replace('px', '')) + Number(window.getComputedStyle(document.getElementById('main')).height.replace('px', ''));
document.getElementById('footer').style.bottom = ((offset < 1920 - Number ( window . getComputedStyle ( document . getElementById ( ' footer ' ) ) . height . replace ( ' px ' , ' ' ) ) ) ? ( -1920 + Number ( window . getComputedStyle ( document . getElementById ( ' footer ' ) ) . height . replace ( ' px ' , ' ' ) ) + offset ) : 0 ) + ' px ' ;
//按钮上的提示
document.getElementById('generate').setAttribute('disabled', '');
document.getElementById('generate').innerText = '生成中...'
var option = {
useCORS: true,
scale: 1
}
html2canvas(document.getElementById('fakeWechatMoment'), option).then(function (canvas) {
var dURL = canvas.toDataURL();
document.getElementById('generated').src = dURL;
document.getElementById('save').setAttribute('href', dURL);
document.getElementById('save').setAttribute('download', (new Date()).getTime() + '.png');
(new mdui.Dialog(document.getElementById('generatedPopup'))).open();
document.getElementById('fakeWechatMoment').style.display = 'none';
document.getElementById('generate').removeAttribute('disabled');
document.getElementById('generate').innerText = '生成'
});
});
< / script >
< / body >
2019-02-19 22:16:50 +08:00
< / html >
