因?yàn)轫?xiàng)目的原因了解到有一個(gè)python的flask框架，查了一下：
關(guān)于前端圖片上傳的canvas:
如下元素

<canvas id="canvas" width="5" height="5"></canvas>

可以用這樣的方式獲取一個(gè) data-URL

var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL);

// “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC”
設(shè)置jpegs圖片的質(zhì)量

var fullQuality = canvas.toDataURL("image/jpeg", 1.0); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

getContext() 方法返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境。

語(yǔ)法
Canvas.getContext(contextID)
參數(shù)
參數(shù) contextID 指定了您想要在畫(huà)布上繪制的類(lèi)型。當(dāng)前唯一的合法值是 “2d”，它指定了二維繪圖，并且導(dǎo)致這個(gè)方法返回一個(gè)環(huán)境對(duì)象，該對(duì)象導(dǎo)出一個(gè)二維繪圖 API。

提示：在未來(lái)，如果 < canvas> 標(biāo)簽擴(kuò)展到支持 3D 繪圖，getContext() 方法可能允許傳遞一個(gè) “3d” 字符串參數(shù)。

返回值
一個(gè) CanvasRenderingContext2D 對(duì)象，使用它可以繪制到 Canvas 元素中。
后端：
首先pip install Flask
然后新建文件:

from flask import Flask,make_response, jsonifyfrom multiprocessing import Process# 配置全局app app = Flask(__name__) # 導(dǎo)入index中定義的所有函數(shù) #from autotrade.server.index import *def run_index():# 啟動(dòng)web服務(wù)器，使用多線(xiàn)程方式，接收所有http請(qǐng)求app.run(host='0.0.0.0', port=5000, threaded=True)def make_new_response(data):res = make_response(jsonify({'code': 0, 'data': data}))res.headers['Access-Control-Allow-Origin'] = '*'res.headers['Access-Control-Allow-Method'] = '*'res.headers['Access-Control-Allow-Headers'] = '*'return res@app.route('/') def hello_world():return {'hello': 'world!'}@app.route("/test") def test():res = "{'no':'dddd'}"return make_new_response(res)if __name__ == "__main__":app.run(debug=True)

打開(kāi)瀏覽器：

向flask后端發(fā)請(qǐng)求接收?qǐng)D片：（點(diǎn)擊按鈕觸發(fā)事件)
flask:

from flask import Flask,make_response, jsonify from flask_cors import CORS import socket import threading import json import os from io import BytesIO from multiprocessing import Process import io from PIL import Image # 配置全局app app = Flask(__name__) # 導(dǎo)入index中定義的所有函數(shù) #from autotrade.server.index import * def main():# 創(chuàng)建服務(wù)器套接字serversocket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)# 獲取本地主機(jī)名稱(chēng)host = socket.gethostname()# 設(shè)置一個(gè)端口port = 5000# 將套接字與本地主機(jī)和端口綁定serversocket.bind((host, port))# 設(shè)置監(jiān)聽(tīng)最大連接數(shù)serversocket.listen(5)# 獲取本地服務(wù)器的連接信息myaddr = serversocket.getsockname()print("服務(wù)器地址:%s" % str(myaddr))# 循環(huán)等待接受客戶(hù)端信息while True:# 獲取一個(gè)客戶(hù)端連接clientsocket, addr = serversocket.accept()print("連接地址:%s" % str(addr))try:t = ServerThreading(clientsocket) # 為每一個(gè)請(qǐng)求開(kāi)啟一個(gè)處理線(xiàn)程t.start()passexcept Exception as identifier:print(identifier)passpassserversocket.close()passdef run_index():# 啟動(dòng)web服務(wù)器，使用多線(xiàn)程方式，接收所有http請(qǐng)求app.run(host='0.0.0.0', port=5000, threaded=True)CORS(app, resources=r'/*', supports_credentials=True)basedir = os.path.abspath(os.path.dirname(__file__))@app.route('/getPic',methods=['GET', 'POST']) def findpic():img_url = basedir+'/data/tt/b/b_1.png'print(img_url)with open(img_url, 'rb') as f:a = f.read()'''對(duì)讀取的圖片進(jìn)行處理'''img_stream = io.BytesIO(a)img = Image.open(img_stream)imgByteArr = io.BytesIO()img.save(imgByteArr,format='PNG')imgByteArr = imgByteArr.getvalue()print(imgByteArr)return imgByteArrif __name__ == "__main__":app.run(debug=True)

注意：Python在內(nèi)存中讀寫(xiě)數(shù)據(jù)，用到的模塊是StringIO和BytesIO，當(dāng)為StringIO時(shí)getvalue()方法用于獲得寫(xiě)入后的str。StringIO操作的只能是str，如果要操作二進(jìn)制數(shù)據(jù)，就需要使用BytesIO。可以用一個(gè)bytes初始化BytesIO，然后，像讀文件一樣讀取：

>>> from io import BytesIO >>> f = BytesIO(b'\xe4\xb8\xad\xe6\x96\x87') >>> f.read() b'\xe4\xb8\xad\xe6\x96\x87'

BytesIO實(shí)現(xiàn)了在內(nèi)存中讀寫(xiě)bytes。

vue代碼：

