触动精灵将图片转成base64字符串后通过post方式上传给服务器
生活随笔
收集整理的這篇文章主要介紹了
触动精灵将图片转成base64字符串后通过post方式上传给服务器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
觸動精靈使用lua實現對手機的自動化操作, 比按鍵精靈好用, 現在有個小需求就是對手機截屏后將圖片通過post方式提交到服務器端.
lua代碼
python用習慣了, 再寫lua的代碼總感覺有點別扭, 有些語法還得再翻翻文檔,這里再復習一下常用的操作:
- 字符串拼接使用.., 例如"hello".." world"
- 調用對象對應的方法需要用冒號,比如var_a:func()
- 表(字典)定義語法和python唯一的區別是key不用加引號,后面=值, 例如table={id=1, value="wtf"}
- 代碼注釋開頭用--
服務器Python代碼
服務器端用flask隨便擼一個處理post請求的api, 這里需要注意的是, 觸動精靈在發送post數據的時候,會將base64編碼里面的+加號替換成空格,所以如果直接用post過來的數據扔給<img>標簽進行解析的話會顯示不出來的, 因此必須在服務器端再將接受到的base64字符串里面的空格替換回+
from flask import Flask, jsonify, request, render_templateapp = Flask(__name__) app.config['JSON_AS_ASCII'] = False@app.route('/', methods=['GET', 'POST']) def index():if request.method == 'POST':# 觸動精靈發送post請求時會將+加號替換成空格,這里需要回轉一下img_data = request.form.get('img').replace(' ', '+') # 接收到的base64數據存到文件里with open('img.base', 'w') as f:f.write(img_data)return jsonify({'code': 0,'msg': 'OJBK成功'})else:# 從文件里面讀出來base64數據, 扔給前端模板渲染成<img>with open('img.base', 'r') as f:img_data = f.read()return render_template('index.html', img=img_data)if __name__ == '__main__':app.run()模板里面注意使用<img>標簽渲染base64格式數據的時候,要在前面加上data:image/png;base64,
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <img src="https://img-blog.csdnimg.cn/2022010703251530080.png"> </body> </html>優化服務器端, png轉成webp格式
由于觸動精靈上傳過來的png格式圖片比較大, 下面用python把png轉成webp格式的base64編碼進行存儲和前端渲染
def png2webp(base_data):"""png轉webp, 需要用到Pillow包, `pip install Pillow`:param base_data: png格式的base64字符串:return: webp格式的base64字符串"""# 先將base64字符串解碼成BytesIO對象bytes_io = io.BytesIO(base64.b64decode(base_data))# 轉換成Image類型對象im = Image.open(bytes_io)# 定義內存中使用的字節類型對象用來存放轉碼后的圖片數據output = io.BytesIO()# 轉換成webp格式后存入二進制對象im.save(output, format='webp')# 二進制對象再轉成base64字符串返回return base64.b64encode(output.getvalue()).decode('utf8')對比一下轉換前后的大小:
- 原始PNG格式: 101,064 字節
- WebP格式: 43,928 字節
轉換后的大小只有原來的43%, 可以說療效是相當顯著的了! 注意模板渲染的時候需要將<img src="https://img-blog.csdnimg.cn/2022010703251530080.png">改成<img src="https://img-blog.csdnimg.cn/2022010703251519722.webp">
總結
以上是生活随笔為你收集整理的触动精灵将图片转成base64字符串后通过post方式上传给服务器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在网页输出10的阶乘.php,VB 用f
- 下一篇： 使用pip安装virtualenv时出现