From 565427a6bef5baf231b0a47ac14e08b0447be6c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=9C=A8=E5=B0=8F=E9=80=8F=E6=98=8E=E3=83=BB=E5=AE=B8?= =?UTF-8?q?=E2=9C=A8?= <1272742391@qq.com> Date: Tue, 7 Dec 2021 19:29:52 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=84=E8=AE=BA=E7=9A=84?= =?UTF-8?q?=E9=9A=8F=E6=9C=BA=E7=94=A8=E6=88=B7=E5=90=8D=E5=92=8C=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E5=8F=B7=E8=BD=AC=E5=8F=91=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++++- index.html | 2 +- index.src.html | 55 +++++++++++++++++++++++++++++--------------------- main.js | 52 +++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 86 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index a70aedf..27f0f05 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ * 将源代码或生成的截图有偿售卖 * 以 **“关注○○，发送○○获取工具地址”** 等方式为自己的公众号**引流**（想要推荐的话，在正文里留下地址或二维码之类的就没问题～） -不接受定制请求，有功能请求可以添加 Issue，如果建议合理的话我可能就会添加～ +不接受定制请求，~~有功能请求可以添加 Issue，如果建议合理的话我可能就会添加～~~我怎么能写出这么乱的代码……**因为自己改起来都费劲，所以不会再加新功能了。** 似乎是由于有广告机滥用 GitHub Pages 和 git.io 发广告，所有 git.io 短链接已获得微信的“绿色网站认证”。~~如果你需要在微信中使用，请使用完整链接 https://transparentlc.github.io/WechatMomentScreenshot~~ Yattaze！这个工具也已经荣获微信的“认证”啦！(　\^ω\^) 当然我更建议你抵制或尽量减少使用这类**正在制造“墙中墙”的 APP**。 @@ -62,6 +62,10 @@ 点击展开 +#### 2021.12.7 + +添加评论的时候可以使用随机的用户名和头像了。另外还加了一些功能以模拟转发视频号的效果。 + #### 2021.10.6 可以将正文中以 # 开头的朋友圈话题和 URL 以蓝色显示了。 diff --git a/index.html b/index.html index f1bddc6..5abd7f6 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -朋友圈转发截图生成工具
朋友圈转发截图生成工具
info_outline
#用户名评论内容时间
 删除

© 2021 ✨小透明・宸✨
添加评论
生成完毕| ω・`)

如果点击“保存”没有反应
请尝试长按/右键图片进行另存为操作(　ﾟ 3ﾟ)

当前使用的头像与设置已保存到本地
下次打开本工具将自动读取～

保存
关于

这个小工具是什么？

一个因为不喜欢也不想往朋友圈发某些不得不发的废文而做出来的摸鱼产物。

为什么生成的截图和我在手机上截的不一样？能不能做出 iOS 的样式？

不同手机的界面总是有那么一点区别的，要和真正的截图完全一样……我也很难办啊！（摊手）
如果实在是很在意通知栏的样式的话，可以从自己的手机上截一个通知栏的图然后覆盖上去……

能不能生成纯文字/转发图片的截图？

懒得写样式，心情好的时候再加上～(*´ω`*)
已经可以生成啦～

生成图片后点击“保存”没有反应？

也可以试试长按图片手动另存为呢(　ﾟ 3ﾟ)

开源就是好

\ No newline at end of file +朋友圈转发截图生成工具
朋友圈转发截图生成工具
info_outline
设置为“视频号 · ○○○”时将以链接的浅蓝色显示
#用户名评论内容时间
 删除

© 2021 ✨小透明・宸✨
添加评论
默认的名字是随机生成的，未选择头像则会随机抽取一个头像。
生成完毕| ω・`)

如果点击“保存”没有反应
请尝试长按/右键图片进行另存为操作(　ﾟ 3ﾟ)

当前使用的头像与设置已保存到本地
下次打开本工具将自动读取～

保存
关于

这个小工具是什么？

一个因为不喜欢也不想往朋友圈发某些不得不发的废文而做出来的摸鱼产物。

为什么生成的截图和我在手机上截的不一样？能不能做出 iOS 的样式？

不同手机的界面总是有那么一点区别的，要和真正的截图完全一样……我也很难办啊！（摊手）
如果实在是很在意通知栏的样式的话，可以从自己的手机上截一个通知栏的图然后覆盖上去……

能不能生成纯文字/转发图片的截图？

懒得写样式，心情好的时候再加上～(*´ω`*)
已经可以生成啦～

生成图片后点击“保存”没有反应？

也可以试试长按图片手动另存为呢(　ﾟ 3ﾟ)

开源就是好

\ No newline at end of file diff --git a/index.src.html b/index.src.html index 862d085..81c0e88 100644 --- a/index.src.html +++ b/index.src.html @@ -40,7 +40,7 @@
- +
@@ -86,21 +86,24 @@
- +
- +
-
- - -
@@ -108,43 +111,43 @@
请按图片 1 - 9 的顺序添加图片～
如果只需要显示一张图片，建议选择“图片（单张）”。
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -153,6 +156,11 @@ +
+ + +
设置为“视频号 · ○○○”时将以链接的浅蓝色显示
+
@@ -191,7 +199,7 @@
- +
@@ -224,7 +232,7 @@
- +
@@ -366,12 +374,13 @@
+
默认的名字是随机生成的，未选择头像则会随机抽取一个头像。
- +
@@ -403,7 +412,7 @@
- +
@@ -481,7 +490,7 @@ - + diff --git a/main.js b/main.js index 84eaf76..8f87963 100644 --- a/main.js +++ b/main.js @@ -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 += ' 视频号 · ' + /视频号 *· *(.+)/g.exec(document.getElementById('configApp').value)[1] + ''; + } else { + document.getElementById('time').innerHTML += ' ' + document.getElementById('configApp').value; + } } //加入点赞头像 - var avatar = document.getElementsByClassName('likeAvatar'); var avatarSource = avatarURL.concat(); var avatarUsed; document.getElementById('likeAvatarList').innerHTML = '';