<button @click="getPic">獲取圖片</button><img :src="picurl" alt="beachball" /> data () {return {picurl: "",}},methods: {getPic() {var that = this;this.$axios.get('http://127.0.0.1:5000/getPic',{responseType: "arraybuffer",}).then(function (response) {that.picurl ="data:image/jpeg;base64," + that.arrayBufferToBase64(response.data);});},arrayBufferToBase64(buffer) {//第一步，將ArrayBuffer轉(zhuǎn)為二進(jìn)制字符串var binary = "";var bytes = new Uint8Array(buffer);var len = bytes.byteLength;for (var i = 0; i < len; i++) {binary += String.fromCharCode(bytes[i]);}//將二進(jìn)制字符串轉(zhuǎn)為base64字符串return window.btoa(binary);}, }

點(diǎn)擊按鈕后:

后端的顯示:

圖片傳給后端

搗鼓了半天終于把圖片傳給后端了，不過(guò)暫時(shí)用的java測(cè)試。中途遇到無(wú)數(shù)次cannot read property xxx xxx is not defined,懷疑是自己哪些代碼莫名出了問(wèn)題，因?yàn)閏anvas是getelementbyid,所以如果寫(xiě)的是ref的話(huà)是獲取不到的，然后注釋掉了一堆代碼，結(jié)果:

后端的響應(yīng)：

flask獲取圖片數(shù)據(jù)：

flask獲取參數(shù)方式：

request.form.get(“key”, type=str, default=None) 獲取表單數(shù)據(jù)

request.args.get(“key”) 獲取get請(qǐng)求參數(shù)

request.values.get(“key”) 獲取所有參數(shù)

import base64 img1='E:/nsfw_tensorflow/corpus/weibocore_WBC_IMAGE_DATA_SOURCE_6521.jpg'pimg=open(img1, 'rb').read()print(pimg)# base64圖片加密 result = base64.b64encode(pimg)print(result)# 再把加密后的結(jié)果解碼 temp = base64.b64decode(result)print(temp)

現(xiàn)在出現(xiàn)一個(gè)問(wèn)題，從前端發(fā)送圖片之后后端接收到的data一直是str類(lèi)型，不知道怎么取出來(lái)：

@app.route('/getpic', methods=['POST']) def getpic():data = flask.request.get_data().decode('utf-8')data = json.loads(data)data_b64 = data["data"]print(type(data_b64))

修改：

def getpic():data = json.loads(flask.request.get_data("data"))data_64 = str.encode(data['data'])print(type(data_64))print(data_64)

得到類(lèi)型為bytes.
前端去掉base64前面的前綴：

var image = this.thisCancas.toDataURL("image/png").split('base64,')[1];

搞了好久試了好多方法終于把前端的圖片base碼解出來(lái)了！！！！！！激動(dòng)
后端的代碼:

def decode_base64(data):"""Decode base64, padding being optional.:param data: Base64 data as an ASCII byte string:returns: The decoded byte string."""missing_padding = len(data) % 4if missing_padding != 0:data += b'='* (4 - missing_padding)# return base64.decodestring(data)return base64.b64decode(data)#上面這個(gè)函數(shù)用來(lái)解碼base64字符串 @app.route('/getpic', methods=['POST']) def getpic():data = json.loads(flask.request.get_data("data"))data_64 = str.encode(data['data'])print(type(data_64))#print(data_64)print('------------------------')print(str(data_64, 'utf8')) #用這個(gè)方法去掉base64碼前面b'xxx'的bimgdata = decode_base64(data_64)file = open('1.jpg', 'wb')file.write(imgdata)file.close()

其中注意前端發(fā)送的數(shù)據(jù)也經(jīng)過(guò)了處理，使得去掉了img/jpeg前綴

現(xiàn)在載入模型進(jìn)行拍照預(yù)測(cè)：
附上關(guān)鍵的代碼：

import torch from torchvision import transforms def run_index():# 啟動(dòng)web服務(wù)器，使用多線(xiàn)程方式，接收所有http請(qǐng)求app.run(host='0.0.0.0', port=5000, threaded=True) def decode_base64(data):"""Decode base64, padding being optional.:param data: Base64 data as an ASCII byte string:returns: The decoded byte string."""missing_padding = len(data) % 4if missing_padding != 0:data += b'='* (4 - missing_padding)# return base64.decodestring(data)return base64.b64decode(data) transform=transforms.Compose([transforms.Resize(224),transforms.CenterCrop(224),transforms.ToTensor(),transforms.Normalize(mean=[0.485,0.456,0.406],std=[0.229,0.224,0.225])])CORS(app, resources=r'/*', supports_credentials=True) @app.route('/getpic', methods=['POST']) def getpic():data = json.loads(flask.request.get_data("data"))data_64 = str.encode(data['data'])print(type(data_64))#print(data_64)print('------------------------')print(str(data_64, 'utf8'))imgdata = decode_base64(data_64)file = open('1.jpg', 'wb')file.write(imgdata)file.close()image = Image.open(r"1.jpg").convert('RGB')image = transform(image).unsqueeze(0)modelme = torch.load('modefresnet.pkl')modelme.eval()outputs = modelme(image)_, predict = torch.max(outputs.data, 1)for j in range(image.size()[0]):print('predicted: {}'.format(class_names[predict[j]]))return class_names[predict[j]] if __name__ == "__main__":app.run(debug=True)

試了好多次，幾乎都與預(yù)測(cè)結(jié)果相符。
哈哈哈哈哈花了兩天弄這個(gè)，之前關(guān)于圖片解碼編碼一直沒(méi)弄出來(lái)，現(xiàn)在成功了還是挺開(kāi)心的。

總結(jié)

以上是生活随笔為你收集整理的【后端过程记录】用flask搭建服务器作后端接收数据 将base64字符串码解码为可读取文件 载入训练好的模型进行预测的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。