新年要到了，明天就是2020了，還沒人送你頭像裝飾？讓Serverless架構送你吧！
先分享一下地址：(http://serverless.0duzhan.com/app/new_year_add_photo_decorate/)
整體預覽：
主要功能就是選擇一個圖片，上傳自己的頭像，然后點擊生成就可以：
代碼也很簡單：
import base64, json
from PIL import Image
import uuid
def return_msg(error, msg):
return_data = {
"uuid": str(uuid.uuid1()),
"error": error,
"message": msg
}
print(return_data)
return return_data
def do_circle(base_pic):
icon_pic = Image.open(base_pic).convert("RGBA")
icon_pic = icon_pic.resize((500, 500), Image.ANTIALIAS)
icon_pic_x, icon_pic_y = icon_pic.size
temp_icon_pic = Image.new('RGBA', (icon_pic_x + 600, icon_pic_y + 600), (255, 255, 255))
temp_icon_pic.paste(icon_pic, (300, 300), icon_pic)
ima = temp_icon_pic.resize((200, 200), Image.ANTIALIAS)
size = ima.size
# 因為是要圓形，所以需要正方形的圖片
r2 = min(size[0], size[1])
if size[0] != size[1]:
ima = ima.resize((r2, r2), Image.ANTIALIAS)
# 最后生成圓的半徑
r3 = 60
imb = Image.new('RGBA', (r3 * 2, r3 * 2), (255, 255, 255, 0))
pima = ima.load() # 像素的訪問對象
pimb = imb.load()
r = float(r2 / 2) # 圓心橫坐標
for i in range(r2):
for j in range(r2):
lx = abs(i - r) # 到圓心距離的橫坐標
ly = abs(j - r) # 到圓心距離的縱坐標
l = (pow(lx, 2) + pow(ly, 2)) ** 0.5 # 三角函數(shù) 半徑
if l < r3:
pimb[i - (r - r3), j - (r - r3)] = pima[i, j]
return imb
def add_decorate(base_pic):
try:
base_pic = "./base/%s.png" % (str(base_pic))
user_pic = Image.open("/tmp/picture.png").convert("RGBA")
temp_basee_user_pic = Image.new('RGBA', (440, 440), (255, 255, 255))
user_pic = user_pic.resize((400, 400), Image.ANTIALIAS)
temp_basee_user_pic.paste(user_pic, (20, 20))
temp_basee_user_pic.paste(do_circle(base_pic), (295, 295), do_circle(base_pic))
temp_basee_user_pic.save("/tmp/output.png")
return True
except Exception as e:
print(e)
return False
def main_handler(event, context):
try:
print("將接收到的base64圖像轉為pic")
imgData = base64.b64decode(json.loads(event["body"])["pic"].split("base64,")[1])
with open('/tmp/picture.png', 'wb') as f:
f.write(imgData)
basePic = json.loads(event["body"])["base"]
addResult = add_decorate(basePic)
if addResult:
with open("/tmp/output.png", "rb") as f:
base64Data = str(base64.b64encode(f.read()), encoding='utf-8')
return return_msg(False, {"picture": base64Data})
else:
return return_msg(True, "飾品添加失敗")
except Exception as e:
return return_msg(True, "數(shù)據(jù)處理異常： %s" % str(e))
def test():
with open("test.png", 'rb') as f:
image = f.read()
image_base64 = str(base64.b64encode(image), encoding='utf-8')
event = {
"requestContext": {
"serviceId": "service-f94sy04v",
"path": "/test/{path}",
"httpMethod": "POST",
"requestId": "c6af9ac6-7b61-11e6-9a41-93e8deadbeef",
"identity": {
"secretId": "abdcdxxxxxxxsdfs"
},
"sourceIp": "14.17.22.34",
"stage": "release"
},
"headers": {
"Accept-Language": "en-US,en,cn",
"Accept": "text/html,application/xml,application/json",
"Host": "service-3ei3tii4-251000691.ap-guangzhou.apigateway.myqloud.com",
"User-Agent": "User Agent String"
},
"body": "{\"pic\":\"%s\", \"base\":\"1\"}" % image_base64,
"pathParameters": {
"path": "value"
},
"queryStringParameters": {
"foo": "bar"
},
"headerParameters": {
"Refer": "10.0.2.14"
},
"stageVariables": {
"stage": "release"
},
"path": "/test/value",
"queryString": {
"foo": "bar",
"bob": "alice"
},
"httpMethod": "POST"
}
print(main_handler(event, None))
if __name__ == "__main__":
test()
在我的目錄下還有幾個圖片文件：
image
另外這個代碼需要依賴pillow，但是我電腦時mac的，pillow又有二進制，所以之前的項目就派上用場了：
http://serverless.0duzhan.com/app/new_year_greeting_card/
image
下載之后，直接放目錄下：
image
然后還需要有一個前端頁面，用mui，index頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2020頭像大變樣 - 頭像SHOW - 自豪的采用騰訊云Serverless架構！</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript">
thisPic = null
function getFileUrl(sourceId) {
var url;
thisPic = document.getElementById(sourceId).files.item(0)
if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
url = document.getElementById(sourceId).value;
} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.aaaaaa = url;
imgPre.style = "display: block;";
}
function clickChose() {
document.getElementById("imgOne").click()
}
function getNewPhoto() {
document.getElementById("result").innerText = "系統(tǒng)處理中，請稍后..."
var oFReader = new FileReader();
oFReader.readAsDataURL(thisPic);
oFReader.onload = function (oFREvent) {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (JSON.parse(xmlhttp.responseText)["error"]) {
document.getElementById("result").innerText = JSON.parse(xmlhttp.responseText)["message"];
} else {
document.getElementById("result").innerText = "長按保存圖像";
document.getElementById("new_photo").aaaaaa = "data:image/png;base64," + JSON.parse(xmlhttp.responseText)["message"]["picture"];
document.getElementById("new_photo").style = "display: block;";
}
}
}
var url = " http://service-8d3fi753-1256773370.bj.apigw.tencentcs.com/release/new_year_add_photo_decorate"
var obj = document.getElementsByName("base");
var baseNum = "1"
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].checked)
if (obj[i].checked) {
baseNum = obj[i].value;
}
}
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/json");
var postData = {
pic: oFREvent.target.result,
base: baseNum
}
xmlhttp.send(JSON.stringify(postData));
}
}
</script>
<!--標準mui.css-->
<link rel="stylesheet" href="./css/mui.min.css">
</head>
<body>
<h3 style="text-align: center; margin-top: 30px">2020頭像SHOW</h3>
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
第一步：選擇一個你喜歡的圖片
</div>
</div>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/1.png" width="100%"><input type="radio" name="base" value="1" checked></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/2.png" width="100%"><input type="radio" name="base" value="2"></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/11.png" width="100%"><input type="radio" name="base" value="11"></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/4.png" width="100%"><input type="radio" name="base" value="4"></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/5.png" width="100%"><input type="radio" name="base" value="5"></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/6.png" width="100%"><input type="radio" name="base" value="6"></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/12.png" width="100%"><input type="radio" name="base" value="12"></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/8.png" width="100%"><input type="radio" name="base" value="8"></label></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label>
<img aaaaaa="./base/3.png" width="100%"><input type="radio" name="base" value="3"></label></li>
</ul>
</div>
</div>
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
第二步：上傳一張你的頭像
</div>
<div>
<form>
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id, 'photo')" style="display: none;"
accept="image/*">
<center style="margin-bottom: 10px">
<input type="button" value="點擊此處上傳頭像" onclick="clickChose()"/>
<img id="photo" aaaaaa="" width="300px" , height="300px" style="display: none;"/>
</center>
</form>
</div>
</div>
</div>
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
第三步：點擊生成按鈕獲取新年頭像
</div>
<div>
<center style="margin-bottom: 10px">
<input type="button" value="生成新年頭像" onclick="getNewPhoto()"/>
<p id="result"></p>
<img id="new_photo" aaaaaa="" width="300px" , height="300px" style="display: none;"/>
</center>
</div>
</div>
</div>
<p style="text-align: center">
本項目自豪的<br>通過Serverless Framework<br>搭建在騰訊云SCF上
</p>
</body>
</html>
最后再來一個Yaml：
new_year_add_photo_decorate:
component: "@serverless/tencent-scf"
inputs:
name: myapi_new_year_add_photo_decorate
codeUri: ./new_year_add_photo_decorate
handler: index.main_handler
runtime: Python3.6
region: ap-beijing
description: 新年為頭像增加飾品
memorySize: 128
timeout: 5
events:
- apigw:
name: serverless
parameters:
serviceId: service-8d3fi753
environment: release
endpoints:
- path: /new_year_add_photo_decorate
description: 新年為頭像增加飾品
method: POST
enableCORS: true
param:
- name: pic
position: BODY
required: 'FALSE'
type: string
desc: 原始圖片
- name: base
position: BODY
required: 'FALSE'
type: string
desc: 飾品ID
myWebsite:
component: '@serverless/tencent-website'
inputs:
code:
aaaaaa: ./new_year_add_photo_decorate/web
index: index.html
error: index.html
region: ap-beijing
bucketName: new-year-add-photo-decorate
還有還有我開源的git地址：
https://github.com/anycodes/ServerlessPractice?
image
