微信小程序——圖片內(nèi)容分析（下）
上一篇介紹了環(huán)境的搭建，這一篇介紹開發(fā)細(xì)節(jié)。主要包括兩方面，調(diào)用Google Cloud Vision API 分析圖片微信小程序圖片上傳。分析圖片（通過Vision API實(shí)現(xiàn)）之前已經(jīng)配置好了調(diào)用API的環(huán) ...
上一篇介紹了環(huán)境的搭建，這一篇介紹開發(fā)細(xì)節(jié)。主要包括兩方面，
- 調(diào)用Google Cloud Vision API 分析圖片
- 微信小程序圖片上傳。
分析圖片（通過Vision API實(shí)現(xiàn)）
之前已經(jīng)配置好了調(diào)用API的環(huán)境，現(xiàn)在就來編寫代碼調(diào)用API。
# detect_labels.py
from google.cloud import vision
# 分成兩個(gè)函數(shù)是為了給django調(diào)用做準(zhǔn)備。
def call_vision_api(f): # django調(diào)用此函數(shù)
vision_client = vision.Client()
image = vision_client.image(content=f.read())
labels = image.detect_labels()
label_list = [label.description for label in labels]
return label_list
def detet_image(file_name):
with open(file_name, 'rb') as f:
return call_vision_api(f)
if __name__ == '__main__':
print(detet_image('test.jpg'))
詳細(xì)說明見Google Cloud Vision API文檔和Python Using the Vision API
微信小程序圖片上傳
這里分為兩部分：
- django服務(wù)端接收?qǐng)D片接口。
- 微信小程序上傳圖片；
首先我先從服務(wù)端的接收接口開始介紹。
1）服務(wù)端上傳接口
現(xiàn)在我們的建立的django項(xiàng)目的目錄結(jié)構(gòu)
wxbackground/
├── db.sqlite3
├── manage.py
└── wxbackground
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
-
首先在wxbackground/wxbackground/目錄下建立views.py。因?yàn)槲⑿判〕绦蛏蟼魇鞘前l(fā)送的POST情況，所以我們的view.py里面也應(yīng)該接收POST請(qǐng)求。view.py中代碼如下。
# view.py from django.http import HttpResponse def upload(request): if request.method == 'POST': # 判斷是否是POST類型 return HttpResponse('This is POST!') # 測(cè)試 else: return HttpResponse('Hello world!') # 測(cè)試同時(shí)需要修改同一目錄下的urls.py文件，這個(gè)是django的路由，通過在這個(gè)文件中配置才能正確的訪問到目標(biāo)函數(shù)。urls.py代碼如下：
# urls.py from django.conf.urls import url from django.contrib import admin from . import views urlpatterns = [ url(r'^admin/', admin.site.urls), # 這是管理界面 url(r'^test/', views.upload), # 這是剛才添加的函數(shù) ]配置完成后在manage.py路徑下輸入
$:python3 manage.py runserver 0.0.0.0:8000在瀏覽器中輸入云虛擬機(jī)ip:8000/upload/測(cè)試是否配置完成，若配置ok則瀏覽器頁面會(huì)顯式“Hello world!”。
-
在views.py編寫接收文件代碼，并調(diào)用之前寫的圖片分析函數(shù)。首先將剛才編寫的detect_labels.py放入當(dāng)前目錄下。
由于我們并不想保存上傳的圖片，所以我們直接將上傳圖片流再上傳到谷歌API中檢測(cè)。
view.py中代碼如下：# view.py from django.http import HttpResponse from . import detect_labels def upload(request): if request.method == 'POST': # 判斷是否是POST類型 img = request.FILES.get('picture') # 微信小程序上傳時(shí)‘name’字段命名為‘picture’ if img is None: return HttpResponse('You need upload a picture!') # 下面調(diào)用剛才寫好的call_vision_api函數(shù)，然后將返回的結(jié)果轉(zhuǎn)換為字符串，返回給微信小程序。 labels = detect_labels.call_vision_api(img) return HttpResponse(str(labels)) else: return HttpResponse('Hello world!') # 測(cè)試這里說明一下，在django中，從
FILES.get('picture')得到的文件類型為InMemoryUploadedFile類型，通過調(diào)用其read()函數(shù)，獲得圖片IO流。而Vision API需要的也是IO流，所以程序中直接將InMemoryUploadedFile作為call_vision_api函數(shù)的輸入不會(huì)發(fā)生類型錯(cuò)誤。
2）微信小程序上傳
在配置上傳之前，需要先在微信公眾平臺(tái)官網(wǎng)中，將域名添加到添加uploadFile合法域名?？梢詤⒖次⑿判〕绦?wx.request合法域名配置詳解。
微信小程序上傳需要兩個(gè)步驟：
- 選擇圖片；
- 上傳圖片。
在微信小程序API中wx.uploadFile(OBJECT)這里其實(shí)已經(jīng)介紹得很清楚了。
我的上傳代碼index.js如下：
const uploadFileUrl = 'https://yoursite/upload/' # yoursite是你申請(qǐng)的域名。
Page({
data: {
imageSrc: null,
},
chooseImage: function () { //綁定的chooseImage控件
var that = this
wx.chooseImage({ // 選定圖片
sourceType: ['camera', 'album'],
sizeType: ['compressed'], //這里選擇壓縮圖片
count: 1,
success: function (res) {
console.log(res)
that.setData({
imageSrc: res.tempFilePaths[0]
})
}
})
},
check: function (e) { // 綁定的check button
var that = this
wx.uploadFile({ // 上傳圖片
url: uploadFileUrl,
name: 'picture',
filePath: that.data.imageSrc,
formData: {
'user': 'test'
},
success: function (res) {
console.log('imageSrc is:', that.data.imageSrc)
console.log('uploadImage success, res is:', res)
wx.showModal({
title: "圖片詳情",
content: res.data,
showCancel: false,
confirmText: "確定"
})
},
fail: function ({errMsg}) {
console.log('uploadImage fail, errMsg is', errMsg)
}
})
},
reload: function (e) { // 綁定的reload button
this.setData({
imageSrc: null
})
}
})
微信小程序界面布局index.wxml如下：
<view class="container">
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<block wx:if="{{imageSrc}}">
<view class="weui-uploader__files">
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{imageSrc}}"></image>
</view>
</view>
</block>
<block wx:else>
<view class="image-plus image-plus-nb" bindtap="chooseImage">
<view class="image-plus-horizontal"></view>
<view class="image-plus-vertical"></view>
</view>
<view class="image-plus-text">選擇圖片</view>
</block>
</view>
<view class="body-view">
<button type="default" bindtap="check">檢測(cè)</button>
</view>
<view class="body-view">
<button type="default" bindtap="reload">重置</button>
</view>
</view>
</view>
</view>
這里有個(gè)小坑，注意一下：微信小程序在電腦上開發(fā)時(shí)，wx.chooseImage中的sizeType: ['compressed']不會(huì)生效，只有在微信上調(diào)用小程序時(shí)才會(huì)生效。
完結(jié)
現(xiàn)在服務(wù)端與微信小程序已經(jīng)搭建完畢，現(xiàn)在我們就可以測(cè)試是否能夠上傳成功。完結(jié)撒花。
