0%

「情系宝一」网站制作

几天前在 GitHub 上看到了一个有意思的项目,功能是从本地上传一个图片,网站会在这个图片上加入一个固定的图案,相当于一个水印。原作者制作这个网站是为了生成高考加油的头像。距离我参加高考已经过去两年的时间了,每逢高考,有些同学就会把头像换成给一中考生加油的头像。不知道原头像是谁设计的,样式有些单一,我便想改一改原有的样式。由于目前对网页设计的学习还不是很深入,我参考了原项目的代码,加上了一些个人的修改,制作出了「情系宝一」的头像生成网站。

功能介绍

先来看看整体的样子:

网站外观

具体的操作步骤:

  1. 点击「选择文件」,从本地选择任意图片,最好是 1:1 比例的图片,而且图片不要太大。
  2. 点击「生成」,则会在下方生成添加 “宝一必胜” 水印的图片。
  3. 总共有 12 种颜色供用户选择,挑选喜欢的颜色,图片上的水印即可更换为对应颜色。
  4. 右键点击图片,选择「图片另存为」,保存图片到本地。

具体设计

网站图标

直接引入我的博客网站图标。

1
2
<link rel="shortcut icon" href="https://www.guanqr.com/images/favicon-200x200.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.guanqr.com/images/apple-touch-icon.png">

字体

主要用到了三种字体,标题汉字使用的是 Ma Shan Zheng,正文汉字使用的是 Noto Serif SC,英文使用的是 EB Garamond。这三种字体的实现是通过在<head>中引入 Google Fonts。由于国内对 Google 的域名访问速度有些慢,使用的是烧饼博客提供的镜像loli.net

1
2
<link href="https://fonts.loli.net/css?family=EB+Garamond:400,400i,500,700,700i|Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet">
<link href="https://fonts.loli.net/css?family=Ma+Shan+Zheng&display=swap&subset=chinese-simplified" rel="stylesheet">

浏览统计

为了进行网站浏览量的统计,使用了 Google Analytics

1
2
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-140800645-1"></script>

水印制作

水印图像并不是采用png格式的图像,而是svg格式。

由于刚接触到这一些领域,对svg格式的图像制作还不是很了解,走了很多弯路。后来通过自己摸索,突然觉悟,可以通过 Adobe Illustrator 制作图像。

具体怎么使用这个软件就不说了,绘制好的图像要转换成轮廓线,最后生成svg格式的图像即可。那么,怎么引入这个图像呢?

