zoukankan      html  css  js  c++  java
  • python使用PIL处理图片后返回给前端的坑

    一、python代码

    这里有个坑,之前没有将bytes图片数据转成base64就返回到前端了,但在前端处理的时候,怎么都显示不出图片来,虽然数据拿到了,但bytes被传到前后变str了,所以怎么搞都没搞出来,后来发现转成base64后,前端能很方便的就将图片显示出来了,都不需要转换类型

    from io import BytesIO
    import base64
    from PIL import Image, ImageFont, ImageDraw
    from flask import request
    
    def PhotoAddNumber():
                if not request.json:
                    return
                number = request.json.get("number")
                if not number:
                    print("数据不能为空!")
        
                img_file = Image.open(r"图片地址")
                font_1 = ImageFont.truetype(r"字体地址", 36)#36为字体大小
                #获取图片对象
                add_number = ImageDraw.Draw(img_file)
                # 添加数字,text里的参数是图片的x,y轴,fill是字体颜色
                add_number.text((355, 20), number, font=font_1, fill="#262728")
    
                #将图片保存到内存中
                f = BytesIO()
                img_file.save(f, 'jpeg')
                #从内存中取出bytes类型的图片
                data = f.getvalue()
                #将bytes转成base64
                data = base64.b64encode(data).decode()
                return data

    二、前端代码

    # this.edit携带的数据
    this.$http.post('请求后端的地址', this.edit
            ).then(res => {
                #创建一个a标签,并将图片的base64直接赋给a标签的href
                var a = document.createElement("a")
                #base64图片显示的固定格式,这里我是直接下载的,没有在html中显示
                a.href = "data:image/jpg;base64," + res.data
                let name = prompt("输入图片名")
                a.download = name + ".jpeg"
                a.click();
              }
            ).catch(e => {
              alert("提交失败,数据有误!")
              console.log(e)
            })            
  • 相关阅读:
    CentOS6.5下安装Redis2.8.6和phpredis2.2.4扩展
    Centos系统安装 phpredis 扩展
    在centos6.3用yum安装redis
    CentOS 安装图形化界面方法
    解决Eclipse中文乱码
    apache mod_alias模块功能介绍
    php 使用serialize() 和 unserialize() 让对象成超级变量
    eclipse导入php项目
    php多文件上传类(含示例)
    PHP多图片上传类推荐
  • 原文地址:https://www.cnblogs.com/angelyan/p/11151112.html
Copyright © 2011-2022 走看看