手写工具，定制博客封面

作者：周棋洛，一个热爱动漫，热爱技术的大学生

内容：写博客的时候，选择封面，有些时候就很纠结，不如手写一个工具，解决这个问题，由于作者没有学习canvas等技术，所以使用了最笨的截屏方式，文章最后也会将截屏软件分享给大家，好耶！

---

点击进入

先来看看最终的实现效果吧

这里的代码很简单，就是布局和图标费点功夫，所以我就讲讲我认为比较重要的几个点吧

1.自定义字体
小伙伴可能看到了，我的字体是手写体的，这就是使用css的自定义字体

•᷄ࡇ• 先准备好想使用的字体，可以去网上找，有很多免费好看的字体，比如 字体天下 这个网站
•᷄ࡇ• 在css引入和使用自定义字体

引入

@font-face{
    font-family: "myFont";
    src: url(../font/AiNiChuanYueRenHai-2.ttf);
}

使用

font-family: myFont;

---

2.css变量
css变量，会使得css代码更优雅，更易于维护，大型项目推荐使用，这里也使用了，非常简单

•᷄ࡇ• 变量定义

在root中通过 --加变量名：变量值来定义css变量

:root {
    --size: 80px;
    --font-color: #69F
}

•᷄ࡇ• 使用css变量

通过var关键字里面放入–加变量名就可以了

font-size: var(--size);

•᷄ࡇ• js 获取css变量

getComputedStyle(document.documentElement).getPropertyValue('--size'

•᷄ࡇ• js 修改css变量

document.documentElement.style.setProperty('--size', 新值);

---

3.Vue.js

由于这个小工具借助了Vue前端框架，如果小伙伴要学习Vue.js也可以看我之前写的Vue相关笔记

Vue框架专栏

---

完成之后，就可以自定义了，再配合截图软件 Snipaste 就可以快乐的定制博客封面了

snipaste是一款简单便捷的截图软件。snipaste截图软件为用户提供了高效的截图和贴图处理功能，而且软件自由度非常的高

---

完整源码下载

点击下载

部分代码 js 部分

new Vue({
    el: '#app',
    data: {
        imageUrl: '',
        imageArr: ['./images/java.svg', './images/c++语言.svg', './images/c++语言.svg',
            './images/PHP.svg', './images/html.svg', './images/css.svg',
            './images/javascript.svg', './images/Vue.svg', './images/vue (1).svg',
            './images/python.svg', './images/小程序 (1).svg', './images/mysql.svg',
            './images/MySQL-icon-02.svg', './images/bug.svg', './images/爬虫文件.svg',
            './images/游戏.svg'],
        colorArr: ["#1a73e8", "#FFF", "#adbac7", "#000"],
        title: '',
        size: ''
    },
    mounted() {
        this.size = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--size'))
        this.color = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--font-color'))
    },
    methods: {
        // 点击切换logo
        changeImageSrc(e) {
            index = e.target.name
            this.imageUrl = this.imageArr[index]
        },
        // 字体大小变大
        addSize() {
            if (parseInt(this.size) >= 20 && parseInt(this.size) < 100) {
                document.documentElement.style.setProperty('--size', (this.size++) + "px");
            } else {
                alert("字体大小越界")
            }
        },
        // 字体大小变小
        subSize() {
            if (parseInt(this.size) > 20 && parseInt(this.size) <= 100) {
                document.documentElement.style.setProperty('--size', (this.size--) + "px");
            } else {
                alert("字体大小越界")
            }
        },
        // 暗黑模式
        dark() {
            document.querySelector(".img600x300").style.backgroundColor = "#22272e"
            document.querySelector(".title").style.backgroundColor = "#343434"
        },
        // 明亮模式
        light() {
            document.querySelector(".img600x300").style.backgroundColor = "#fff"
            document.querySelector(".title").style.backgroundColor = "#f3f3f3"
        },
        // 改下字体颜色
        colorChange(e) {
            let i = e.target.name
            console.log(i);
            document.querySelector('.title').style.color = this.colorArr[i]
        }

    },
})

好了，这就是全部内容了，小伙伴们有好的想法，或者代码优化，使用canvas做个保存图片功能等，欢迎在评论区留言