【Logo】无奈的又做一回美工：图片矢量化+logo上传+联动显示

最新推荐文章于 2024-09-18 00:32:39 发布

星空•物语

最新推荐文章于 2024-09-18 00:32:39 发布

阅读量250

点赞数

分类专栏： # WebLabelSoft 文章标签： logo上传 flask

本文链接：https://blog.csdn.net/qq_40265247/article/details/116607069

版权

WebLabelSoft 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言

又是被要求改需求的一天，原本logo时一张图片，而且有百边确实比较丑爆了，然后我就改了改，成了下面的模样。这个power by的logo乍一看还是不错的哈

在这里插入图片描述

图片上传与存储

为了有一张贴合背景的图片，矢量化还是有必要的，新手直接推荐在线处理，如：搞定抠图、创客贴在线抠图
PS：我可不是上述软件的既得利益者，说不定哪天就收费了，如您有合适的，还请分享。

1.上传

在这里插入图片描述

这是Home页的两个logo其中右边的这个时可更改的，当鼠标放在该logo上时，会出现图片选择栏

在这里插入图片描述

<div class="row clearfix col-md-12 column" style="display: inline-flex;">
        <img style="height: 100px;clear:right;float: left;" src="../static/images/CETC.jpeg"><br>
        {% if avatar_path %}
            <img id="avatar" class="clear:right;float: left;" height="100px" src="{{ url_for('static',filename='uploads/'+avatar_path) }}">
        {%else%}
            <img id="avatar" style="height: 100px;clear:right;float: left;" src="../static/images/seu.png">
        {% endif %}
    </div>
    <form style="display: none;" class="avatar-input-form" method="POST" enctype="multipart/form-data">
        <input name="avatar_upload" type="file" class="file" data-show-preview="false"/>
    </form>

这儿我遇到了个神奇的问题，由于对美工的不了解。

style="display: inline-flex;"要放在外面，内部的两个图片才能对齐。
logo的尺寸不受控制，放在style中不太好使，然后单独的height="100px"方可，还请大佬不吝指教。

<script>
    $(document).ready(function(){
        $(".file-caption-main").css({"width": "380px"})  //固定选择栏长度

        $("#avatar").mouseenter(function(){  //鼠标进入logo则显示选择栏
            $(".avatar-input-form").css({"display": ""})
        });
        $("#avatar").change(function(){  //图片上传成功隐藏
            $(".avatar-input-form").css({"display": "none"})
        });
    });
</script>

你可能会好奇这个样式，看着还是很不错的，同时你会发现，这个表单提交没有submit，主要由于两个外部脚本决定的

<link rel="stylesheet" href="{{ url_for('static', filename='css/fileinput.min.css') }}">

<script src="{{ url_for('static', filename='js/fileinput.min.js') }}"></script>

这两个脚本被我下载到本地了，要不每次都得从外部服务器加载有点小慢。当然你仍然这么干，link

点击Brower选择图片，诶出现了两个控件，真不错（都是上面两个脚本的功劳
在这里插入图片描述

2.存储

点击上传至后端：这是一个用python搭的flask应用，注意当前页时在站点目录 / 下哦，借助post表单提交，将图片给保存在服务器上。同时为了让重启后回复之前的更改，将更改后的logo地址（此处是文件名，因为我们知道保存在哪个目录）保存在数据库中。

# seu 东大logo更改
avatar_path = AvatarTable().getFirstPath()  # 从数据库中获取logo路径

@app.route('/', methods=['POST'])
def avatar():
    if request.method == 'POST':
        file = request.files['avatar_upload']  # avatar_upload 这个是前端form表单input标签的对应name
        base_path = app.config['UPLOAD_FOLDER']
        file_path = os.path.join(base_path, filename)
        file.save(file_path)  //将logo保存在指定目录下
        
        AvatarTable().update(filename)  //更新数据库的logo地址
        global avatar_path
        avatar_path = filename  //更新全局的logo地址
        
    return render_template("index.html",avatar_path=avatar_path) //重新渲染，显示上传后的logo

这个用于存储的表单表现的就太过于纯粹了，就一个字段哈哈（id不算），之后结合用户登录的话，自行扩增类就好。

from flask_sqlalchemy import SQLAlchemy
import pymysql

class AvatarTable(db.Model):
    __tablename__ = 'AvatarInfo'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    avatar_path = db.Column(db.String(55))

    def __init__(self, imgPath="images/seu.png"):
        self.avatar_path = imgPath
    
    def save(self):
        db.session.add(self)
        db.session.commit()
    
    def update(self,imgPath):  //更新（暂时只更新第一个
        # db.session.query(AvatarTable).filter(AvatarTable.id==1).update({"avatar_path":imgPath})
        AvatarTable.query.filter(AvatarTable.id==1).update({"avatar_path":imgPath})
        db.session.commit()
    
    def getFirstPath(self):  //获取第一个地址作为logo地址
        ret = AvatarTable.query.filter(AvatarTable.id==1).first()
        return ret.avatar_path