From f50e2d6617103e1edaaa23ac6228aaa689321274 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: Sat, 20 Jun 2020 01:12:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8localStorage=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 ++++++++++++ fuckWechat.js | 2 +- index.html | 2 +- index.src.html | 19 +++++++------- main.js | 69 ++++++++++++++++++++++++++++++++++++++++++-------- 5 files changed, 87 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index d820267..6e468ce 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,22 @@ 点击展开 +#### 2020.6.20 + +生成截图的时候将会把一些设置使用 localStorage 保存，下次打开小工具的时候就不需要重新设置一遍了～ + +将会保存以下设置： + +* 用户名 +* 头像（但是不要选择文件大小很大的头像啊……） +* 正文 +* 定位 +* 转发出处 +* 图片长度 +* 使用 7.0 以上版本白色界面 +* 显示 APP 图标 +* 随机信号和电量 + #### 2020.5.26 由于自己的服务器用了 Cloudflare 的免费 CDN，然而最近分配到的 IPv4 地址被墙了，所以后端（在墙内）不能用了…… diff --git a/fuckWechat.js b/fuckWechat.js index 4cb01e9..799ccb5 100644 --- a/fuckWechat.js +++ b/fuckWechat.js @@ -3,7 +3,7 @@ div.setAttribute('id', 'fuckWechat'); document.querySelector('.mdui-appbar').style.filter = 'blur(2px)'; document.querySelector('.mdui-container').style.filter = 'blur(2px)'; - div.style.cssText = 'position:fixed;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:18px;font-size:16px;line-height:1.5em;background-color:rgba(255,255,255,.8);z-index:2147483647;display:flex;justify-content:center;align-items:center' + div.style.cssText = 'position:fixed;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:18px;font-size:16px;line-height:1.5em;background-color:rgba(255,255,255,.9);z-index:2147483647;display:flex;justify-content:center;align-items:center' div.innerHTML = '' + '
' + '

(　^ω^)

' diff --git a/index.html b/index.html index a7453e3..39f1213 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -朋友圈转发截图生成工具
朋友圈转发截图生成工具
info_outline
#用户名评论内容时间
 删除
 
© 2020 ✨小透明・宸✨
添加评论
生成完毕| ω・`)
如果点击“保存”没有反应
请尝试长按/右键图片进行另存为操作(　ﾟ 3ﾟ)
保存
关于

这个小工具是什么？

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

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

不同手机的界面总是有那么一点区别的，要和真正的截图完全一样……我也很难办啊！（摊手）

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

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

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

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

开源就是好

\ No newline at end of file +朋友圈转发截图生成工具
朋友圈转发截图生成工具
info_outline
#用户名评论内容时间
 删除
 
© 2020 ✨小透明・宸✨
添加评论
生成完毕| ω・`)

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

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

保存
关于

这个小工具是什么？

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

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

不同手机的界面总是有那么一点区别的，要和真正的截图完全一样……我也很难办啊！（摊手）

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

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

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

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

开源就是好

\ No newline at end of file diff --git a/index.src.html b/index.src.html index b527567..f4e8a49 100644 --- a/index.src.html +++ b/index.src.html @@ -33,20 +33,20 @@
- +
- +
- +
@@ -257,7 +257,7 @@
@@ -267,6 +267,7 @@ +
@@ -287,7 +288,7 @@
-
+
@@ -398,9 +399,8 @@
- 如果点击“保存”没有反应 -
- 请尝试长按/右键图片进行另存为操作(　ﾟ 3ﾟ) +

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

+

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

