flask 实现上传图片并缩放作为头像的例子

个人开发的 flask 论坛进入尾声，还剩最后一个上传图片更换头像功能，搞了一整天，最后终于解决了所有问题，现在记录下解决方案。

1. 上传文件

分析一下更换头像功能，我们需要做哪些事，简单的思路是：上传文件，获取文件的 url 。

文件上传的基本原理实际上很简单，基本上是：

一个带有 enctype=multipart/form-data 的 <form> 标记，标记中含有 一个 <input type=file>。

应用通过请求对象的 files 字典来访问文件。

使用文件的 save() 方法把文件永久 地保存在文件系统中。

于是可以得到我们的提供上传按钮的表单页面：

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}SYSUfm - 更换头像{% endblock %}

{% block page_content %}
<div class="page-header">
  <h1>更换你的头像</h1>
</div>
<div class="col-md-4">
  <form action="" method=post enctype=multipart/form-data>
    <input type=file name=file><br/>
    <input type=submit value=Upload>
  </form>
</div>

{% endblock %}

2. 创建略缩图

接下来我们需要有路由到这个页面的视图函数，服务器后台端的代码如下：

@main.route('/edit-avatar', methods=['GET', 'POST'])
@login_required
def change_avatar():
  if request.method == 'POST':
    file = request.files['file']
    size = (40, 40)
    im = Image.open(file)
    im.thumbnail(size)
    if file and allowed_file(file.filename):
      filename = secure_filename(file.filename)
      im.save(os.path.join(main.static_folder, 'avatar', filename))
      current_user.new_avatar_file = url_for('main.static', filename='%s/%s' % ('avatar', filename))
      current_user.is_avatar_default = False
      flash(u'头像修改成功')
      return redirect(url_for('.user', username=current_user.username))
  return render_template('change_avatar.html')

这里 main 是一个 blueprint，file = request.files['file'] 语句获得图片文件对象，将其转换为 Image 对象，通过 thumbnail 方法进行略缩。

最后 im.save(os.path.join(main.static_folder, 'avatar', filename)) 语句将略缩图片保存到服务指定路径。

以上这篇flask 实现上传图片并缩放作为头像的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • opencv resize图片为正方形尺寸的实现方法

    在深度学习中,模型的输入size通常是正方形尺寸的,比如300 x 300这样．直接resize的话,会把图像拉的变形．通常我们希望resize以后仍然保持图片的宽高比． 例如: 如果直接resize到的话: 而我们希望得到: 可以利用copyMakeBorder和resize配合达到我们的目的． import cv2 def resize_keep_aspectratio(image_src,dst_size): src_h,src_w = image_src.shape[:2] print(

  • flask 实现上传图片并缩放作为头像的例子

    个人开发的 flask 论坛进入尾声,还剩最后一个上传图片更换头像功能,搞了一整天,最后终于解决了所有问题,现在记录下解决方案. 1. 上传文件 分析一下更换头像功能,我们需要做哪些事,简单的思路是:上传文件,获取文件的 url . 文件上传的基本原理实际上很简单,基本上是: 一个带有 enctype=multipart/form-data 的 <form> 标记,标记中含有 一个 <input type=file>. 应用通过请求对象的 files 字典来访问文件. 使用文件的

  • PHP实现将上传图片自动缩放到指定分辨率，并保持清晰度封装类示例

    本文实例讲述了PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类.分享给大家供大家参考,具体如下: class AutoImage{ private $image; public function resize($src, $width, $height){ //$src 就是 $_FILES['upload_image_file']['tmp_name'] //$width和$height是指定的分辨率 //如果想按指定比例放缩,可以将$width和$height改为$src的指定比

  • Flask接收上传图片方法实现

    目录 方案一:下面是复杂的写法: 方案二:下面是简单写法: 接下来给搭建讲解Flask如何接受图片文件,上面是复杂写法,下面是简单写法,二选一即可. 思路整理:接收图片->定义一个图片存放的位置->给图片重命名(为了唯一性)->保存操作->返回状态 方案一:下面是复杂的写法: basedir = os.path.abspath(os.path.dirname(__file__)) #定义一个根目录 用于保存图片用 import os,sys,random,string from a

  • laravel实现上传图片并在页面显示的例子

    1:上传图片 public function updateFeedbackImg(Request $request) { $bool = false; $upload_file = $request->file("pic"); if ($upload_file->isValid()) { $realPath = $upload_file->getRealPath(); $bool = Storage::disk('feedback')->put($request

  • js同比例缩放图片的小例子

    复制代码 代码如下: function DrawImage(ImgD, FitWidth, FitHeight) {    var image = new Image();    image.src = ImgD.src;    if (image.width > 0 && image.height > 0) {        if (image.width / image.height >= FitWidth / FitHeight) {            if (

  • c#图片缩放图片剪切功能实现(等比缩放)

    所谓c#图片处理高级应,多数是基于.net framework类库完成 复制代码 代码如下: using system;using system.collections.generic;using system.text;using system.io;using system.drawing;using system.drawing.drawing2d;using system.drawing.imaging; namespace wujian.common{    /// <summary>

  • C#裁剪,缩放,清晰度,水印处理操作示例

    C#裁剪,缩放,清晰度,水印处理操作示例

    前言 需求源自项目中的一些应用,比如相册功能,通常用户上传相片后我们都会针对该相片再生成一张缩略图,用于其它页面上的列表显示.随便看一下,大部分网站基本都是将原图等比缩放来生成缩略图.但完美主义者会发现一些问题,比如显示排版时想让相片缩略图列表非常统一.整齐.和美观,比如要求每张缩略图大小固定为120 x 90且不拉伸变形怎么办?再比如用户头像如何让缩略图比原图更清晰?或是如何在上传的图片下加一个半透明的LOGO水印? OK,本文根据自己的项目代码描述以上问题的解决方案,全部基于.Net Fra

  • React+ajax+java实现上传图片并预览功能

    React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

  • jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)

    本文实例讲述了jQuery头像裁剪工具jcrop用法.分享给大家供大家参考,具体如下: 头像裁剪工具目前比较流行的是flash和jquery的.个人觉得用jquery的比较好,因为代码仔细研究一下,基本上能明白怎么回事,想改的话也比较容易. 有一个例子,请参考:jcrop例子demo ,是根jcrop的例子改的,添加以下二个特点: 1,居中显示,并且可拖拉,改变截取的大小 2,预览的图片,根拖拉的大小成比例. 以下是js代码,作了简单的封装 <!DOCTYPE html PUBLIC "-

  • Flask使用SQLAlchemy实现持久化数据

    目录 项目引入flask-sqlalchemy ORM简介及模型定义 表关系类型及编码实现 一对多关系(多对一关系) 一对一关系 多对多关系 数据库基本操作 插入 更新 查询 删除 项目引入flask-sqlalchemy 首先,安装flask-sqlalchemy扩展: $pip install flask-sqlalchemy 然后,在项目中导入SQLAlchemy类,并实例化应用程序使用的数据库(以mysql为例): from flask_sqlalchemy import SQLAlch

随机推荐