微信小程序开发之——图片内容分析（下）-职坐标

微信小程序开发之——图片内容分析（下）

凌雪 2018-11-12 来源：网络阅读 1121 评论 0

摘要：本文将带你了解微信小程序开发之——图片内容分析（下），希望本文对大家学微信有所帮助。

本文将带你了解微信小程序开发之——图片内容分析（下），希望本文对大家学微信有所帮助。

这一篇介绍开发细节。主要包括两方面，调用Google Cloud Vision API 分析图片微信小程序图片上传。分析图片（通过Vision API实现）之前已经配置好了调用API的环境，现在就来编写代码调用API。# detect_labels.py
from google.cloud import vision

# 分成两个函数是为了给django调用做准备。
def call_vision_api(f): # django调用此函数
    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'))详细说明见Google Cloud Vision API文档和Python Using the Vision API微信小程序图片上传这里分为两部分：django服务端接收图片接口。微信小程序上传图片；首先我先从服务端的接收接口开始介绍。1）服务端上传接口现在我们的建立的django项目的目录结构wxbackground/
├── db.sqlite3
├── manage.py
└── wxbackground
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py首先在wxbackground/wxbackground/目录下建立views.py。因为微信小程序上传是是发送的POST情况，所以我们的view.py里面也应该接收POST请求。view.py中代码如下。# view.py
from django.http import HttpResponse
def upload(request):
if request.method == 'POST': # 判断是否是POST类型
     return HttpResponse('This is POST!') # 测试
else:
     return HttpResponse('Hello world!') # 测试同时需要修改同一目录下的urls.py文件，这个是django的路由，通过在这个文件中配置才能正确的访问到目标函数。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), # 这是刚才添加的函数
]配置完成后在manage.py路径下输入$:python3 manage.py runserver 0.0.0.0:8000在浏览器中输入云虚拟机ip:8000/upload/测试是否配置完成，若配置ok则浏览器页面会显式“Hello world!”。在views.py编写接收文件代码，并调用之前写的图片分析函数。首先将刚才编写的detect_labels.py放入当前目录下。由于我们并不想保存上传的图片，所以我们直接将上传图片流再上传到谷歌API中检测。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') # 微信小程序上传时‘name’字段命名为‘picture’
     if img is None:
         return HttpResponse('You need upload a picture!')
     # 下面调用刚才写好的call_vision_api函数，然后将返回的结果转换为字符串，返回给微信小程序。
     labels = detect_labels.call_vision_api(img)
     return HttpResponse(str(labels))
else:
     return HttpResponse('Hello world!') # 测试这里说明一下，在django中，从FILES.get('picture')得到的文件类型为InMemoryUploadedFile类型，通过调用其read()函数，获得图片IO流。而Vision API需要的也是IO流，所以程序中直接将InMemoryUploadedFile作为call_vision_api函数的输入不会发生类型错误。2）微信小程序上传在配置上传之前，需要先在微信公众平台官网中，将域名添加到添加uploadFile合法域名。可以参看微信小程序 wx.request合法域名配置详解。微信小程序上传需要两个步骤：选择图片；上传图片。在微信小程序API中wx.uploadFile(OBJECT)这里其实已经介绍得很清楚了。我的上传代码index.js如下：const uploadFileUrl = 'https://yoursite/upload/' # yoursite是你申请的域名。

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>
<view>
    <view>
      <view>
        <block wx:if="{{imageSrc}}">
          <view>
            <view>
              <image src="{{imageSrc}}"></image>
            </view>
          </view>
        </block>
        <block wx:else>
          <view class="image-plus image-plus-nb" bindtap="chooseImage">
            <view></view>
            <view></view>
          </view>
          <view>选择图片</view>
        </block>
      </view>
      <view>
        <button type="default" bindtap="check">检测</button>
      </view>
      <view>
        <button type="default" bindtap="reload">重置</button>
      </view>
    </view>
</view>
</view>这里有个小坑，注意一下：微信小程序在电脑上开发时，wx.chooseImage中的sizeType: ['compressed']不会生效，只有在微信上调用小程序时才会生效。完结现在服务端与微信小程序已经搭建完毕，现在我们就可以测试是否能够上传成功。完结撒花。