用Django加PIL做一个证件照模板生成器网页

最近在整理自己的简历，发现简历上面的ID照有些太老了，所以就准备重新准备一些证件照，刚好最近在弄自己的博客网站，想着直接做一个网页工具出来，直接生成证件照模板，这样还可以省去PS的麻烦。而且照片涉及到个人隐私，把照片存储到服务器后端会有诸多问题，所以我就直接全部在内存中处理了

下面是我的处理过程

上传ID照，选择需要的尺寸和底板的大小，然后保存到本地，直接打印即可。

后台主要用到的是PIL和Django。

PIL这块，我用了比较原始的方法，先处理原始照片为对应的尺寸，然后加边框，算出总的长宽，再用地板的长宽相除，算出横竖版本的张数，再用单张乘以张数算出宽高，再粘贴到背景板上。然后就是完整的照片了

我单独写了一个函数处理照片生成的过程，下面附上代码：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from PIL import Image

def preview_pic(img,photo_size,bk_size,bk_color,photo_size_background_dict,photo_size_dict):
    try:
        # id照尺寸
        idsize = photo_size
        # 底板尺寸
        bgsize = bk_size
        # 底板颜色
        bgcol = bk_color
        # 原始照片
        photopath = img
        photo = Image.open(photopath)
        #处理底板和照片的长宽，将CM转化为像素，我是以300dpi转化的，这个基本就是照片的标准了
        back_ground_hight = round(
            photo_size_background_dict[bgsize]["h"] *
            round(
                photo_size_background_dict[bgsize]["dpi"] /
                2.54))
        back_ground_width = round(
            photo_size_background_dict[bgsize]["w"] *
            round(
                photo_size_background_dict[bgsize]["dpi"] /
                2.54))
        photo_hight = round(
            photo_size_dict[idsize]["h"] *
            round(
                photo_size_dict[idsize]["dpi"] /
                2.54))
        photo_width = round(
            photo_size_dict[idsize]["w"] *
            round(
                photo_size_dict[idsize]["dpi"] /
                2.54))
        #创建空白底板
        img_bk = Image.new(
            "RGB", (back_ground_width, back_ground_hight), bgcol)
        #处理原始照片，将原始照片处理成ID照尺寸
        img_photo = photo.resize((photo_width, photo_hight))
        img_photo_width = img_photo.size[0]
        img_photo_hight = img_photo.size[1]
        #给id照加边框，左右上下各10像素
        img_photo_with_side = Image.new(
            "RGB", (img_photo_width + 20, img_photo_hight + 20), bgcol)
        img_photo_with_side.paste(img_photo, (10, 10))
        img_photo_with_side_width = img_photo_with_side.size[0]
        img_photo_with_side_hight = img_photo_with_side.size[1]
        #算出底板横向和纵向的id照张数
        width_num = divmod(back_ground_width, img_photo_with_side_width)
        hight_num = divmod(back_ground_hight, img_photo_with_side_hight)
        #创建带边框的id照的总长和总宽的空白照
        img_photo_with_side_total = Image.new(
            "RGB",
            (img_photo_with_side_width *
             width_num[0],
             img_photo_with_side_hight *
             hight_num[0]),
            bgcol)
        #开始往空白照上面粘贴id照
        for i in range(0, width_num[0]):
            for k in range(0, hight_num[0]):
                img_photo_with_side_total.paste(
                    img_photo_with_side, (img_photo_with_side_width * i, img_photo_with_side_hight * k))
        #之前已经粘贴好了id照的模板，现在要往总底板上面粘贴了，粘贴好之后会在上下左右空出空间来
        img_bk.paste(
            img_photo_with_side_total, (int(width_num[1] / 2), int(hight_num[1] / 2)))
        return img_bk

    except BaseException as e:
        print(e)

def Hex_to_RGB(hex):
    r = int(hex[1:3],16)
    g = int(hex[3:5],16)
    b = int(hex[5:7], 16)
    rgb =(r,g,b)
    return rgb
　　

