Felix-sec/WechatMomentScreenshot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加评论的随机用户名和视频号转发效果

Browse Source
This commit is contained in:
✨小透明・宸✨
2021-12-07 19:29:52 +08:00
parent 2d0f999245
commit 565427a6be
4 changed files with 86 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -11,7 +11,7 @@
* 将源代码或生成的截图有偿售卖
* 以 **“关注○○，发送○○获取工具地址”** 等方式为自己的公众号**引流**（想要推荐的话，在正文里留下地址或二维码之类的就没问题～）
不接受定制请求，有功能请求可以添加 Issue，如果建议合理的话我可能就会添加～
不接受定制请求，~~有功能请求可以添加 Issue，如果建议合理的话我可能就会添加～~~我怎么能写出这么乱的代码……**因为自己改起来都费劲，所以不会再加新功能了。**
似乎是由于有广告机滥用 GitHub Pages 和 git.io 发广告，所有 git.io 短链接已获得微信的“绿色网站认证”。~~如果你需要在微信中使用，请使用完整链接 https://transparentlc.github.io/WechatMomentScreenshot~~ Yattaze！这个工具也已经荣获微信的“认证”啦！(　\^ω\^) 当然我更建议你抵制或尽量减少使用这类**正在制造“墙中墙”的 APP**。
@@ -62,6 +62,10 @@
<summary>点击展开</summary>
#### 2021.12.7
添加评论的时候可以使用随机的用户名和头像了。另外还加了一些功能以模拟转发视频号的效果。
#### 2021.10.6
可以将正文中以 # 开头的朋友圈话题和 URL 以蓝色显示了。

2
index.html
View File

File diff suppressed because one or more lines are too long

55
index.src.html
View File

@@ -40,7 +40,7 @@
<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="javascript: document.getElementById('configAvatar').click();">选择头像</button>
<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>
@@ -86,21 +86,24 @@
</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>
<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="javascript: getArticleInfo();">自动获取公众号文章标题/封面图</button>
<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" 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>
<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>
@@ -108,43 +111,43 @@
<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>
<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="javascript: document.getElementById('configSetMultiImage2').click();">上传图片 2</button>
<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="javascript: document.getElementById('configSetMultiImage3').click();">上传图片 3</button>
<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="javascript: document.getElementById('configSetMultiImage4').click();">上传图片 4</button>
<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="javascript: document.getElementById('configSetMultiImage5').click();">上传图片 5</button>
<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="javascript: document.getElementById('configSetMultiImage6').click();">上传图片 6</button>
<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="javascript: document.getElementById('configSetMultiImage7').click();">上传图片 7</button>
<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="javascript: document.getElementById('configSetMultiImage8').click();">上传图片 8</button>
<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="javascript: document.getElementById('configSetMultiImage9').click();">上传图片 9</button>
<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="javascript: clearMultiImage();">清空所有图片</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="clearMultiImage();">清空所有图片</button>
</div>
</div>
</div>
@@ -153,6 +156,11 @@
<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>
@@ -191,7 +199,7 @@
<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="javascript: document.getElementById('configHeight').value = Math.round(document.body.clientHeight / document.body.clientWidth * 1080);">自动设定</button>
<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>
@@ -224,7 +232,7 @@
</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>
<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>
@@ -366,12 +374,13 @@
<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="javascript: document.getElementById('configCommentAvatar').click();">上传头像</button>
<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>
@@ -403,7 +412,7 @@
</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="if (typeof (document.getElementById('configCommentAvatar').files[0]) == 'undefined') { 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, document.getElementById('configCommentReply').value); }">OK</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>
@@ -481,7 +490,7 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/combine/npm/mdui@1/dist/js/mdui.min.js,npm/html2canvas@1/dist/html2canvas.min.js,gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script>
<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/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> -->

52
main.js
View File

