Pornhub 图标生成器

Kiwi • • 前端, 程序开发

昨天顺手撸了一个Pornhub图标生成器，觉得还挺有意思的，所以把代码贴上来。

技术很菜，这个也很简单，使用了bootstrap和html2canvas两个项目，html2canvas可以在以下地址获得：

https://github.com/niklasvh/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">&times;</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">&nbsp;</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;">&hearts;</span> Copyright 2018&nbsp;<a href="https://www.qingwei.tech">清渭技术小站</a>&nbsp;. 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]

喜欢这篇文章的话可以扫描下方二维码支持我  《MySQL优化SQL查询语句的30条建议》

版权声明：
作者：Kiwi
链接：https://www.qingwei.tech/programe-develops/1231.html
来源：清渭技术小站
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>