python 在线给证件图片换底色

叶子陪你玩

发布于 2021-09-15 10:55:55

2.5K0

发布于 2021-09-15 10:55:55

文章被收录于专栏：叶子陪你玩编程叶子陪你玩编程

今天做了一个在线给证件照换底色的工具。

图片效果：

视频：

实现原理：

前端：实现选择图片并预览

前端核心代码：

<div style="text-align:center;margin:50px;">
    <p>通过设定证件照底色<strong>JPG文件</strong>,<strong>PNG文件</strong></p>
    <form action="{% url 'passport_image' %} " method="post" enctype="multipart/form-data">
        {% csrf_token %}
            <!--    设置input的type和accept，当然也可设置multiple允许多文件上传，这里不做设置-->
            <input type="file" name="img" id='upload_img' accept="image/*" onchange="showImg(this)" />
    </form>
</div>
<script>
    function showImg(obj) {
        var file=$(obj)[0].files[0];    //获取文件信息
        var imgdata='';
        if(file)
        {
            var reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $('#upload_img').after("<div><img src='' alt='' id='img' style='width:200px;border:solid 1px black;'></div>")
                $("#img").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                $("#img").after("<div><br/><span>输入背景色（例：white,red or blue）</span><input type='text' name='color'/><hr/><input type='submit'></div>")
                document.getElementById("upload_img").style.display="none";
            };
        }
        else{
            alert("上传失败");
        }
    }
</script>

后端：接收图片对图片进行底色处理并返回到前端，使用了base64，直接返回图片内容，不在服务器保存图片

后端核心代码：

def passport_image(request):
    if request.method=="GET":
        return  render(request,'imageTools/passport_image.html')
    elif request.method=="POST":
        img_obj = request.FILES.get('img')
        color = request.POST.get('color')
        if color =='red':
            color_rgb = (255,0,0)
        elif color =='blue':
            color_rgb = (0,0,255)
        elif color =='white':
            color_rgb = (255,255,255)
        name = os.path.splitext(str(img_obj))[0]
        img = Image.open(img_obj).convert('RGB')
        pixel = img.getpixel((0,0))
        for x in range(img.size[0]):
            for y in range(img.size[1]):
                if img.getpixel((x,y)) ==pixel:
                    img.putpixel((x,y),color_rgb)
        img_byte = BytesIO()
        img.save(img_byte, format='PNG')
        binary_content = img_byte.getvalue()  # bytes
        img_base64 = base64.b64encode(binary_content)
        img_base64 = img_base64.decode('utf-8')
        res = {"img_content": "data:image/jpg;base64,"+img_base64,'name':name,'color':color}
        return render(request,'imageTools/download_file.html', res)

会一些基础网页知识加一些python的后端知识，就能够实现很多有意思的效果，和之前学习的GUI原理是类似的，网页就相当于一个界面入口，通过它将数据发送到后端，后端通过python处理后在返回前端。

这个过程中其实更多在于数据之间的转换，怎样接收前端的数据，后端怎样返回数据给前端。

还有学会了一种编程语言，在入门学习其它语言是非常快的，下面是纯网页端的一些代码，可复制运行，需要到网上下载jquery库或者留言告诉我给你发：

代码1：前端上传图片预览 upload_img_preview.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="text-align:center;margin:50px;">
    <p>通过设定证件照底色<strong>JPG文件</strong>,<strong>PNG文件</strong></p>
    <form action="#" method="post" enctype="multipart/form-data">
            <!--    设置input的type和accept，当然也可设置multiple允许多文件上传，这里不做设置-->
            <input type="file" name="img" id='upload_img' accept="image/*" onchange="showImg(this)" />
    </form>
</div>
</body>
<script>
    function showImg(obj) {
        var file=$(obj)[0].files[0];    //获取文件信息
        var imgdata='';
        if(file)
        {
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(evt){
                $('#upload_img').after("<div><img src='' alt='' id='img' style='width:200px;border:solid 1px black;'></div>")
                $("#img").attr('src',evt.target.result)
                $("#img").after("<div><br/><span>输入背景色（例：white,red or blue）</span><input type='color' name='color' id='color'/><hr/><button type='button' onclick = 'showColor()'>提交</button></div>")
                document.getElementById("upload_img").style.display="none";
            };
        }
        else{
            alert("上传失败");
        }
    }
    function showColor(obj) {
        value = document.getElementById("color").value;
        alert(value);
    }
</script>
</html>

代码2：回到网页顶部 Javascript 返回顶部.html

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>Javascript 返回顶部</title>
  <style type="text/css">
    body{width:700px;height:2000px;background:linear-gradient(red,green,yellow,blue,orange,gray);}
    #btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; background:url(images/top_bg.png) no-repeat left top;}
    #btn:hover {background:url(images/top_bg.png) no-repeat 0 -40px;}/*显示图片的下半部分*/
</style>
  <script>
  /*瞬间回到网页顶端*/
  function scrolltop(){
    window.scrollTo(0,0);
  }

  /*慢慢回到网页顶端*/
  function backtop(){
    window.scrollBy(0,-10);
    var scrolldelay=setTimeout('backtop()',5);
    if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);
  }
  /*瞬间回到网页顶端2*/
  function backtop2(){
    while (document.documentElement.scrollTop>0){
      window.scrollBy(0,-1)
    }
  }
</script>
  
</head>
<body>
  <div onclick="backtop()" id="btn" title="回到顶部"></div>
</body>
</html>

代码3：表单控件 form_widget.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div style="text-align:center;margin:50px;">
        <p>表单控件</p>
        <form action="#">
          <label for="fname">First name:</label>
          <input type="text" id="fname" name="fname" value="Bill"><br>
          <label for="lname">Last name:</label>
          <input type="text" id="lname" name="lname" value="Gates"><br><br>
          <input type="range" id="range" min="1" max="10" value="5" onchange="showValue()" /><br>
          <select id="color_sort" onchange="showValue()">
              <option>red</option>
              <option>green</option>
              <option>blue</option>
          </select><br>
          <input type="color" id="color_selector" /><br>
        </form>
    </div>
</body>
<script>
    function showValue() {
        value = document.getElementById("range").value;
        value2 = document.getElementById("color_sort").value;
        if (value2=='red'){
            document.getElementById("color_selector").value = '#ff0000'
        }
        else if (value2=='green'){
            document.getElementById("color_selector").value = '#00ff00'
        }
        else if (value2=='blue'){
            document.getElementById("color_selector").value = '#0000ff'
        }
        alert('滑块：'+value+'颜色：'+value2);
    }
</script>
</html>