直接以文本文档的格式打开这个svg图像,我么可以看到其代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 618.4 618.4" style="enable-background:new 0 0 618.4 618.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M617.2,274.2c-1.4-15.2-4.7-30-8.6-44.6c-4.1-15.3-9.1-30.5-16.6-44.7c-4.6-8.7-6.7-18.4-12.2-26.6c-8.4-12.6-15.9-25.9-26.1-37.2c-5.7-6.3-9.8-13.8-15.8-19.9c-7.7-7.9-16.1-15-23.8-22.7c-6-6-12.7-11.1-19.2-16.4c-7.1-5.8-15.6-9.5-23-14.9c-11.3-8.2-24.3-13.6-36.6-20.1c-9.2-4.9-19.3-6.6-28.9-10c-7.3-2.6-14.6-5.2-22.2-7c-11.8-2.7-23.5-5.8-35.5-6.6c-9.1-0.6-17.7-3.8-26.8-3.5c-8.4,0.3-16.9,0.4-25.3-0.1c-7.9-0.4-15.2,2.8-22.9,3c-13,0.3-25.6,3.6-38,6.6c-14.1,3.4-27.7,9-41.7,12.9c-3.9,1.1-6.9,3.3-10.4,4.7c-5.9,2.5-11.7,5.4-17.4,8.4c-8.8,4.6-17.5,9.3-25.6,15.2c-7.1,5.1-15.1,8.8-21.7,14.8c-5.7,5.2-11.7,10-17.2,15.5C96.5,86.4,90,90.5,85,96.2c-6.3,7.2-12.8,14.3-18.6,21.9s-12,14.8-16.9,22.8c-6.6,10.9-13.6,21.5-18.7,33.4c-8.3,19.4-17,38.7-22.3,59.2s-9.1,41-8.4,62.2c0.1,4.8,0,9.7,0,16.8c0.6,11.7-0.6,25.7,1.8,39.8c2.8,16.4,6.1,32.6,11,48.5c5,16.2,12.5,31.4,19.1,46.9c5.8,13.5,14.2,25.2,22.1,37.3c4.3,6.7,10.3,12.3,14.5,18.9c4.3,6.8,10.3,12,15.1,18.3c3.7,4.8,9,8.5,13.6,12.6c6.9,6.1,13.5,12.7,20.8,18.3c11.8,9,24.4,16.7,37,24.5c19.8,12.3,41.3,20.7,63.4,27.4c13.6,4.1,27.6,7.7,41.9,9.4c12,1.5,23.8,4.8,36.2,3.9c7.3-0.5,14.7-0.1,22-0.1c10.1-0.1,20.1,0.2,30.1-1.9c15-3.1,30.1-5.5,44.8-9.7c10.2-2.9,20.1-6.5,30.1-9.7c13.5-4.3,25.8-11.5,38-18.6c11.3-6.6,22.4-13.6,33.1-21.1c11.9-8.3,22-18.7,32.5-28.5c8.2-7.6,15.8-16,22.5-25c6.1-8.3,12.6-16.3,18.6-24.7c9.4-13.3,16.4-27.8,23.1-42.6c6.5-14.3,12-29.1,16.5-44.2c5.4-18.4,9.7-37.4,10.1-56.7C618.3,315.1,619.1,294.7,617.2,274.2z M608,321.7c-0.9,19.3-3.6,38.4-8.2,57.2c-3,12.3-7.5,24.2-11.6,36.1c-0.2,0.7-0.2,1.4-0.8,1.9c-0.1,0.4-0.3,0.9-0.6,1.3c0,0,0,0,0,0c-2.2,6.5-5.2,12.7-7.3,19.3c-0.3,0.9-0.7,1.6-1.3,2.1c0.1,0.9-0.7,1.7-1.1,2.5c-5.7,11.4-12.9,21.9-19.8,32.6c-11.7,18.3-25.6,35.1-41.4,50c-16.4,15.4-34,29.2-53.6,40.5c-23,13.2-46.5,24.6-72.4,31c-15,3.8-30.2,6.9-45.5,9.2c-11.2,1.6-22.4,1.5-33.6,1.9c-21.7,0.8-42.9-2.1-64.2-6.5c-9.9-2-19.5-4.9-29.5-6.9c-8.3-1.7-16.2-5.7-24.1-9.2c-9.6-4.3-19-9-28.4-13.7c-0.3-0.1-0.6-0.3-0.9-0.5c-0.7-0.1-1.3-0.4-1.9-0.7c-0.9-0.3-1.8-0.7-2.6-1.1c-0.8-0.4-1.6-0.9-2.3-1.4c-0.2-0.1-0.4-0.2-0.6-0.4c-0.2-0.1-0.4-0.2-0.6-0.3c-0.3-0.2-0.7-0.3-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2c-0.1-0.1-0.2-0.2-0.3-0.3c-0.6-0.4-1.2-0.9-1.7-1.5c-3.1-1.8-5.7-4.2-8.6-6c-12.9-8.1-24.5-17.9-35.6-28.5c-7.9-7.6-16-15-23.4-23.2c-11.1-12.4-20.5-26-29.3-40.1c-6.3-10.1-12.7-20.1-17.1-31.2c-5.9-14.9-11.9-29.7-16.6-45c-4-13.4-6.9-27.1-8.7-41c-2.5-19.1-3.4-38.5-1.6-57.9c0.9-9.5,1.5-19,3.3-28.3c2.5-13.4,4.5-26.8,9.6-39.6c1.5-3.6,2-7.7,4-11.6c0.4-1.7,1.1-3.2,1.5-4.9c0.6-2.3,1.3-4.5,2.2-6.7c0.1-0.3,0.3-0.6,0.5-1c0.1-0.4,0.3-0.8,0.5-1.2c1.8-3.1,1.9-7.1,3.7-10.3c0-0.1,0-0.1,0-0.2c-0.1-0.1-0.1-0.1-0.1-0.2c7.6-16.9,16.9-33,27.7-48c9.2-13.2,19.5-25.6,30.9-37C110.4,86,126.8,71.8,145,60c10.4-6.6,21.1-12.6,32.2-18c13.6-7,27.8-12.7,42.5-16.9c12.4-3.5,24.8-6.4,37.4-9.1c8.6-1.8,17.3-1.6,25.8-3c10.4-1.7,20.7-1.9,31.1-1.8c13.2,0.1,26.2,2,39.2,3.9c21.7,3.2,43.1,8.6,63.7,16.1c15.7,5.7,30.3,13.8,44.7,22.4c8.2,4.9,16.2,10,24,15.5c9.3,6.7,18.2,14.1,26.5,22c5.7,5.4,11.2,10.9,16.8,16.4c4.4,4.3,8,9.1,11.9,13.8c7.7,9.3,14.4,19.3,21.1,29.4c7.4,11.2,14.4,22.8,19.5,35.3c6.1,15,12.3,30,16.3,45.7c3.8,14.9,7.4,30,8.7,45.6C607.4,291.9,608.7,306.8,608,321.7z"/>
<g>
<path class="st0" d="M159.1,131.9l84.7-26.1l11.1,35.9l-38,11.7l-6.3-20.4L77.9,173.8l6.3,20.4l-37.3,11.5l-11.1-35.9l84.7-26.1l-1.9-6.3l38.6-11.9L159.1,131.9z M277.3,278.4l19.5-6l4.8,15.5l-211.1,65l-4.8-15.5l86.9-26.8l-14.2-46l-86.9,26.8l-4.8-15.5l86.9-26.8l-12.6-40.9L54.2,235l-4.7-15.3l211.1-65l4.7,15.3l-86.9,26.8l12.6,40.9l86.9-26.8l4.8,15.5l-86.9,26.8l14.2,46l33.2-10.2l-10-32.6l34.1-10.5L277.3,278.4z"/>
<path class="st0" d="M494.9,117.3l4.7,15.3l-211.1,65l-4.7-15.3L494.9,117.3z"/>
</g>
<path class="st0" d="M51,180.4"/>
<g>
<path class="st0" d="M95.5,376.9l31-9.5l56.2,192.2l-31.2,9.6L95.5,376.9z M273.2,514l-4.1-16.4l-80.6,24.8l-48.9-159l31-9.5l44.2,143.5l50.5-15.6l-35.6-146.1l29-8.9l35.9,146.1l9.4-2.9l4.8,15.5l-10.3,3.2l8,32.2l-105.1,32.4l-4.8-15.5L273.2,514zM256.7,466l-30.3,9.3l-45.7-124.6l30.1-9.3L256.7,466z M361.8,504.5l-30.5,9.4l-61.6-190.5l30.3-9.3L361.8,504.5z"/>
<path class="st0" d="M318.3,308.4l98.2-30.2l58.6,190.2l-35.5,10.9l-19.3-62.7l-27.2,8.4l19.3,62.7l-35.5,10.9L318.3,308.4zM371,353.4l27.2-8.4l-12.4-40.4l-27.2,8.4L371,353.4z M388.3,409.5l27.2-8.4l-12.6-40.9l-27.2,8.4L388.3,409.5z M487.8,354.8L467,287.2l-37.5,11.5l-7.1-23.1l27.2-8.4l2.3,7.6l10.3-3.2l-2.3-7.6l33.7-10.4l2.4,7.6l34.1-10.5l4.8,15.5l-34.1,10.5l20.8,67.6l34.1-10.5l4.8,15.5l-34.1,10.5l21.1,68.5l34.1-10.5l4.8,15.5l-104,32l-4.8-15.5l36.2-11.1l-21.1-68.5l-36.2,11.1l-4.8-15.5L487.8,354.8z"/>
</g>
</g>
</svg>

在我们的网页源代码中,有引用svg的这一部分:

1
2
3
4
5
6
7
8
9
10
<div style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 618.4 618.4">
<defs>
<style>.cls-1{fill:#ffffff;}</style>
</defs>
<g>
<path class="cls-1" d="***"/>
</g>
</svg>
</div>

直接将其替换,然后将代码中的st0替换为cls-1即可。

网站背景

由于我尚未找到较好的校园大门图片,暂时以这个低画质的图片为背景。图片存放于阿里云 OSS,如果有好的照片请联系我更换,谢谢。

网站源码放在了 GitHub 仓库中,供读者参考。

关于该网站

  • 网站地址:https://omni.guanqr.com/qingxibaoyi 。为了管理方便,我计划今后把这类项目都放在 https://omni.guanqr.com 域名下。
  • 希望宝坻一中的同学们多多宣传这个网站。如果网站样式在设计上有什么不足之处,或者希望能生成什么样的水印,请积极提出,我会改进的。

本文结束啦感谢您阅读