还有前端传递到后端的代码：

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-center">照片生成工具</h3>
                </div>
                <div class="col-12 mt-3">
                    <p class="text-wrap">该工具用于批量生成证件照，只需要上传需要生成模板的照片，然后选择想要的参数，系统会自动排版照片，
                        生成新的照片,模板背景颜色也可以自由选择，目前支持的格式仅限于1寸和2寸，背景照片为A4,6寸和Letter。</p>
                    <p>照片模板</p>
                    <span>1寸证件照6寸底片</span>
                    <img class="img-fluid w-25" alt="" src={% static 'images/pic_tem1.jpg' %} >
                    <span>1寸证件照A4底片</span>
                    <img class="img-fluid w-25" alt="" src={% static 'images/pic_tem2.jpg' %} >
                    <p>使用方法：</p>
                    <form id="photo_info" role="form" enctype="multipart/form-data" action="">
                        <ol>
                            <li class="m-3">
                                <div class="col-4">
                                    <input class="btn form-control" type="file" accept=".jpg" id="photo">
                                </div>
                            </li>
                            <li class="m-3">
                                <div class="col-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-light">选择照片大小</span>
                                        </div>
                                        <select class="form-control" id="photo_size" name="photo_size">
                                            {% for p_size in photo_size %}
                                                <option value="{{ p_size }}">{{ p_size }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </li>
                            <li class="m-3">
                                <div class="col-4">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-light">选择背景大小</span>
                                        </div>
                                        <select class="form-control" id="bk_size" name="bk_size">
                                            {% for p_s_b_k,p_s_b_v in photo_size_background.items %}
                                                <option value="{{ p_s_b_k}}">{{ p_s_b_k }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </li>
                            <li class="m-3">
                                <div class="col-4">
                                    <span>选择背景颜色：</span>
                                    <label for="w">白色</label>
                                    <input id="w" type="radio" name="bk_color" value="#ffffff" checked="checked">
                                    <label for="g">灰色</label>
                                    <input id="g" type="radio" name="bk_color" value="#808080">
                                </div>
                            </li>
                            <li class="m-3">
                                <div class="col-4">
                                    <button type="button" class="btn-primary rounded" onclick="build_photo()">预览</button>
                                </div>
                            </li>
                            <li class="m-3">
                                <div id="pic" class="col-6">

                                </div>
                            </li>
                        </ol>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    function build_photo() {
        var photo_size = document.getElementById("photo_size").value;
        var bk_size = document.getElementById("bk_size").value;
        var photo = document.getElementById("photo").files[0];
        var bk_color = $("input[name='bk_color']:checked").val();
        var formdata = new FormData();
        formdata.append("photo",photo);
        formdata.append("photo_size",photo_size);
        formdata.append("bk_size",bk_size);
        formdata.append("bk_color",bk_color);
        $.ajax({
            url:"/tools/photo_builder/",
            type:"POST",
            data:formdata,
            processData:false,
            contentType:false,
            success:function (data) {
                document.getElementById("pic").innerHTML = '<img class="img-thumbnail" src="data:image/jpg;base64,'+data["data"]+'">\n'+ //img直接用二进制表示，不指定路径
                                                            '<a class="btn btn-primary m-3 float-right" href="/download_photo" download>下载</a>'
            }
        })
    }

</script>

主要是上传图片的处理，我用了ajax上传，另外注意，form一定要加 enctype="multipart/form-data"，不然django会报错

之后就是后端Django的处理了，分为照片生成和照片下载

from io import StringIO,BytesIO

from base64 import b64encode

from django.views.decorators.csrf import csrf_exempt

from Web_Demo.photo_builder import preview_pic,Hex_to_RGB

from django.shortcuts import HttpResponse, render, redirect,HttpResponseRedirect

@csrf_exempt
def photo_builder(request):  
　　#声明一个全局变量，后面会用到
    global byte_data
　　#底板和id照类型的字典，可以自己加，我用了通用模板，加了之后会直接传递到前端
    photo_size_background_dict = {
        "6寸": {"h": 10.16, "w": 15.24, "dpi": 300},
        "A4": {"h": 21.0, "w": 29.7, "dpi": 300},
    }
    photo_size_dict = {"1寸": {"h": 3.21, "w": 2.4, "dpi": 300},
                  "2寸": {"h": 4.9, "w": 3.4, "dpi": 300}
                  }
    if request.method == "GET":
        return render(request,'../templates/photo_builder.html',{"photo_size_background":photo_size_bac
                                                                 "photo_size":photo_size_dict})
    else:  
　　　　　#获取ajax传递到后端的信息
        photo = request.FILES.get("photo")
        photo_size = request.POST.get("photo_size")
        bk_size = request.POST.get("bk_size")
        bk_color_hex = request.POST.get("bk_color") 
　　　　　#这里把16进制颜色处理成RGB模式的，后续会用到
        bk_color = Hex_to_RGB(bk_color_hex) 
　　　　　#这个用BytesIO把前端传递过来的数据转化为二进制，方便PIL读取
        img = BytesIO(photo.read())
　　　　　#引入之前创建的函数，参数都已经给定，返回一个Image对象，过程参考前面的代码
        pic = preview_pic(img,photo_size,bk_size,bk_color,photo_size_background_dict,photo_size_dict)
　　　　　#把返回的Image对象转化为二进制代码，再转化为base64
        output_buffer = BytesIO()
        pic.save(output_buffer, format='JPEG')
        byte_data = output_buffer.getvalue()
        base64_bytes = b64encode(byte_data)
　　　　　#把base64代码转化为utf8的字符串，并用Json序列化传递到前端，前端img直接引用base64码显示
        base64_string = base64_bytes.decode('utf-8')
        raw = {"data":base64_string}
        json_data = json.dumps(raw,ensure_ascii=False)
        return HttpResponse(json_data,content_type='application/json; charset=utf-8')                  

下载照片代码，这里处理起来很坑，我试了下，用数据流处理的话，下载下来的会提示文件损坏，

def download_photo(request): 
　　#还是声明全局变量，调用之前生成的二进制数据，这样省掉了读取本地文件的过程
    global byte_data
    try:
        response = HttpResponse(byte_data)
　　　　　#这里一定要注意，千万不能用FileResponse和StreamingHttpResponse，而且type直接指定jpg就可以了，因为不是从后端读取的文件，是直接获取的二进制代码，用数据流的话一定会报错
        response['Content-Type'] = 'application/jpg'
        response['Content-Disposition'] = 'attachment;filename="ID.JPG"'
    except:
        return HttpResponse("Not Found the File")
    return response                                                              

最后就是处理之后的显示了

然后是下载到本地的照片，大功告成，把模板保存起来打印的时候选择对应的底板尺寸就可以大了，再也不需要去用PS花一堆时间贴图了