微信小程序之图像智能分析

知识：
微信前端基础、python基础、django基础

设计思路：
前端发送图片（base64格式），后端接收图片，调用腾讯云图像分析接口分析图片，将分析结果返回前端展示。

参数：
image_base64：base64图片

接口：
wx.createCameraContext：创建相机上下文 CameraContext 对象
ctx.takePhoto：拍照
wx.getFileSystemManager().readFile：读取图片base64
wx.showActionSheet：显示操作菜单
wx.showToast：提示信息
wx.navigateTo：保留当前页面，跳转到应用内的某个页面
wx.navigateBack：返回前一页

文件：
前端：
ImgAnalysis：发送图片分析请求
msg:展示后端返回的数据

后端：
views.py：获取请求中的图像
ImageAnalysis.py：图像分析

前端

ImgAnalysis/ImgAnalysis.wxml

<view class="container">
    <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 250px;{{ display_block }}">camera>
    <image src="{{src}}" style="width: 100%; height: 250px;{{ display_none }}">
    image>
<view class="ImgOperate" style="">
  <button class="ImgAnalysisSendBtn" bindtap="reqImgAnalysis" style="{{ display_none }}">
    开始分析
  button>
  <button class="cancelAnalysisBtn" bindtap="cancelAnalysis" style="{{ display_none }}">
    取消
  button>
  <button type="primary" bindtap="takePhoto" style="width:100%;">
    拍照识别
  button>
  <button type="primary" bindtap="localUpImg" style="width:100%;">
    本地上传
  button>
  view>
view>

ImgAnalysis/ImgAnalysis.js

const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: '',
  },

  onLoad: function () {
    this.ctx = wx.createCameraContext();
    this.setData({
      display_none:"display:none;",
      display_block:"display:block;"
    })
  },

  //拍照
  takePhoto: function () {
    this.ctx.takePhoto({
      quality: "high",
      success: (res) => {
        this.setData({
          src: res.tempImagePath,
        })

        var that = this;

        wx.getFileSystemManager().readFile({
          filePath: that.data.src, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            that.setData({
              ori_base64src: res.data,
              display_none: "display:block;",
              display_block: "display:none;"
            })
          }
        })
        
      },
    })
  },

  //请求图像分析
  reqImgAnalysis: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['确认'],
      success(res) {
        if(res.tapIndex === 0){

          wx.showToast({
            title: '数据请求中',
            icon: 'loading',
            duration: 2500
          });
          wx.request({
            url: '图片请求地址',
            method: 'POST',
            data: {
              image_base64: that.data.ori_base64src
            },
            header: {
              'content-type': 'application/json' // 默认值
            },
            success(res) {

              var handle_res = JSON.parse(res.data.data);
              wx.showToast({
                title: '请求成功',
                icon: 'success',
              });
              that.setData({
                returnTabData: handle_res.Labels
              })

              //跳转
              wx.navigateTo({
                url: '../msg/msg_success',
                success: function (res) {
                    res.eventChannel.emit('acceptDataFromOpenerPage', { returnTabData: that.data.returnTabData }),
                    that.setData({
                      display_none: "display:none;",
                      display_block: "display:block;",
                    })
                }
              })
            },
            fail:function(res) {
              console.log(res)
            }
          })
        }
      }
    })
  },

  //本地图片上传
  localUpImg:function() {
    var that = this;
    wx.chooseImage({
      count:1,
      success: function(res) {
        var tempImagePath = res.tempFilePaths[0];
        that.setData({
          src: tempImagePath,
        })

          wx.getFileSystemManager().readFile({
            filePath: that.data.src, //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => { //成功的回调
              that.setData({
                ori_base64src: res.data,
              })
            }
          }),
          that.setData({
            display_none: "display:block;",
            display_block: "display:none;"
          })
        },
    })
  },

  //取消图像分析
  cancelAnalysis:function() {
    var that = this;
    that.setData({
      display_none: "display:none;",
      display_block: "display:block;",
      returnTabData:[]
    })
  }

})

msg/msg_success.wxml

<view class="page">
    <view class="weui-msg">
        <view class="weui-msg__icon-area">
            <icon type="success" size="64">icon>
        view>
        <view class="weui-msg__text-area">
            <view class="weui-msg__title">分析结果view>
            <view class="weui-msg__desc"><text wx:for="{{returnTabData}}">{{item.Name}}、text>view>
        view>
        <view class="weui-msg__opr-area">
            <view class="weui-btn-area">
                <button class="weui-btn" type="primary" bindtap="returnTakePhoto">返回button>
            view>
        view>
    view>
view>

msg/msg_success.js

Page({
  data:{},

  onLoad: function (option) {
    var that = this;
    const eventChannel = this.getOpenerEventChannel()
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function (data) {
      that.setData({
        returnTabData: data.returnTabData
      })
    })
  },

  returnTakePhoto:function() {
    wx.navigateBack({
    })
  }
});

后端

views.py

from django.http import JsonResponse
from django.shortcuts import render
from django.views import View

import json
import logging

from util.tengxunyun.ImageAnalysisApi import ImageAnalysis

logger = logging.getLogger('django')
# Create your views here.

class ImgUploadView(View):

    def get(self,request):
        return JsonResponse({'data':'get'})

    def post(self,request):

        json_data = request.body

        dict_data = json.loads(json_data.decode('utf8'))
        image_base64 = dict_data['image_base64']

        result = ImageAnalysis(image_base64) #图像分析

        return JsonResponse({'data':result})

ImageAnalysis.py

from tencentcloud.common import credential
from tencentcloud.common.profile.client_profile import ClientProfile
from tencentcloud.common.profile.http_profile import HttpProfile
from tencentcloud.common.exception.tencent_cloud_sdk_exception import TencentCloudSDKException
from tencentcloud.tiia.v20190529 import tiia_client, models

def ImageAnalysis(ImageBase64):
    try:
        cred = credential.Credential("SecretId", "SecretKey")
        httpProfile = HttpProfile()
        httpProfile.endpoint = "tiia.tencentcloudapi.com"

        clientProfile = ClientProfile()
        clientProfile.httpProfile = httpProfile
        client = tiia_client.TiiaClient(cred, "ap-guangzhou", clientProfile)

        req = models.DetectLabelRequest()
        params = '{"ImageBase64":"%s"}'%ImageBase64
        req.from_json_string(params)

        resp = client.DetectLabel(req)
        # print(resp.to_json_string())
        return resp.to_json_string()

    except TencentCloudSDKException as err:
        print(err)

效果图：


个人微信公众号推荐，专为各位IT好友分享资源（已分享上百G资源，涵盖了 微信小程序、Java、Python、人工智能等）