Pornhub 图标生成器
昨天顺手撸了一个Pornhub图标生成器,觉得还挺有意思的,所以把代码贴上来。
技术很菜,这个也很简单,使用了bootstrap和html2canvas两个项目,html2canvas可以在以下地址获得:
原理很简单,利用html2canvas来对对应位置的div进行截图,然后保存到本地,然后做了一些可以调整字体大小、背景颜色、图片大小的设置。下面直接贴代码。
首先是目录结构
Code: index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="PornHub图标生成器" > <meta name="description" content="PornHub图标生成器" > <title>PornHub图标生成器-清渭技术小站</title> <link href="favicon.ico" rel="shortcut icon"> <link href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css" rel="stylesheet"> <link href="public/css/style.css" rel="stylesheet" /> </head> <body> <div class="container"> <h1><span class="porn-title">Porn</span><span class="hub-title">hub</span> 图标生成器</h1> <hr> <div class="alert alert-secondary alert-dismissable fade show" style="font-size: 90%;"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>使用方法:</strong> 选择文字大小以及背景颜色(背景色不建议使用#FFFFFF和#FF9900),然后点击图中文字输入你想要的文字,最后下载保存。 </div> <p></p> <p></p> <div class="row"> <div class="col-md-2"> <label for="Size">文字大小</label> <select class="form-control" id="Size" onchange="resize()"> <option value="80px">80px</option> <option value="90px">90px</option> <option value="100px">100px</option> <option value="120px">120px</option> <option value="125px" selected="">125px</option> <option value="130px">130px</option> <option value="140px">140px</option> <option value="150px">150px</option> </select> </div> <div class="col-md-2"> <label for="Bgcolor">背景颜色</label> <input type="text" value="#000000" id="Bgcolor" class="form-control" onchange="changeBgColor(this)"> </div> <div class="col-md-2"> <label for="Quality">输出质量</label> <select class="form-control" id="Quality" onchange="changeQuality()"> <option value="1" selected>原图</option> <option value="0.8">高等</option> <option value="0.5">中等</option> <option value="0.3">低等</option> </select> </div> <div class="col-md-2"> <label for="download"> </label> <button type="submit" class="btn btn-primary dl-button form-control" id="download" onClick="grabCanvas()" id="download"> Download </button> </div> </div> <p></p> </div> <div class="flexcontainer"> <div class="hub" id="pornhub"> <span id="porntext" style="color:white" contenteditable="true">Porn</span> <span id="hubtext" contenteditable="true">hub</span> </div> </div> <div class="footer container"> <hr> <p>PornHub图标生成器 <span style="color:#965556;">♥</span> Copyright 2018 <a href="https://www.qingwei.tech">清渭技术小站</a> . All Rights Reserved.</p> </div> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script> <script src="public/js/html2canvas.min.js"></script> <script src="public/js/custom.js"></script> </body> </html>
Code: style.css
body{ background-color: #8897A6 !important; color:#EDEBEB; } a{ color:#EDEBEB; text-decoration: none; } a:hover{ color:#A27F7F; } .container { margin-top: 35px } .orbit-spinner, .orbit-spinner * { box-sizing: border-box; } .orbit-spinner { height: 55px; width: 55px; border-radius: 50%; perspective: 800px; } .orbit-spinner .orbit { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } .orbit-spinner .orbit:nth-child(1) { left: 0%; top: 0%; animation: orbit-spinner-orbit-one-animation 1200ms linear infinite; border-bottom: 3px solid #fd7e14; } .orbit-spinner .orbit:nth-child(2) { right: 0%; top: 0%; animation: orbit-spinner-orbit-two-animation 1200ms linear infinite; border-right: 3px solid #fd7e14; } .orbit-spinner .orbit:nth-child(3) { right: 0%; bottom: 0%; animation: orbit-spinner-orbit-three-animation 1200ms linear infinite; border-top: 3px solid #fd7e14; } @keyframes orbit-spinner-orbit-one-animation { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes orbit-spinner-orbit-two-animation { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes orbit-spinner-orbit-three-animation { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } .hollow-dots-spinner, .hollow-dots-spinner * { box-sizing: border-box; } .hollow-dots-spinner { height: 15px; width: calc(30px * 3); } .hollow-dots-spinner .dot { width: 15px; height: 15px; margin: 0 calc(15px / 2); border: calc(15px / 5) solid #fd7e14; border-radius: 50%; float: left; transform: scale(0); animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms; } .hollow-dots-spinner .dot:nth-child(1) { animation-delay: calc(300ms * 1); } .hollow-dots-spinner .dot:nth-child(2) { animation-delay: calc(300ms * 2); } .hollow-dots-spinner .dot:nth-child(3) { animation-delay: calc(300ms * 3); } @keyframes hollow-dots-spinner-animation { 50% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } } .hub { width:1110px; height:624px; text-align: center; font-family: sans-serif; font-weight: bold; background: #000000; } .hub span:nth-child(2) { background: #FF9900; color: #000000; border-radius: 1vw; padding: 0 1vw 0 1vw; display: inline-block; } #pornhub{ display: flex; align-items: center; justify-content: center; } .flexcontainer { display: flex; align-items: center; justify-content: center; } .porn-title{ color: white !important; } .hub-title{ color: #000000 !important; background-color: #FF9900 !important; border-radius: 10%; } .dl-button{ background-color: #656565; border-color: #656565; } .dl-button:hover{ background-color: #505050; border-color: #505050; } .footer{ text-align: center; font-size: 90%; } @media (min-width: 576px) { .hub { max-width: 510px; max-height: 510px; } #porntext, #hubtext { font-size: 80px; } } @media (min-width: 768px) { .hub { max-width: 690px; } #porntext, #hubtext { font-size: 100px; } } @media (min-width: 992px) { .hub { max-width: 930px; } #porntext, #hubtext { font-size: 100px; } } @media (min-width: 1200px) { .hub { max-width: 1110px; } #porntext, #hubtext { font-size: 125px; } }
Code: custom.js
/*!
* custom.js <https://www.qingwei.tech>
* Pornhub图标生成器-清渭技术小站<https://www.qingwei.tech>
*/
window.onresize = resizes;
var porn = document.getElementById("pornhub");
var pornDivWidth = porn.clientWidth || porn.offsetWidth;
var pornDivHeight = porn.clientHeight || porn.offsetHeight;
var pornFontSize = parseFloat($("#porntext").css('fontSize'));
function changeQuality(){
// 调整图片比例
var Quality = parseFloat(document.getElementById("Quality").value);
var newWidth = pornDivWidth * Quality;// DIV宽比例缩小
var newHeight = pornDivHeight * Quality;// DIV 高比例缩小
var newPornSize= pornFontSize * Quality;// 字体比例缩小
porn.style.width=newWidth+'px';
porn.style.height=newHeight+'px';
document.getElementById("porntext").style.fontSize = newPornSize+"px";
document.getElementById("hubtext").style.fontSize = newPornSize+"px";
}
function resize() {
var x = document.getElementById("Size").value;
pornFontSize = parseFloat(x);// 这里实际调整了字体大小,为了后面等比例缩放,这个值要更新一次
document.getElementById("porntext").style.fontSize = x;
document.getElementById("hubtext").style.fontSize = x;
changeQuality();// 之所以要调用是因为存在先缩小比例再调整字体大小的问题,为了图片协调这里一律按比例缩放
}
function resizes() {
// 根据浏览器大小调整字体大小
var width = document.body.clientWidth;
if (width >= 576 && width < 768) {
document.getElementById("porntext").style.fontSize = "80px";
document.getElementById("hubtext").style.fontSize = "80px";
document.getElementById("Size").options[0].selected = true;
}
if (width >= 768 && width < 1200) {
document.getElementById("porntext").style.fontSize = "100px";
document.getElementById("hubtext").style.fontSize = "100px";
document.getElementById("Size").options[2].selected = true;
}
if (width >= 1200) {
document.getElementById("porntext").style.fontSize = "125px";
document.getElementById("hubtext").style.fontSize = "125px";
document.getElementById("Size").options[4].selected = true;
}
}
function grabCanvas() {
// 生成图片
html2canvas(document.querySelector("#pornhub")).then(canvas => {
download(canvas, 'download.png');
});
}
function download(canvas, filename) {
var lnk = document.createElement('a'), e;
lnk.download = filename;
lnk.href = canvas.toDataURL("image/png;base64");
if (document.createEvent) {
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false,
false, 0, null);
lnk.dispatchEvent(e);
} else if (lnk.fireEvent) {
lnk.fireEvent("onclick");
}
}
function changeBgColor(c) {
// 更改背景颜色
pornhub=document.getElementById("pornhub");
pornhub.style.backgroundColor = c.value;
}
$(function () {
$('#Bgcolor').colorpicker();
});
放一张生成的图片
效果可以在这里预览 Pornhub 图标生成器:https://www.qingwei.tech/somehub/
代码文件打包下载:
[download title="网盘下载"]https://u17089064.pipipan.com/fs/17089064-319020609[/download]
喜欢这篇文章的话可以扫描下方二维码支持我
版权声明:
作者:Kiwi
链接:https://www.qingwei.tech/programe-develops/1231.html
来源:清渭技术小站
文章版权归作者所有,未经允许请勿转载。
THE END
二维码
妈妈易妈妈网
谢谢站长 学习了 🙂
xing
来看看,因为,总能学到东西!
无崖子
有点意思,能不能输出透明背景的呢,这样拿去P图更方便
Kiwi@无崖子
后续迭代下?