@@ -204,6 +204,47 @@ function emoticonReplace(text) {
return text;
}
//生成随机姓名，数据来自于faker.js
//https://github.com/Marak/faker.js/blob/master/lib/locales/zh_CN/name/index.js
function randomName() {
var firstName = ["王","李","张","刘","陈","杨","黄","吴","赵","周","徐","孙","马","朱","胡","林","郭","何","高","罗","郑","梁","谢","宋","唐","许","邓","冯","韩","曹","曾","彭","萧","蔡","潘","田","董","袁","于","余","叶","蒋","杜","苏","魏","程","吕","丁","沈","任","姚","卢","傅","钟","姜","崔","谭","廖","范","汪","陆","金","石","戴","贾","韦","夏","邱","方","侯","邹","熊","孟","秦","白","江","阎","薛","尹","段","雷","黎","史","龙","陶","贺","顾","毛","郝","龚","邵","万","钱","严","赖","覃","洪","武","莫","孔"];
var lastName = ["绍齐","博文","梓晨","胤祥","瑞霖","明哲","天翊","凯瑞","健雄","耀杰","潇然","子涵","越彬","钰轩","智辉","致远","俊驰","雨泽","烨磊","晟睿","文昊","修洁","黎昕","远航","旭尧","鸿涛","伟祺","荣轩","越泽","浩宇","瑾瑜","皓轩","擎苍","擎宇","志泽","子轩","睿渊","弘文","哲瀚","雨泽","楷瑞","建辉","晋鹏","天磊","绍辉","泽洋","鑫磊","鹏煊","昊强","伟宸","博超","君浩","子骞","鹏涛","炎彬","鹤轩","越彬","风华","靖琪","明辉","伟诚","明轩","健柏","修杰","志泽","弘文","峻熙","嘉懿","煜城","懿轩","烨伟","苑博","伟泽","熠彤","鸿煊","博涛","烨霖","烨华","煜祺","智宸","正豪","昊然","明杰","立诚","立轩","立辉","峻熙","弘文","熠彤","鸿煊","烨霖","哲瀚","鑫鹏","昊天","思聪","展鹏","笑愚","志强","炫明","雪松","思源","智渊","思淼","晓啸","天宇","浩然","文轩","鹭洋","振家","乐驹","晓博","文博","昊焱","立果","金鑫","锦程","嘉熙","鹏飞","子默","思远","浩轩","语堂","聪健","明","文","果","思","鹏","驰","涛","琪","浩","航","彬"];
return firstName[Math.floor(Math.random() * firstName.length)] + lastName[Math.floor(Math.random() * lastName.length)];
}
//在已选择的单张图片上添加播放视频的图标
function addPlayIcon() {
Promise.all([
new Promise(resolve => {
var img = new Image;
img.crossOrigin = 'anonymous';
img.onload = function () { resolve(img); };
img.src = document.getElementById('image').src;
}),
new Promise(resolve => {
var img = new Image;
img.onload = function () { resolve(img); };
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAZlBMVEUAAAAAAADV1dX19fX4+Pj8/PzNzc2goKBAQEDy8vLLy8u/v7/d3d1qamrr6+vw8PDk5OTd3d3n5+eKiorW1tbw8PDt7e3h4eHm5uba2trq6ur09PTn5+exsbHl5eXi4uLj4+P///+1KpiJAAAAIXRSTlMzAJnY5fIUZkDJjYBKTZvMsqWNWSa6rFuOS7/Ie3NrNkgRMr3KAAAD0UlEQVR42uSX2ZaqMBBFq0EyGcBGRtuh+f+fvHRKBG3xUlTwpc+DspaS7JzUkMDHEonvY1ZqnbZOqdZldvwWi4YiA4iq1lH7VJGuKxIFHcAmYfsfhYnF//oHqMqonaWorPwD5MmmJWiT5V4BbPFodBoEUsoYOsXdQxCkj5tTWG8Ajb5b3MFIeCppDnc26cYLgB1Pn5o9vNTehGMEywbIv0a+GwUzpMYMXzkLQGRDaO9imK14NyRMJpYD2M1t440CklQwvGuXAiS3IbawQNsbQiKWAFzC3vxAwSKpIOqj50IHOPcv7xQsltr1izhTAZLefQksyU2/DSQA0Ve+TwVMqc++Mor5ACK8GncCDzpF10AQ8wCG+cMYvCgOe4J5APn1/zvwpt00AUyu34BHmUkCmJp/C161nSIAxvwMgmmAgjY/naB4DZBQ56cTJK8AzvT56QTnaYBLRI9/ei5ElykAERLyn1EPwimABH+GFYVLTJ4DWDQohhUV4ybbZwACG+cJVtUJm7x4ApBh/4WVhd05+w2QI5qClaXQ6PwXAJ7/JawuifeFRwBLy0B+LtoHAO0yQMEbpFwm6HuAxlEF8BYFbrLmDkBTI5Afh3oMYOk9iN+V7AigcAbA2+QsKAaAnBEBjCjIbwAZLQWk8pMI2Q1gQynC2wgvTPxasOkBKmfIzC6493JljN0o1RWgpBwDguHWyD4YlFcAtyGGAsA3wbiwQwAsAooCwDdBYSlwAAnuABEATWDuQeIA3KOhAfBNMG7ZPwDCjbSnAfBNwGwSHUCFZZgKMJjAKcdVB1D/PByWA7ThHpbo0HaqPwA7sWEALOwiBnsyYBWQVAC+CRIrAWAMAhmAbwJGITRuBWwANIEehQ0cf75SOgDfhLTtdIQa36UC8E3AkWoo+QCDAjJACRqTgA2ASmNiGmjPAG1kqAApA4BngsTwx+OYR4A22lKOZYCf/gAIhq4HEPx5gH/d20EKwjAURVGsGThScdj9L1Twg5MqNDTJ+WlXUGia/Lx3b80n8IuQ/4Z8I+JbMT+M+HHMB5LPSFbcSOaHUj6W+4sJv5rxyym/nvOAIiKah4locoRUPKbzQSWPaiOsfrqw+nJHcX2ewoJXNr60GlzbRXOZq7jk1e3I8nqNFZCtvvcAA0c4PMTCMZ4RINPtL8gUzyiUKy3M5nE+DzR6pNNDrRzr7QQ2LzvB5niDjmj3HHC7x/u94OAVj2aSy/qVXObTfJqKTg1Ur+WI6jWv7OZ1v43weK0VHs+gfP6UXstWei3dpNdYC69a7fds4nMG9TuD/N5B/38D8Sl28Qj+OSkAAAAASUVORK5CYII';
}),
])
.then(function (/** @type {HTMLImageElement[]} */ imgs) {
var sourceImg = imgs[0];
var playIcon = imgs[1];
var canvas = document.createElement('canvas');
canvas.width = sourceImg.width
canvas.height = sourceImg.height
var ctx = canvas.getContext('2d');
ctx.drawImage(sourceImg, 0, 0)
ctx.drawImage(playIcon, sourceImg.width / 2 - canvas.width / 4 / 2, sourceImg.height / 2 - canvas.width / 4 / 2, canvas.width / 4, canvas.width / 4);
canvas.toBlob(function (blob) {
URL.revokeObjectURL(document.getElementById('image').src);
document.getElementById('image').src = URL.createObjectURL(blob);
console.log(URL.createObjectURL(blob));
mdui.snackbar('已添加视频播放图标');
});
})
}
//设置界面显示
document.getElementById('configTypeText').onclick = function () {
document.getElementById('configWebsite').style.display = 'none';
@@ -409,15 +450,18 @@ document.getElementById('generate').addEventListener('click', function () {
configScreenshotDate.setHours(document.getElementById('configScreenshotTimeHour').value);
configScreenshotDate.setMinutes(document.getElementById('configScreenshotTimeMinute').value);
document.getElementById('time').innerText = getTimeString(configScreenshotDate, configPostDate);
document.getElementById('time').innerHTML = getTimeString(configScreenshotDate, configPostDate);
document.getElementById('topBarTime').innerText = ((document.getElementById('configScreenshotTimeHour').value < 10) ? ('0' + document.getElementById('configScreenshotTimeHour').value) : document.getElementById('configScreenshotTimeHour').value) + ':' + ((document.getElementById('configScreenshotTimeMinute').value < 10) ? ('0' + document.getElementById('configScreenshotTimeMinute').value) : document.getElementById('configScreenshotTimeMinute').value);
if (document.getElementById('configApp') != '') {
document.getElementById('time').innerText += ' ' + document.getElementById('configApp').value;
if (document.getElementById('configApp')) {
if (document.getElementById('configApp').value.match(/视频号 *· *(.+)/g)) {
document.getElementById('time').innerHTML += ' <span style="color:#576b95">视频号 · ' + /视频号 *· *(.+)/g.exec(document.getElementById('configApp').value)[1] + '</span>';
} else {
document.getElementById('time').innerHTML += ' ' + document.getElementById('configApp').value;
}
}
//加入点赞头像
var avatar = document.getElementsByClassName('likeAvatar');
var avatarSource = avatarURL.concat();
var avatarUsed;
document.getElementById('likeAvatarList').innerHTML = '';