加入彩蛋的保存按钮
This commit is contained in:
parent
62de261e98
commit
4b8e788e97
10
multi.html
10
multi.html
|
|
@ -796,14 +796,14 @@ var formation = new Formation(teamsCount,5);
|
|||
<div class="attrs-div"><!--属性-->
|
||||
<label class="monster">
|
||||
<input type="file" accept="image/*" id="avatar-select" />
|
||||
<div class="custom-avatar"></div>
|
||||
<canvas class="custom-avatar" width="100" height="100"></canvas>
|
||||
<div class="attrs">
|
||||
<div class="attr"></div>
|
||||
<div class="attr"></div>
|
||||
<div class="attr"></div>
|
||||
</div>
|
||||
</label>
|
||||
<ul class="attr-list attr-list-1">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -812,7 +812,7 @@ var formation = new Formation(teamsCount,5);
|
|||
<li><input type="radio" name="attr-1" class="attr-radio" value="0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
|
||||
</ul>
|
||||
<ul class="attr-list attr-list-2">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -821,7 +821,7 @@ var formation = new Formation(teamsCount,5);
|
|||
<li><input type="radio" name="attr-2" class="attr-radio" value="0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
|
||||
</ul>
|
||||
<ul class="attr-list attr-list-3">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -830,7 +830,7 @@ var formation = new Formation(teamsCount,5);
|
|||
<li><input type="radio" name="attr-3" class="attr-radio" value="0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
|
||||
</ul>
|
||||
<div class="options"><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
|
||||
<div class="options"><button id="avatar-save" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
|
||||
</div>
|
||||
<div class="types-div"><!--类型-->
|
||||
<ul class="type-list">
|
||||
|
|
|
|||
35
script.js
35
script.js
|
|
@ -3504,13 +3504,38 @@ function initialize() {
|
|||
//可以自行打开图片设定头像的彩蛋
|
||||
const avatarSelect = attrPreview.querySelector("#avatar-select");
|
||||
const customAvatar = attrPreview.querySelector(".custom-avatar");
|
||||
avatarSelect.onchange = function(event){
|
||||
let fileUrlmatch = /url\("(blob:.+?)"\)/.exec(customAvatar.style.backgroundImage);
|
||||
if (fileUrlmatch?.[1]) URL.revokeObjectURL(fileUrlmatch[1]); //如果找到旧的blob网址，就删除
|
||||
avatarSelect.onchange = async function(event){
|
||||
|
||||
let img = await createImageBitmap(event.target.files[0]);
|
||||
|
||||
let fileUrl = URL.createObjectURL(this.files[0]);
|
||||
customAvatar.style.backgroundImage = `url(${fileUrl})`;
|
||||
customAvatar.style.backgroundImage = `none`;
|
||||
const ctx = customAvatar.getContext("2d");
|
||||
let imgScale = Math.max(customAvatar.offsetWidth / img.width, customAvatar.offsetHeight / img.height);
|
||||
//清空画布
|
||||
ctx.clearRect(0, 0, customAvatar.offsetWidth, customAvatar.offsetHeight);
|
||||
//保持比例居中填充画图
|
||||
ctx.drawImage(img,
|
||||
-(img.width * imgScale - customAvatar.offsetWidth) / 2,
|
||||
-(img.height * imgScale - customAvatar.offsetHeight) / 2,
|
||||
img.width * imgScale,
|
||||
img.height * imgScale
|
||||
);
|
||||
img.close();
|
||||
btnCustomAvatarSave.classList.remove(className_displayNone);
|
||||
};
|
||||
const btnCustomAvatarSave = searchBox.querySelector(".attrs-div #avatar-save");
|
||||
btnCustomAvatarSave.onclick = function(event) {
|
||||
const downLink = controlBox.querySelector(".down-capture");
|
||||
html2canvas(attrPreview, {backgroundColor: null}).then(canvas => {
|
||||
canvas.toBlob(function(blob) {
|
||||
window.URL.revokeObjectURL(downLink.href);
|
||||
downLink.href = URL.createObjectURL(blob);
|
||||
downLink.download = `custom-avatar.png`;
|
||||
downLink.click();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function s_types_onchange(){
|
||||
const newClassName = `type-killer-${this.value}`;
|
||||
|
|
|
|||
|
|
@ -11523,7 +11523,7 @@ const cachesMap = new Map([
|
|||
],
|
||||
[
|
||||
"multi.html",
|
||||
"d4ea0f7a22e42cd35bf2ee803884f59b"
|
||||
"e78a3826c15caf874b6e988de4e36fca"
|
||||
],
|
||||
[
|
||||
"script-custom_elements.js",
|
||||
|
|
@ -11543,11 +11543,11 @@ const cachesMap = new Map([
|
|||
],
|
||||
[
|
||||
"script.js",
|
||||
"b21c8e4dfbc65b3553e5cb00a8d94f6f"
|
||||
"4343f2d266951e67d12f507e49a2cc2e"
|
||||
],
|
||||
[
|
||||
"solo.html",
|
||||
"6420486982262c8d2b32faa581fa10e9"
|
||||
"fc534488791e3bfe54b53fba022facd0"
|
||||
],
|
||||
[
|
||||
"style-monsterimages.css",
|
||||
|
|
@ -11555,7 +11555,7 @@ const cachesMap = new Map([
|
|||
],
|
||||
[
|
||||
"style.css",
|
||||
"8e09f4adfba107cb104aaba7e109c89c"
|
||||
"4ffe954bedfaf3a2a185b98e1ffbb971"
|
||||
],
|
||||
[
|
||||
"temp.js",
|
||||
|
|
@ -11563,7 +11563,7 @@ const cachesMap = new Map([
|
|||
],
|
||||
[
|
||||
"triple.html",
|
||||
"fb5368a1802eff84a96e0d96ab23d1f3"
|
||||
"7c18057f20e9bfbbfa0256e3b707f825"
|
||||
],
|
||||
[
|
||||
"languages/en.css",
|
||||
|
|
|
|||
10
solo.html
10
solo.html
|
|
@ -631,14 +631,14 @@ var formation = new Formation(teamsCount,6);
|
|||
<div class="attrs-div"><!--属性-->
|
||||
<label class="monster" for="avatar-select">
|
||||
<input type="file" accept="image/*" id="avatar-select" />
|
||||
<div class="custom-avatar"></div>
|
||||
<canvas class="custom-avatar" width="100" height="100"></canvas>
|
||||
<div class="attrs">
|
||||
<div class="attr"></div>
|
||||
<div class="attr"></div>
|
||||
<div class="attr"></div>
|
||||
</div>
|
||||
</label>
|
||||
<ul class="attr-list attr-list-1">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -647,7 +647,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<li><input type="radio" name="attr-1" class="attr-radio" value="0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
|
||||
</ul>
|
||||
<ul class="attr-list attr-list-2">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -656,7 +656,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<li><input type="radio" name="attr-2" class="attr-radio" value="0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
|
||||
</ul>
|
||||
<ul class="attr-list attr-list-3">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -665,7 +665,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<li><input type="radio" name="attr-3" class="attr-radio" value="0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
|
||||
</ul>
|
||||
<div class="options"><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
|
||||
<div class="options"><button id="avatar-save" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
|
||||
</div>
|
||||
<div class="types-div"><!--类型-->
|
||||
<ul class="type-list">
|
||||
|
|
|
|||
11
style.css
11
style.css
|
|
@ -1626,6 +1626,7 @@ icon.inflicts::after
|
|||
grid-row: 1 / 4;
|
||||
}
|
||||
.search-box .attrs-div .monster .custom-avatar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -1660,15 +1661,7 @@ icon.inflicts::after
|
|||
margin-right: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
/*.search-box .attrs-div-div .attr-list-1::before{
|
||||
content: "属性1";
|
||||
}
|
||||
.search-box .attrs-div-div .attr-list-2::before{
|
||||
content: "属性2";
|
||||
}
|
||||
.search-box .attrs-div-div .fix-main-color-label::after{
|
||||
content: "限制属性1为主属性，属性2为副属性";
|
||||
}*/
|
||||
|
||||
.attr-radio,
|
||||
.attr-check,
|
||||
.type-check,
|
||||
|
|
|
|||
10
triple.html
10
triple.html
|
|
@ -1717,14 +1717,14 @@ var formation = new Formation(teamsCount,6);
|
|||
<div class="attrs-div"><!--属性-->
|
||||
<label class="monster">
|
||||
<input type="file" accept="image/*" id="avatar-select" />
|
||||
<div class="custom-avatar"></div>
|
||||
<canvas class="custom-avatar" width="100" height="100"></canvas>
|
||||
<div class="attrs">
|
||||
<div class="attr"></div>
|
||||
<div class="attr"></div>
|
||||
<div class="attr"></div>
|
||||
</div>
|
||||
</label>
|
||||
<ul class="attr-list attr-list-1">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -1733,7 +1733,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<li><input type="radio" name="attr-1" class="attr-radio" value="0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-1" class="attr-radio" value="1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
|
||||
</ul>
|
||||
<ul class="attr-list attr-list-2">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -1742,7 +1742,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<li><input type="radio" name="attr-2" class="attr-radio" value="0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-2" class="attr-radio" value="1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
|
||||
</ul>
|
||||
<ul class="attr-list attr-list-3">
|
||||
<ul class="attr-list">
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
|
||||
|
|
@ -1751,7 +1751,7 @@ var formation = new Formation(teamsCount,6);
|
|||
<li><input type="radio" name="attr-3" class="attr-radio" value="0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
|
||||
<li><input type="radio" name="attr-3" class="attr-radio" value="1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
|
||||
</ul>
|
||||
<div class="options"><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
|
||||
<div class="options"><button id="avatar-save" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"></label></div>
|
||||
</div>
|
||||
<div class="types-div"><!--类型-->
|
||||
<ul class="type-list">
|
||||
|
|
|
|||
Loading…
Reference in New Issue