{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-03-12-avatar-decoration","result":{"data":{"currentBlog":{"id":"1f1b1317-32a1-50c4-a77f-df648ee9128f","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020511/1589207418152-ZalNtxgQAC_small.jpg","authors":["Anycodes"],"categories":["best-practice"],"date":"2020-03-12T00:00:00.000Z","title":"让 Serverless 为你的头像增加点装饰","description":"无论是国庆还是新年，经常会有一个平台为我们提供一个生成头像的小工具，本文手把手教你实现头像加装饰的工具","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","图像处理"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":true},"wordCount":{"words":106,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-03-12-avatar-decoration.md","fields":{"slug":"/best-practice/2020-03-12-avatar-decoration/","keywords":["go","java","python","serverless","website","云函数","mui","pic","base","shape"]},"html":"

无论是国庆还是新年，经常会有一个平台为我们提供一个生成头像的小工具，很是新奇好玩，这类平台/工具，一般都有两个方法给我们制作头像。

\n\n

Serverless直接增加头像装饰

\n

其实这个功能很简单，主要功能就是选择一个图片，上传自己的头像，然后函数部分进行图像的合成，这一部分并没有涉及到机器学习算法，仅仅是图像合成相关算法。

\n

主要通过用户上传的图片，在指定位置增加预定图片/用户选择的图片作为装饰物进行添加，添加过程是：

\n\n\n \n 复制代码\n \n \n
def do_circle(base_pic):\n    icon_pic = Image.open(base_pic).convert(\"RGBA\")\n    icon_pic = icon_pic.resize((500, 500), Image.ANTIALIAS)\n    icon_pic_x, icon_pic_y = icon_pic.size\n    temp_icon_pic = Image.new('RGBA', (icon_pic_x + 600, icon_pic_y + 600), (255, 255, 255))\n    temp_icon_pic.paste(icon_pic, (300, 300), icon_pic)\n    ima = temp_icon_pic.resize((200, 200), Image.ANTIALIAS)\n    size = ima.size\n\n    # 因为是要圆形，所以需要正方形的图片\n    r2 = min(size[0], size[1])\n    if size[0] != size[1]:\n        ima = ima.resize((r2, r2), Image.ANTIALIAS)\n\n    # 最后生成圆的半径\n    r3 = 60\n    imb = Image.new('RGBA', (r3 * 2, r3 * 2), (255, 255, 255, 0))\n    pima = ima.load()  # 像素的访问对象\n    pimb = imb.load()\n    r = float(r2 / 2)  # 圆心横坐标\n\n    for i in range(r2):\n        for j in range(r2):\n            lx = abs(i - r)  # 到圆心距离的横坐标\n            ly = abs(j - r)  # 到圆心距离的纵坐标\n            l = (pow(lx, 2) + pow(ly, 2)) ** 0.5  # 三角函数 半径\n\n            if l < r3:\n                pimb[i - (r - r3), j - (r - r3)] = pima[i, j]\n    return imb
\n\n\n \n 复制代码\n \n \n
def add_decorate(base_pic):\n    try:\n        base_pic = \"./base/%s.png\" % (str(base_pic))\n        user_pic = Image.open(\"/tmp/picture.png\").convert(\"RGBA\")\n        temp_basee_user_pic = Image.new('RGBA', (440, 440), (255, 255, 255))\n        user_pic = user_pic.resize((400, 400), Image.ANTIALIAS)\n        temp_basee_user_pic.paste(user_pic, (20, 20))\n        temp_basee_user_pic.paste(do_circle(base_pic), (295, 295), do_circle(base_pic))\n        temp_basee_user_pic.save(\"/tmp/output.png\")\n        return True\n    except Exception as e:\n        print(e)\n        return False
\n
    \n
  • 除此之外，为了方便本地测试，项目增加了test()方法，模拟API网关传递的数据：
    • \n
\n\n \n 复制代码\n \n \n
def test():\n    with open(\"test.png\", 'rb') as f:\n        image = f.read()\n        image_base64 = str(base64.b64encode(image), encoding='utf-8')\n    event = {\n        \"requestContext\": {\n            \"serviceId\": \"service-f94sy04v\",\n            \"path\": \"/test/{path}\",\n            \"httpMethod\": \"POST\",\n            \"requestId\": \"c6af9ac6-7b61-11e6-9a41-93e8deadbeef\",\n            \"identity\": {\n                \"secretId\": \"abdcdxxxxxxxsdfs\"\n            },\n            \"sourceIp\": \"14.17.22.34\",\n            \"stage\": \"release\"\n        },\n        \"headers\": {\n            \"Accept-Language\": \"en-US,en,cn\",\n            \"Accept\": \"text/html,application/xml,application/json\",\n            \"Host\": \"service-3ei3tii4-251000691.ap-guangzhou.apigateway.myqloud.com\",\n            \"User-Agent\": \"User Agent String\"\n        },\n        \"body\": \"{\\\"pic\\\":\\\"%s\\\", \\\"base\\\":\\\"1\\\"}\" % image_base64,\n        \"pathParameters\": {\n            \"path\": \"value\"\n        },\n        \"queryStringParameters\": {\n            \"foo\": \"bar\"\n        },\n        \"headerParameters\": {\n            \"Refer\": \"10.0.2.14\"\n        },\n        \"stageVariables\": {\n            \"stage\": \"release\"\n        },\n        \"path\": \"/test/value\",\n        \"queryString\": {\n            \"foo\": \"bar\",\n            \"bob\": \"alice\"\n        },\n        \"httpMethod\": \"POST\"\n    }\n    print(main_handler(event, None))\n\n\nif __name__ == \"__main__\":\n    test()
\n
    \n
  • 为了让函数更有同一个返回规范，此处增加统一返回的函数：
    • \n
\n\n \n 复制代码\n \n \n
def return_msg(error, msg):\n    return_data = {\n        \"uuid\": str(uuid.uuid1()),\n        \"error\": error,\n        \"message\": msg\n    }\n    print(return_data)\n    return return_data
\n
    \n
  • 最后就是函数中涂口函数的写法：
    • \n
\n\n \n 复制代码\n \n \n
import base64, json\nfrom PIL import Image\nimport uuid\n\n\ndef main_handler(event, context):\n    try:\n        print(\"将接收到的base64图像转为pic\")\n        imgData = base64.b64decode(json.loads(event[\"body\"])[\"pic\"].split(\"base64,\")[1])\n        with open('/tmp/picture.png', 'wb') as f:\n            f.write(imgData)\n\n        basePic = json.loads(event[\"body\"])[\"base\"]\n        addResult = add_decorate(basePic)\n        if addResult:\n            with open(\"/tmp/output.png\", \"rb\") as f:\n                base64Data = str(base64.b64encode(f.read()), encoding='utf-8')\n            return return_msg(False, {\"picture\": base64Data})\n        else:\n            return return_msg(True, \"饰品添加失败\")\n    except Exception as e:\n        return return_msg(True, \"数据处理异常： %s\" % str(e))
\n

完成后端图像合成功能，可以制作前端页面：

\n\n\n\n \n 2020头像大变样 - 头像SHOW - 自豪的采用腾讯云Serverless架构！\n \n \n \n \n \n \n\n\n

2020头像SHOW

\n
\n
\n
\n 第一步：选择一个你喜欢的图片\n
\n
\n
\n
    \n
    • \n
    • \n
    • \n
    • \n
    • \n
    • \n
    • \n
    • \n
    • \n
\n
\n
\n
\n
\n
\n 第二步：上传一张你的头像\n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n 第三步：点击生成按钮获取新年头像\n
\n
\n
\n \n

\n \n
\n
\n
\n
\n

\n 本项目自豪的
通过Serverless Framework
搭建在腾讯云SCF上\n

\n\n`, `86849974004891500000`)\"\n >\n \n 复制代码\n \n \n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>2020头像大变样 - 头像SHOW - 自豪的采用腾讯云Serverless架构！</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no\">\n    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">\n    <script type=\"text/javascript\">\n        thisPic = null\n        function getFileUrl(sourceId) {\n            var url;\n            thisPic = document.getElementById(sourceId).files.item(0)\n            if (navigator.userAgent.indexOf(\"MSIE\") >= 1) { // IE\n                url = document.getElementById(sourceId).value;\n            } else if (navigator.userAgent.indexOf(\"Firefox\") > 0) { // Firefox\n                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));\n            } else if (navigator.userAgent.indexOf(\"Chrome\") > 0) { // Chrome\n                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));\n            }\n            return url;\n        }\n        function preImg(sourceId, targetId) {\n            var url = getFileUrl(sourceId);\n            var imgPre = document.getElementById(targetId);\n            imgPre.aaaaaa = url;\n            imgPre.style = \"display: block;\";\n        }\n        function clickChose() {\n            document.getElementById(\"imgOne\").click()\n        }\n        function getNewPhoto() {\n            document.getElementById(\"result\").innerText = \"系统处理中，请稍后...\"\n            var oFReader = new FileReader();\n            oFReader.readAsDataURL(thisPic);\n            oFReader.onload = function (oFREvent) {\n                var xmlhttp;\n                if (window.XMLHttpRequest) {\n                    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码\n                    xmlhttp = new XMLHttpRequest();\n                } else {\n                    // IE6, IE5 浏览器执行代码\n                    xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");\n                }\n                xmlhttp.onreadystatechange = function () {\n                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n                        if (JSON.parse(xmlhttp.responseText)[\"error\"]) {\n                            document.getElementById(\"result\").innerText = JSON.parse(xmlhttp.responseText)[\"message\"];\n                        } else {\n                            document.getElementById(\"result\").innerText = \"长按保存图像\";\n                            document.getElementById(\"new_photo\").aaaaaa = \"data:image/png;base64,\" + JSON.parse(xmlhttp.responseText)[\"message\"][\"picture\"];\n                            document.getElementById(\"new_photo\").style = \"display: block;\";\n                        }\n                    }\n                }\n                var url = \" http://service-8d3fi753-1256773370.bj.apigw.tencentcs.com/release/new_year_add_photo_decorate\"\n                var obj = document.getElementsByName(\"base\");\n                var baseNum = \"1\"\n                for (var i = 0; i < obj.length; i++) {\n                    console.log(obj[i].checked)\n                    if (obj[i].checked) {\n                        baseNum = obj[i].value;\n                    }\n                }\n                xmlhttp.open(\"POST\", url, true);\n                xmlhttp.setRequestHeader(\"Content-type\", \"application/json\");\n                var postData = {\n                    pic: oFREvent.target.result,\n                    base: baseNum\n                }\n                xmlhttp.send(JSON.stringify(postData));\n            }\n        }\n    </script>\n    <!--标准mui.css-->\n    <link rel=\"stylesheet\" href=\"./css/mui.min.css\">\n</head>\n<body>\n<h3 style=\"text-align: center; margin-top: 30px\">2020头像SHOW</h3>\n<div class=\"mui-card\">\n    <div class=\"mui-card-content\">\n        <div class=\"mui-card-content-inner\">\n            第一步：选择一个你喜欢的图片\n        </div>\n    </div>\n    <div class=\"mui-content\">\n        <ul class=\"mui-table-view mui-grid-view mui-grid-9\">\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/1.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"1\" checked></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/2.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"2\"></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/11.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"11\"></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/4.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"4\"></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/5.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"5\"></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/6.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"6\"></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/12.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"12\"></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/8.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"8\"></label></li>\n            <li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\"><label>\n                <img aaaaaa=\"./base/3.png\" width=\"100%\"><input type=\"radio\" name=\"base\" value=\"3\"></label></li>\n        </ul>\n    </div>\n</div>\n<div class=\"mui-card\">\n    <div class=\"mui-card-content\">\n        <div class=\"mui-card-content-inner\">\n            第二步：上传一张你的头像\n        </div>\n        <div>\n            <form>\n                <input type=\"file\" name=\"imgOne\" id=\"imgOne\" onchange=\"preImg(this.id, 'photo')\" style=\"display: none;\"\n                       accept=\"image/*\">\n                <center style=\"margin-bottom: 10px\">\n                    <input type=\"button\" value=\"点击此处上传头像\" onclick=\"clickChose()\"/>\n                    <img id=\"photo\" aaaaaa=\"\" width=\"300px\" , height=\"300px\" style=\"display: none;\"/>\n                </center>\n            </form>\n        </div>\n    </div>\n</div>\n<div class=\"mui-card\">\n    <div class=\"mui-card-content\">\n        <div class=\"mui-card-content-inner\">\n            第三步：点击生成按钮获取新年头像\n        </div>\n        <div>\n            <center style=\"margin-bottom: 10px\">\n                <input type=\"button\" value=\"生成新年头像\" onclick=\"getNewPhoto()\"/>\n                <p id=\"result\"></p>\n                <img id=\"new_photo\" aaaaaa=\"\" width=\"300px\" , height=\"300px\" style=\"display: none;\"/>\n            </center>\n        </div>\n    </div>\n</div>\n<p style=\"text-align: center\">\n    本项目自豪的<br>通过Serverless Framework<br>搭建在腾讯云SCF上\n</p>\n</body>\n</html>
\n

完成之后：

\n\n \n 复制代码\n \n \n
new_year_add_photo_decorate:\n  component: \"@serverless/tencent-scf\"\n  inputs:\n    name: myapi_new_year_add_photo_decorate\n    codeUri: ./new_year_add_photo_decorate\n    handler: index.main_handler\n    runtime: Python3.6\n    region: ap-beijing\n    description: 新年为头像增加饰品\n    memorySize: 128\n    timeout: 5\n    events:\n      - apigw:\n          name: serverless\n          parameters:\n            serviceId: service-8d3fi753\n            environment: release\n            endpoints:\n              - path: /new_year_add_photo_decorate\n                description: 新年为头像增加饰品\n                method: POST\n                enableCORS: true\n                param:\n                  - name: pic\n                    position: BODY\n                    required: 'FALSE'\n                    type: string\n                    desc: 原始图片\n                  - name: base\n                    position: BODY\n                    required: 'FALSE'\n                    type: string\n                    desc: 饰品ID\n\nmyWebsite:\n  component: '@serverless/tencent-website'\n  inputs:\n    code:\n      src: ./new_year_add_photo_decorate/web\n      index: index.html\n      error: index.html\n    region: ap-beijing\n    bucketName: new-year-add-photo-decorate
\n

完成之后就可以实现头像加装饰的功能，效果如下：

\n

\n

Serverless与人工智能联手增加头像装饰

\n

其实第一种直接加装饰的方法，是可以直接在前端来实现，可以不通过后端功能实现，既然用到了后端服务，用到了云函数，那么我们不防将人工智能的方法和Serverless架构结合，共同实现一个增加装饰的小工具，先进行一下效果的预览：

\n

\n

这一功能的主要做法就是，通过人工智能算法(此处是通过Dlib实现)，进行人脸的检测：

\n\n \n 复制代码\n \n \n
print(\"dlib人脸关键点检测器,正脸检测\")\npredictorPath = \"shape_predictor_5_face_landmarks.dat\"\npredictor = dlib.shape_predictor(predictorPath)\ndetector = dlib.get_frontal_face_detector()\ndets = detector(img, 1)
\n

此处做法是，只检测一张脸，检测到即进行返回：

\n y:\n resizedHatH = y - 1\n\n print("根据人脸大小调整帽子大小")\n resizedHat = cv2.resize(rgbHat, (resizedHatW, resizedHatH))\n\n print("用alpha通道作为mask")\n mask = cv2.resize(a, (resizedHatW, resizedHatH))\n maskInv = cv2.bitwise_not(mask)\n\n print("帽子相对与人脸框上线的偏移量")\n dh = 0\n bgRoi = img[y + dh - resizedHatH:y + dh,\n (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]\n\n print("原图ROI中提取放帽子的区域")\n bgRoi = bgRoi.astype(float)\n maskInv = cv2.merge((maskInv, maskInv, maskInv))\n alpha = maskInv.astype(float) / 255\n\n print("相乘之前保证两者大小一致（可能会由于四舍五入原因不一致）")\n alpha = cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0]))\n bg = cv2.multiply(alpha, bgRoi)\n bg = bg.astype('uint8')\n\n print("提取帽子区域")\n hat = cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv))\n\n print("相加之前保证两者大小一致（可能会由于四舍五入原因不一致）")\n hat = cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0]))\n print("两个ROI区域相加")\n addHat = cv2.add(bg, hat)\n\n print("把添加好帽子的区域放回原图")\n img[y + dh - resizedHatH:y + dh,\n (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] = addHat\n\n return img`, `28839895351708190000`)\"\n >\n \n 复制代码\n \n \n
for d in dets:\n    x, y, w, h = d.left(), d.top(), d.right() - d.left(), d.bottom() - d.top()\n\n    print(\"关键点检测，5个关键点\")\n    shape = predictor(img, d)\n\n    print(\"选取左右眼眼角的点\")\n    point1 = shape.part(0)\n    point2 = shape.part(2)\n\n    print(\"求两点中心\")\n    eyes_center = ((point1.x + point2.x) // 2, (point1.y + point2.y) // 2)\n\n    print(\"根据人脸大小调整帽子大小\")\n    factor = 1.5\n    resizedHatH = int(round(rgbHat.shape[0] * w / rgbHat.shape[1] * factor))\n    resizedHatW = int(round(rgbHat.shape[1] * w / rgbHat.shape[1] * factor))\n\n    if resizedHatH > y:\n        resizedHatH = y - 1\n\n    print(\"根据人脸大小调整帽子大小\")\n    resizedHat = cv2.resize(rgbHat, (resizedHatW, resizedHatH))\n\n    print(\"用alpha通道作为mask\")\n    mask = cv2.resize(a, (resizedHatW, resizedHatH))\n    maskInv = cv2.bitwise_not(mask)\n\n    print(\"帽子相对与人脸框上线的偏移量\")\n    dh = 0\n    bgRoi = img[y + dh - resizedHatH:y + dh,\n            (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]\n\n    print(\"原图ROI中提取放帽子的区域\")\n    bgRoi = bgRoi.astype(float)\n    maskInv = cv2.merge((maskInv, maskInv, maskInv))\n    alpha = maskInv.astype(float) / 255\n\n    print(\"相乘之前保证两者大小一致（可能会由于四舍五入原因不一致）\")\n    alpha = cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0]))\n    bg = cv2.multiply(alpha, bgRoi)\n    bg = bg.astype('uint8')\n\n    print(\"提取帽子区域\")\n    hat = cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv))\n\n    print(\"相加之前保证两者大小一致（可能会由于四舍五入原因不一致）\")\n    hat = cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0]))\n    print(\"两个ROI区域相加\")\n    addHat = cv2.add(bg, hat)\n\n    print(\"把添加好帽子的区域放回原图\")\n    img[y + dh - resizedHatH:y + dh,\n    (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] = addHat\n\n    return img
\n

在Serverless架构下的完整代码：

\n 0:\n for d in dets:\n x, y, w, h = d.left(), d.top(), d.right() - d.left(), d.bottom() - d.top()\n\n print("关键点检测，5个关键点")\n shape = predictor(img, d)\n\n print("选取左右眼眼角的点")\n point1 = shape.part(0)\n point2 = shape.part(2)\n\n print("求两点中心")\n eyes_center = ((point1.x + point2.x) // 2, (point1.y + point2.y) // 2)\n\n print("根据人脸大小调整帽子大小")\n factor = 1.5\n resizedHatH = int(round(rgbHat.shape[0] * w / rgbHat.shape[1] * factor))\n resizedHatW = int(round(rgbHat.shape[1] * w / rgbHat.shape[1] * factor))\n\n if resizedHatH > y:\n resizedHatH = y - 1\n\n print("根据人脸大小调整帽子大小")\n resizedHat = cv2.resize(rgbHat, (resizedHatW, resizedHatH))\n\n print("用alpha通道作为mask")\n mask = cv2.resize(a, (resizedHatW, resizedHatH))\n maskInv = cv2.bitwise_not(mask)\n\n print("帽子相对与人脸框上线的偏移量")\n dh = 0\n bgRoi = img[y + dh - resizedHatH:y + dh,\n (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]\n\n print("原图ROI中提取放帽子的区域")\n bgRoi = bgRoi.astype(float)\n maskInv = cv2.merge((maskInv, maskInv, maskInv))\n alpha = maskInv.astype(float) / 255\n\n print("相乘之前保证两者大小一致（可能会由于四舍五入原因不一致）")\n alpha = cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0]))\n bg = cv2.multiply(alpha, bgRoi)\n bg = bg.astype('uint8')\n\n print("提取帽子区域")\n hat = cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv))\n\n print("相加之前保证两者大小一致（可能会由于四舍五入原因不一致）")\n hat = cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0]))\n print("两个ROI区域相加")\n addHat = cv2.add(bg, hat)\n\n print("把添加好帽子的区域放回原图")\n img[y + dh - resizedHatH:y + dh,\n (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] = addHat\n\n return img\n\n\ndef main_handler(event, context):\n try:\n print("将接收到的base64图像转为pic")\n imgData = base64.b64decode(json.loads(event["body"])["pic"])\n with open('/tmp/picture.png', 'wb') as f:\n f.write(imgData)\n\n print("读取帽子素材以及用户头像")\n hatImg = cv2.imread("hat.png", -1)\n userImg = cv2.imread("/tmp/picture.png")\n\n output = addHat(userImg, hatImg)\n cv2.imwrite("/tmp/output.jpg", output)\n\n print("读取头像进行返回给用户，以Base64返回")\n with open("/tmp/output.jpg", "rb") as f:\n base64Data = str(base64.b64encode(f.read()), encoding='utf-8')\n\n return {\n "picture": base64Data\n }\n except Exception as e:\n return {\n "error": str(e)\n }`, `63843404000036960000`)\"\n >\n \n 复制代码\n \n \n
import cv2\nimport dlib\nimport base64\nimport json\n\n\ndef addHat(img, hat_img):\n    print(\"分离rgba通道，合成rgb三通道帽子图，a通道后面做mask用\")\n    r, g, b, a = cv2.split(hat_img)\n    rgbHat = cv2.merge((r, g, b))\n\n    print(\"dlib人脸关键点检测器,正脸检测\")\n    predictorPath = \"shape_predictor_5_face_landmarks.dat\"\n    predictor = dlib.shape_predictor(predictorPath)\n    detector = dlib.get_frontal_face_detector()\n    dets = detector(img, 1)\n\n    print(\"如果检测到人脸\")\n    if len(dets) > 0:\n        for d in dets:\n            x, y, w, h = d.left(), d.top(), d.right() - d.left(), d.bottom() - d.top()\n\n            print(\"关键点检测，5个关键点\")\n            shape = predictor(img, d)\n\n            print(\"选取左右眼眼角的点\")\n            point1 = shape.part(0)\n            point2 = shape.part(2)\n\n            print(\"求两点中心\")\n            eyes_center = ((point1.x + point2.x) // 2, (point1.y + point2.y) // 2)\n\n            print(\"根据人脸大小调整帽子大小\")\n            factor = 1.5\n            resizedHatH = int(round(rgbHat.shape[0] * w / rgbHat.shape[1] * factor))\n            resizedHatW = int(round(rgbHat.shape[1] * w / rgbHat.shape[1] * factor))\n\n            if resizedHatH > y:\n                resizedHatH = y - 1\n\n            print(\"根据人脸大小调整帽子大小\")\n            resizedHat = cv2.resize(rgbHat, (resizedHatW, resizedHatH))\n\n            print(\"用alpha通道作为mask\")\n            mask = cv2.resize(a, (resizedHatW, resizedHatH))\n            maskInv = cv2.bitwise_not(mask)\n\n            print(\"帽子相对与人脸框上线的偏移量\")\n            dh = 0\n            bgRoi = img[y + dh - resizedHatH:y + dh,\n                    (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]\n\n            print(\"原图ROI中提取放帽子的区域\")\n            bgRoi = bgRoi.astype(float)\n            maskInv = cv2.merge((maskInv, maskInv, maskInv))\n            alpha = maskInv.astype(float) / 255\n\n            print(\"相乘之前保证两者大小一致（可能会由于四舍五入原因不一致）\")\n            alpha = cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0]))\n            bg = cv2.multiply(alpha, bgRoi)\n            bg = bg.astype('uint8')\n\n            print(\"提取帽子区域\")\n            hat = cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv))\n\n            print(\"相加之前保证两者大小一致（可能会由于四舍五入原因不一致）\")\n            hat = cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0]))\n            print(\"两个ROI区域相加\")\n            addHat = cv2.add(bg, hat)\n\n            print(\"把添加好帽子的区域放回原图\")\n            img[y + dh - resizedHatH:y + dh,\n            (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] = addHat\n\n            return img\n\n\ndef main_handler(event, context):\n    try:\n        print(\"将接收到的base64图像转为pic\")\n        imgData = base64.b64decode(json.loads(event[\"body\"])[\"pic\"])\n        with open('/tmp/picture.png', 'wb') as f:\n            f.write(imgData)\n\n        print(\"读取帽子素材以及用户头像\")\n        hatImg = cv2.imread(\"hat.png\", -1)\n        userImg = cv2.imread(\"/tmp/picture.png\")\n\n        output = addHat(userImg, hatImg)\n        cv2.imwrite(\"/tmp/output.jpg\", output)\n\n        print(\"读取头像进行返回给用户，以Base64返回\")\n        with open(\"/tmp/output.jpg\", \"rb\") as f:\n            base64Data =  str(base64.b64encode(f.read()), encoding='utf-8')\n\n        return {\n            \"picture\": base64Data\n        }\n    except Exception as e:\n        return {\n            \"error\": str(e)\n        }
\n

至此，即完成了通过用户上传人物头像进行增加圣诞帽的功能。

\n

总结

\n

Serverless架构毕竟是一个新的技术，或者说是一个比较新的 Framework，如果刚开始就通过它来做一些很重的产品，可能会让学习者失去兴趣，但是前期可以通过Serverless架构不断的实现一些有趣的功能，小的应用，例如监控告警、图像识别、图像压缩、图像合成、文本摘要、关键词提取、简单的MapReduce等，通过这些小的应用，一方面可以让我们更加深入了解Serverless架构，另一方面也可以让我们对Serverless的实际应用和价值产生更大的信心。

\n

传统情况下，我们如果要做这样的一个工具，可能需要一个服务器，哪怕没有人使用，也要有一台服务器苦苦支撑，那么仅仅就是一个Demo，也要无时无刻的支出成本，但是在Serverless架构下，通过Serverless弹性伸缩特点让我们不惧怕高并发，通过Serverless的按量付费模式，让我们不惧怕成本支出。

\n

希望各位可以通过我的抛砖引玉，更加深入的了解Serverless架构。

\n
\n
\n
\n
\n

传送门：

\n\n
\n

欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！

","tableOfContents":""},"previousBlog":{"id":"0529eafa-9029-59ad-875f-0b20e3a0c315","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020326/1585231022072-%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_15852308195522.png","authors":["Adrian S."],"categories":["guides-and-tutorials"],"date":"2020-03-17T00:00:00.000Z","title":"看懂 Serverless SSR，这一篇就够了！","description":"了解我们如何为每个 Webiny 网站获得出色的 SEO 支持，以及如何在无服务器环境中使用 SSR 使其超快运行","authorslink":["https://blog.webiny.com/serverless-side-rendering-e1c0924b8da1"],"translators":null,"translatorslink":null,"tags":["Serverless SSR","AWS Lambda"],"keywords":"腾讯云 Serverless,Serverless,Serverless framework","outdated":null},"wordCount":{"words":2153,"sentences":218,"paragraphs":215},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-03-17-serverless-ssr.md","fields":{"slug":"/blog/2020-03-17-serverless-ssr/","keywords":["go","nodejs","react","serverless","ssr","单页应用","服务端渲染","服务器端渲染","客户端渲染","同构渲染","无服务器","页面","缓存","渲染","Lambda","应用程序","方法","服务器"]}},"nextBlog":{"id":"a91ae766-b090-5f4d-891f-3332b7d58e00","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20191230/1577673977066-16ef85f25ee1af09.jpg","authors":["yugasun"],"categories":["best-practice"],"date":"2020-03-10T00:00:00.000Z","title":"Serverless 多环境配置方案探索","description":"业务开发完了，如何管理不同环境的配置呢？","authorslink":["https://github.com/yugasun"],"translators":null,"translatorslink":null,"tags":["Serverless","管理环境"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":true},"wordCount":{"words":241,"sentences":54,"paragraphs":54},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-03-10-serverless-env.md","fields":{"slug":"/best-practice/2020-03-10-serverless-env/","keywords":["koa","nodejs","python","serverless","云函数","serverless","dotenv","yml","配置","release"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"1f1b1317-32a1-50c4-a77f-df648ee9128f","previousBlogId":"0529eafa-9029-59ad-875f-0b20e3a0c315","nextBlogId":"a91ae766-b090-5f4d-891f-3332b7d58e00"}}}