Initial commit
@@ -0,0 +1,192 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>国庆头像生成 - 彩虹工具网</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="keywords" content="国庆头像生成,彩虹工具网,在线工具箱">
|
||||
<meta name="description" content="国庆专属头像生成,告白祖国,快来一起换头像">
|
||||
<style>
|
||||
a:link {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#export {
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px
|
||||
}
|
||||
|
||||
.operation-btns .o-btn1 {
|
||||
background-size: 11.6rem 4.325rem
|
||||
}
|
||||
|
||||
.operation-btns .o-btn2 {
|
||||
background-size: 11.6rem 3.75rem
|
||||
}
|
||||
|
||||
center {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./static/css/jqery.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<img src="" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;">
|
||||
<div class="operation-header">
|
||||
<div class="h-title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation-box">
|
||||
<a class="prev" onclick="changeHat()"></a>
|
||||
<div class="operation-img">
|
||||
<div class="cropper-content" id="content">
|
||||
<canvas class="" id="cvs"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<a class="next" onclick="changeHat()"></a>
|
||||
</div>
|
||||
<img id="export" alt="国庆专属头像" src="">
|
||||
<div class="operation-btns">
|
||||
<a class="o-btn1">
|
||||
<input class="o-btn1" id="upload" type="file" onchange="viewer()" style="opacity: 0;">
|
||||
</a>
|
||||
<a class="o-btn2" onclick="exportFunc()" style="display: none;">
|
||||
</a>
|
||||
</div>
|
||||
<div class="operation-done">
|
||||
<img src="./logo.png" alt="" class="act-done-happy">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: none">
|
||||
<img id="img" src="" alt="">
|
||||
<img class="hide" id="hat0" src="./static/img/hat1.png">
|
||||
<img class="hide" id="hat1" src="./static/img/hat2.png">
|
||||
<img class="hide" id="hat2" src="./static/img/hat3.png">
|
||||
<img class="hide" id="hat3" src="./static/img/hat4.png">
|
||||
<img class="hide" id="hat4" src="./static/img/hat5.png">
|
||||
<img class="hide" id="hat5" src="./static/img/hat6.png">
|
||||
<img class="hide" id="hat6" src="./static/img/hat7.png">
|
||||
<img class="hide" id="hat7" src="./static/img/hat8.png">
|
||||
<img class="hide" id="hat8" src="./static/img/hat9.png">
|
||||
<img class="hide" id="hat9" src="./static/img/hat10.png">
|
||||
<img class="hide" id="hat10" src="./static/img/hat11.png">
|
||||
<img class="hide" id="hat11" src="./static/img/hat12.png">
|
||||
<img class="hide" id="hat12" src="./static/img/hat13.png">
|
||||
<img class="hide" id="hat13" src="./static/img/hat14.png">
|
||||
<img class="hide" id="hat14" src="./static/img/hat15.png">
|
||||
<img class="hide" id="hat15" src="./static/img/hat16.png">
|
||||
<img class="hide" id="hat16" src="./static/img/hat17.png">
|
||||
<img class="hide" id="hat17" src="./static/img/hat18.png">
|
||||
<img class="hide" id="hat18" src="./static/img/hat19.png">
|
||||
<img class="hide" id="hat19" src="./static/img/hat20.png">
|
||||
<img class="hide" id="hat20" src="./static/img/hat21.png">
|
||||
<img class="hide" id="hat21" src="./static/img/hat22.png">
|
||||
<img class="hide" id="hat22" src="./static/img/hat23.png">
|
||||
<img class="hide" id="hat23" src="./static/img/hat24.png">
|
||||
<img class="hide" id="hat24" src="./static/img/hat25.png">
|
||||
</div>
|
||||
<script src="./static/js/fabric.min.js"></script>
|
||||
<script>
|
||||
const cvs = document.getElementById("cvs");
|
||||
const ctx = cvs.getContext("2d");
|
||||
const exportImage = document.getElementById("export");
|
||||
const img = document.getElementById("img");
|
||||
let hat = "hat1";
|
||||
let canvasFabric;
|
||||
let hatInstance;
|
||||
//var screenWidth = window.screen.width < 500 ? window.screen.width : 300;
|
||||
const scrollHeight = document.getElementById("content").scrollHeight;
|
||||
|
||||
function viewer() {
|
||||
const file = document.getElementById("upload").files[0];
|
||||
const reader = new FileReader;
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function (e) {
|
||||
img.src = reader.result;
|
||||
img.onload = function () {
|
||||
img2Cvs(img)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
img.src = ""
|
||||
}
|
||||
}
|
||||
|
||||
function img2Cvs(img) {
|
||||
cvs.width = img.width;
|
||||
cvs.height = img.height;
|
||||
cvs.style.display = "block";
|
||||
canvasFabric = new fabric.Canvas("cvs", {
|
||||
width: scrollHeight,
|
||||
height: scrollHeight,
|
||||
backgroundImage: new fabric.Image(img, {
|
||||
scaleX: scrollHeight / img.width,
|
||||
scaleY: scrollHeight / img.height
|
||||
})
|
||||
});
|
||||
changeHat();
|
||||
|
||||
document.getElementsByClassName("o-btn1")[0].style.display = "none";
|
||||
document.getElementsByClassName("o-btn2")[0].style.display = "block";
|
||||
//document.getElementById("tip").style.opacity = 1
|
||||
}
|
||||
|
||||
function changeHat() {
|
||||
document.getElementById(hat).style.display = "none";
|
||||
const hats = document.getElementsByClassName("hide");
|
||||
hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length ;
|
||||
const hatImage = document.getElementById(hat);
|
||||
hatImage.style.display = "block";
|
||||
if (hatInstance) {
|
||||
canvasFabric.remove(hatInstance)
|
||||
}
|
||||
hatInstance = new fabric.Image(hatImage, {
|
||||
top: 0,
|
||||
left: 0,
|
||||
scaleX: scrollHeight / hatImage.width,
|
||||
scaleY: scrollHeight / hatImage.height,
|
||||
cornerColor: "#0b3a42",
|
||||
cornerStrokeColor: "#fff",
|
||||
cornerStyle: "circle",
|
||||
transparentCorners: false,
|
||||
rotatingPointOffset: 30
|
||||
});
|
||||
hatInstance.setControlVisible("bl", false);
|
||||
hatInstance.setControlVisible("tr", false);
|
||||
hatInstance.setControlVisible("tl", false);
|
||||
hatInstance.setControlVisible("mr", false);
|
||||
hatInstance.setControlVisible("mt", false);
|
||||
canvasFabric.add(hatInstance)
|
||||
}
|
||||
|
||||
function exportFunc() {
|
||||
document.getElementsByClassName("operation-box")[0].style.display = "none";
|
||||
document.getElementsByClassName("operation-btns")[0].style.display = "none";
|
||||
|
||||
/*document.getElementById("exportBtn").style.display = "none";
|
||||
document.getElementById("tip").innerHTML = "长按图片保存或分享";
|
||||
document.getElementById("change").style.display = "none";*/
|
||||
cvs.style.display = "none";
|
||||
exportImage.style.display = "block";
|
||||
exportImage.src = canvasFabric.toDataURL({
|
||||
width: scrollHeight,
|
||||
height: scrollHeight
|
||||
});
|
||||
alert('长按图片保存或分享');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes right-top{0%{-webkit-transform:translate3d(.25rem,-.25rem,0);transform:translate3d(.25rem,-.25rem,0)}50%{-webkit-transform:translate3d(.5rem,-1rem,0);transform:translate3d(.5rem,-1rem,0)}to{-webkit-transform:translate3d(.25rem,-.25rem,0);transform:translate3d(.25rem,-.25rem,0)}}@keyframes right-top{0%{-webkit-transform:translate3d(.25rem,-.25rem,0);transform:translate3d(.25rem,-.25rem,0)}50%{-webkit-transform:translate3d(.5rem,-1rem,0);transform:translate3d(.5rem,-1rem,0)}to{-webkit-transform:translate3d(.25rem,-.25rem,0);transform:translate3d(.25rem,-.25rem,0)}}.right-top{-webkit-animation-name:right-top;animation-name:right-top;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes left-btm{0%{-webkit-transform:translate3d(-.25rem,.25rem,0) rotate(180deg);transform:translate3d(-.25rem,.25rem,0) rotate(180deg)}50%{-webkit-transform:translate3d(-.5rem,1rem,0) rotate(180deg);transform:translate3d(-.5rem,1rem,0) rotate(180deg)}to{-webkit-transform:translate3d(-.25rem,.25rem,0) rotate(180deg);transform:translate3d(-.25rem,.25rem,0) rotate(180deg)}}@keyframes left-btm{0%{-webkit-transform:translate3d(-.25rem,.25rem,0) rotate(180deg);transform:translate3d(-.25rem,.25rem,0) rotate(180deg)}50%{-webkit-transform:translate3d(-.5rem,1rem,0) rotate(180deg);transform:translate3d(-.5rem,1rem,0) rotate(180deg)}to{-webkit-transform:translate3d(-.25rem,.25rem,0) rotate(180deg);transform:translate3d(-.25rem,.25rem,0) rotate(180deg)}}.left-btm{-webkit-animation-name:left-btm;animation-name:left-btm;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}article,body,div,h1,h2,h3,html,i,img,p,section,span{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body,html{font-size:16px;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,STHeiti,Microsoft YaHei,Microsoft JhengHei,Source Han Sans SC,Noto Sans CJK SC,Source Han Sans CN,Noto Sans SC,Source Han Sans TC,Noto Sans CJK TC,WenQuanYi Micro Hei,SimSun,sans-serif;background-color:#fff}.icon{display:inline-block}.txt-ellipsis{display:block;white-space:nowrap}.txt-ellipsis,.txt-ellipsis-two{text-overflow:ellipsis;overflow:hidden}.txt-ellipsis-two{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:break-all}.flex-hcenter{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.flex-hcenter,.flex-vcenter{display:-webkit-box;display:-ms-flexbox;display:flex}.flex-vcenter{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.g-vcenter{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.g-hcenter{-webkit-transform:translateX(-50%);transform:translateX(-50%)}.g-center,.g-hcenter{position:absolute;left:50%}.g-center{top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.g-flex-center{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.center,.g-flex-center,.long-press,.long-press .l-img,.long-press .l-tips,.operation-box,.operation-btns,.operation-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#app,body,html{min-height:100%;width:100%;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.wrapper{position:relative;overflow-x:hidden;width:100%;min-height:100vh;max-width:500px;margin:0 auto;background-image:url(../img/20190829-bg.png);background-repeat:no-repeat;background-size:cover}.operation-number{margin-top:.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:#fff;font-size:14px}.operation-number span{display:inline-block;padding:1px 5px;border-radius:25px;background-color:#ea4727;color:#feee92}.operation-header{margin-top:1.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.operation-header div{background-size:contain;background-repeat:no-repeat}.operation-header .h-logo{text-align:center}.operation-header .h-logo img{height:1.5rem}.operation-header .h-title{margin-top:.5rem;width:13.125rem;height:6.3rem;background-image:url(../img/20190906-logo2.png)}.operation-header .h-slogan{margin-top:.125rem;width:9.35rem;height:1.05rem;background-image:url(../img/20190906-logo3.png)}.operation-box{margin-top:.5rem}.operation-box .next,.operation-box .prev{background-image:url(../img/20190829-btn.png);background-size:contain;border-radius:50%;width:2.275rem;height:2.275rem}.operation-box .prev{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.operation-box .operation-img{margin:0 .75rem;background:#fff;border:.25rem solid #fbe6b5;border-radius:.75rem;font-size:0}.operation-box .operation-img .cropper-content{border-radius:.5rem;position:relative;width:9.5rem;height:9.5rem;margin-left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);overflow:hidden}.operation-box .operation-img .cropper-content .vue-cropper{background:#d8d8d8}.operation-btns{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:.75rem}.operation-btns .o-btn{background-size:100% 100%}.operation-btns .o-btn1{width:11.6rem;height:3.325rem;background-image:url(../img/btn1.png)}.operation-btns .o-btn2{position:relative;width:11.6rem;height:3.75rem;background-image:url(../img/save-btn.png)}.operation-btns .o-btn3{width:11.625rem;height:3.75rem;background-image:url(../img/btn3.png)}.operation-tips{text-align:center}.operation-tips p{background-image:radial-gradient(circle at 7% 0,#fff,#feff74);font-size:14px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:1.7px;text-align:center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.operation-logo{text-align:center}.operation-logo img{height:1rem}.operation-done{text-align:center}.operation-done .act-done-text{margin:1.25rem 0 2rem;height:.75rem}.operation-done .act-done-happy{margin-bottom:2.5rem;height:5.15rem}@media screen and (min-height:600px){.operation-box{margin-top:1rem;margin-bottom:1rem}}@media screen and (min-height:700px){.operation-box{margin-top:1.5rem;margin-bottom:1.5rem}.operation-btns{margin-bottom:.5rem}.operation-header .h-logo{margin-top:.75rem}.operation-header .h-title{margin-top:1rem}}.cropper-drag-box{position:relative;z-index:9999999}.frame-image{position:absolute;right:0;bottom:0;z-index:999;width:100%;height:100%}.van-popup{background-color:hsla(0,0%,100%,0)}.long-press{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:12.975rem;height:16.25rem;background-image:url(../img/20190829-longpress.svg);background-size:cover}.long-press .l-img{width:100%;height:13.375rem}.long-press .l-img img{width:10.7rem;height:10.7rem}.long-press .l-tips{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1rem;font-weight:700}.first-tips{position:relative;margin-top:18.25rem;margin-left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);width:4.575rem;height:6.975rem}.first-tips .center-bg{position:absolute;left:0;top:0;width:4.575rem;height:6.975rem;background-size:contain}.first-tips .top-arrow{right:0;top:0}.first-tips .bottom-arrow,.first-tips .top-arrow{position:absolute;width:.825rem;height:px22rem(41)}.first-tips .bottom-arrow{left:0;bottom:0}.first-text{color:#fff;font-size:20px;text-align:center}.cropper-box-canvas{width:132px;height:132px;-webkit-transform:scale(1.43939) translate3d(20.1474px,20.1474px,0) rotate(0deg);transform:scale(1.43939) translate3d(20.1474px,20.1474px,0) rotate(0deg)}.cropper-box-canvas img{width:100%}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .5s;transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}
|
||||
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 960 B |
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="519" height="650" viewBox="0 0 519 650">
|
||||
<defs>
|
||||
<path id="b" d="M35 532.669h452"/>
|
||||
<filter id="a" width="103.8%" height="900%" x="-1.8%" y="-316.6%" filterUnits="objectBoundingBox">
|
||||
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="shadowSpreadOuter1"/>
|
||||
<feOffset dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
|
||||
<feMorphology in="SourceAlpha" radius="2" result="shadowInner"/>
|
||||
<feOffset dy="2" in="shadowInner" result="shadowInner"/>
|
||||
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
|
||||
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#FFF" d="M519 556.95V615c0 19.33-15.67 35-35 35H35c-19.33 0-35-15.67-35-35v-58.005c11.643-.254 21-9.333 21-20.495s-9.357-20.241-21-20.495V35C0 15.67 15.67 0 35 0h449c19.33 0 35 15.67 35 35v481.05c-11.174.733-20 9.609-20 20.45s8.826 19.717 20 20.45z"/>
|
||||
<g stroke-dasharray="3,17" stroke-linecap="round">
|
||||
<use fill="#000" filter="url(#a)" xlink:href="#b"/>
|
||||
<use stroke="#F9B0B5" stroke-opacity=".368" stroke-width="4" xlink:href="#b"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 507 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 31 KiB |