保存 @@ -468,6 +468,7 @@ - + + \ No newline at end of file diff --git a/main.js b/main.js index 722ec93..c290250 100644 --- a/main.js +++ b/main.js @@ -39,6 +39,37 @@ xhrGet('https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/avatarU var emoticon = []; xhrGet('https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/emoticon.json', function (result) { emoticon = JSON.parse(result) }); +// 读取配置 +var configDefault = { + name: 'A 营销号免费广告姬', + text: '很实用的教程[微笑]\n需要收集五个赞 谢谢大家啦～(　^ω^)', + location: '', + app: '', + height: 1920, + uiWhite: false, + appIcon: false, + statusIcon: true, +}; +var config; +var avatarFile; +try { + config = JSON.parse(localStorage.getItem('config')) || {}; +} catch (error) { + config = {}; +} +for (var k in configDefault) { + if (config[k] === undefined) config[k] = configDefault[k]; +} +document.getElementById('configName').value = config.name; +document.getElementById('configText').value = config.text; +document.getElementById('configLocation').value = config.location; +document.getElementById('configApp').value = config.app; +document.getElementById('configHeight').value = config.height; +document.getElementById('configUIWhite').checked = config.uiWhite; +document.getElementById('configTopBarAppIcons').checked = config.appIcon; +document.getElementById('configTopBarStatusIcons').checked = config.statusIcon; +document.getElementById('avatar').style.backgroundImage = 'url(' + (localStorage.getItem('avatar') || 'https://ae01.alicdn.com/kf/HTB1yE4fMmzqK1RjSZFp761kSXXal.png') + ')'; + //输入微信文章的链接，通过后端自动获取文章标题和文章封面 function getArticleInfo() { var requestDialog = new mdui.Dialog('#request'); @@ -244,23 +275,20 @@ document.getElementById('configLike').addEventListener('input', function () { //上传图片 document.getElementById('configAvatar').addEventListener('change', function () { - document.getElementById('avatar').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")'; + avatarFile = this.files[0]; + document.getElementById('avatar').style.backgroundImage = 'url(\"' + URL.createObjectURL(avatarFile) + '\")'; }); document.getElementById('configArticleIcon').addEventListener('change', function () { - document.getElementById('articleIcon').style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")'; + document.getElementById('articleIcon').style.backgroundImage = 'url(\"' + URL.createObjectURL(this.files[0]) + '\")'; }); 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('image').src = URL.createObjectURL(this.files[0]); }); for (var i = 1; i <= 9; i++) { !function (i) { document.getElementById('configSetMultiImage' + i).addEventListener('change', function () { - document.getElementById('image' + i).style.backgroundImage = 'url(\"' + window.URL.createObjectURL(this.files[0]) + '\")'; + document.getElementById('image' + i).style.backgroundImage = 'url(\"' + URL.createObjectURL(this.files[0]) + '\")'; }); }(i); } @@ -423,11 +451,32 @@ document.getElementById('generate').addEventListener('click', function () { var dURL = canvas.toDataURL(); document.getElementById('generated').src = dURL; document.getElementById('save').setAttribute('href', dURL); - document.getElementById('save').setAttribute('download', (new Date()).getTime() + '.png'); + document.getElementById('save').setAttribute('download', (+new Date) + '.png'); (new mdui.Dialog(document.getElementById('generatedPopup'))).open(); // document.getElementById('fakeWechatMoment').style.display = 'none'; document.getElementById('generate').removeAttribute('disabled'); - document.getElementById('generate').innerText = '生成' + document.getElementById('generate').innerText = '生成'; + + // 保存配置 + var config = { + name: document.getElementById('configName').value, + text: document.getElementById('configText').value, + location: document.getElementById('configLocation').value, + app: document.getElementById('configApp').value, + height: parseInt(document.getElementById('configHeight').value), + uiWhite: document.getElementById('configUIWhite').checked, + appIcon: document.getElementById('configTopBarAppIcons').checked, + statusIcon: document.getElementById('configTopBarStatusIcons').checked, + }; + localStorage.setItem('config', JSON.stringify(config)); + + if (avatarFile) { + var reader = new FileReader; + reader.readAsDataURL(avatarFile); + reader.onload = function () { + localStorage.setItem('avatar', this.result); + }; + } }); }); \ No newline at end of file