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

使用localStorage保存设置

Browse Source
This commit is contained in:
✨小透明・宸✨
2020-06-20 01:12:17 +08:00
parent b99c0149b5
commit f50e2d6617
5 changed files with 87 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@@ -38,6 +38,22 @@
<summary>点击展开</summary>
#### 2020.6.20
生成截图的时候将会把一些设置使用 localStorage 保存，下次打开小工具的时候就不需要重新设置一遍了～
将会保存以下设置：
* 用户名
* 头像（但是不要选择文件大小很大的头像啊……）
* 正文
* 定位
* 转发出处
* 图片长度
* 使用 7.0 以上版本白色界面
* 显示 APP 图标
* 随机信号和电量
#### 2020.5.26
由于自己的服务器用了 Cloudflare 的免费 CDN，然而最近分配到的 IPv4 地址被墙了，所以后端（在墙内）不能用了……

2
fuckWechat.js
View File

@@ -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 = ''
+ '<div>'
+ '<h1>(　^ω^)</h1>'

2
index.html
View File

File diff suppressed because one or more lines are too long

19
index.src.html
View File

@@ -33,20 +33,20 @@
<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="A 营销号免费广告姬" />
<input id="configName" class="mdui-textfield-input" type="text" />
</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('configAvatar').click();">上传头像</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="javascript: 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 id="configText" class="mdui-textfield-input">很实用的教程[微笑]&#10;需要收集五个赞&nbsp;谢谢大家啦～(　^ω^)</textarea>
<textarea id="configText" class="mdui-textfield-input"></textarea>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">截图类型</label>
@@ -257,7 +257,7 @@
</div>
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons" checked />
<input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons" />
<i class="mdui-checkbox-icon"></i>
随机信号和电量
</label>
@@ -267,6 +267,7 @@
<button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block mdui-m-t-2">生成</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">
@@ -287,7 +288,7 @@
<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/HTB1yE4fMmzqK1RjSZFp761kSXXal.png);"></div>
<div id="avatar" class="avatarIn squareImage"></div>
</div>
<div class="content">
<div id="name" class="name"></div>
@@ -398,9 +399,8 @@
<img id="generated" />
<div class="mdui-typo-caption-opacity mdui-m-y-2">
如果点击“保存”没有反应
<br>
请尝试长按/右键图片进行另存为操作(　ﾟ 3ﾟ)
<p>如果点击“保存”没有反应<br>请尝试长按/右键图片进行另存为操作(　ﾟ 3ﾟ)</p>
<p>当前使用的头像与设置已保存到本地<br>下次打开本工具将自动读取～</p>
</div>
<div class="mdui-dialog-actions">
<a id="save" class="mdui-btn mdui-ripple">保存</a>
@@ -468,6 +468,7 @@
<script src="https://cdn.jsdelivr.net/npm/mdui/dist/js/mdui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script> -->
<script src="main.js"></script>
</body>
</html>

69
main.js
View File

@@ -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);
};
}
});
});