笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

小程序物体识别开发（腾讯云轻量云服务器搭建）_微信小程序物体识别

作者：笔触狂放9 | 2024-04-07 10:20:51

踩

微信小程序物体识别

1、拥有一台安装好宝塔面板以及anaconda的云服务器（轻量级）

2、新建shendu文件夹

进入xshell，打开一个终端，进入shendu文件夹（cd shendu/），运行编辑环境（source /home/anconda3/bin/activate）安装django3.2软件（pip install Django==3.2），新建一个django网站mysite（django-admin startproject mysite）

3、上传yolov3模型及代码

进入mysite文件夹（cd mysite），新建一个名为image的app应用（python manage.py startapp image），安装cv2软件及imgaug等（pip install opencv-python、pip install imgaug），在mysite文件夹下上传yolov3模型及代码，然后解压（unzip YOLOv3.zip）

4、以下作必要的文件修改：

文件	修改内容
/shendu/mysite/mysite/settings.py
/shendu/mysite/mysite/settings.py
/shendu/mysite/mysite/urls.py

/shendu/mysite/image/views.py

from django.shortcuts import render

from django.http import JsonResponse, HttpResponse

import base64

import numpy as np

import cv2

import sys

sys.path.append('/shendu/mysite/YOLOv3')

from YOLOv3.pytorchyolo import models, detect, utils

# 加载YOLO模型

model = models.load_model(

"/shendu/mysite/YOLOv3/config/yolov3.cfg",

"/shendu/mysite/YOLOv3/weights/yolov3.weights")

# 加载类别标签名字

classes = utils.utils.load_classes("/shendu/mysite/YOLOv3/data/coco.names")

# 定义路由响应函数

def image_view(request):

if request.method == 'POST':

# 获取客户端发送的数据

# text_data = request.POST.get('image')

# print(text_data)

text_data = request.body.decode('utf-8')

print(text_data)

# 开始检测识别

decoded_data = base64.b64decode(text_data)

nparr = np.frombuffer(decoded_data, np.uint8)

img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)

# 用YOLO模型推理图片

detections = detect.detect_image(model, img)

detections_list = []

for i in range(len(detections)):

temp = {}

temp['left'] = detections[i][0].item()

temp['top'] = detections[i][1].item()

temp['width'] = (detections[i][2]-detections[i][0]).item()

temp['height'] = (detections[i][3]-detections[i][1]).item()

temp['probability'] = detections[i][4].item()

temp['class'] = classes[int(detections[i][5])]

detections_list.append(temp)

# 处理数据并生成响应

response_data = {

'message': 'okokok',

'data': detections_list

}

# 返回JSON响应

return JsonResponse(response_data)

5、Django设置

检查您的Django项目的设置文件（settings.py）中的ALLOWED_HOSTS设置。确保您设置了正确的主机名或IP地址以允许访问网站。例如，如果要允许所有主机访问网站，可以将ALLOWED_HOSTS设置为['*']。

6、绑定IP地址

默认情况下，Django服务器会绑定到127.0.0.1（即localhost）上，这意味着只能从本地访问。如果您希望从其他计算机上访问该网站，则需要将Django服务器绑定到服务器的公共IP地址上。您可以尝试使用（python manage.py runserver 0.0.0.0:8000)命令来绑定到所有可用的网络接口上。(注意：要开放防火墙端口)

7、安装libGL.so.1库

sudo yum install libGL.so.1

8、安装torchvision

pip install torchvision

9、报错

解决:这个消息表明您有未应用的数据库迁移。迁移是用于管理数据库模式更改的机制，每当您更改了Django应用程序的模型（models）时，都需要应用迁移以更新数据库。

要解决这个问题，您可以运行`python manage.py migrate`命令来应用未应用的迁移。请按照以下步骤操作：

1. 打开命令行终端，并确保您的当前工作目录是您的Django项目的根目录。

2. 运行以下命令：

```shell

python manage.py migrate

```

这将应用所有未应用的迁移，并更新数据库模式以与您的模型定义保持一致。

3. 根据需要，您可能还需要运行`python manage.py makemigrations`命令来生成新的迁移文件，以便将最新的模型更改应用到数据库。

```shell

python manage.py makemigrations

```

这将检测您的模型更改并生成相应的迁移文件，您可以根据需要进行自定义。

直到出现以下情况为运行成功：

10、访问网页

11、安装微信开发者工具并新建一个微信小程序，如下图，其中AppID从步骤一中你本人的小程序账号获得。

12、将image文件夹放入新建的项目内，然后文件系统如下图：

以下作必要的文件修改：

xiaochenxu/object recognition/app.json

{

"pages": [

"pages/index/index",

"pages/im/index"

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "物体识别",

"navigationBarTextStyle": "black"

"style": "v2",

"sitemapLocation": "sitemap.json",

"tabBar": {

"color": "#515151",

"selectedColor": "#3CC4A9",

"borderStyle": "black",

"backgroundColor": "#ffffff",

"list": [{

"pagePath": "pages/index/index",

"text": "拍照识别",

"iconPath": "images/scan.png",

"selectedIconPath": "images/select-scan.png"

},{

"pagePath": "pages/im/index",

"text": "科普知识",

"iconPath": "images/article.png",

"selectedIconPath": "images/select-article.png"

}

]

"lazyCodeLoading": "requiredComponents"

}

xiaochenxu/object recognition/pages/index/index.js 其中url: 'http://公网ip:8000/image/'必须修改成你的image应用路由，可有步骤二第（6）步查到

let base64Str = ""

Page({

data: {

boxInfo: "",

imgSrc: "",

ratio: 1

handleChoose: function(){

wx.chooseMedia({

count: 1,

mediaType: ['image'],

sourceType: ['album', 'camera'],

maxDuration: 30,

camera: 'back',

sizeType: ['compressed'],

success: (res)=>{

console.log(res)

this.setData({

imgSrc: res.tempFiles[0].tempFilePath

})

this.encode(res.tempFiles[0].tempFilePath)

wx.getImageInfo({

src: res.tempFiles[0].tempFilePath,

success: (res)=>{

console.log('原图相关信息', res)

this.setData({

ratio: 300/res.width

})

}

})

fail: (res)=>{

console.log(res)

complete: (res)=>{

console.log('完成图片选择')

})

encode(filePath){

// console.log(filePath)

// 读取文件信息，通过base64方式显示出来

let fs = wx.getFileSystemManager();

fs.readFile({

filePath: filePath,

encoding: 'base64',

success: (res)=>{

base64Str = res.data,

console.log("转化后的base64：", base64Str)

// wx.request({

// method: 'POST',

// url: 'http://region-8.seetacloud.com:14019/image/',

// data: {

// image: base64Str

// },

// header: {

// 'content-type': 'application/x-www-form-urlencoded'

// },

// success: (res)=>{

// console.log(res)

// this.setData({

// boxInfo: res.data.data[0]

// })

// }

// })

wx.cloud.callFunction({

name: "sendHttp2",

data: {

url: 'http://公网ip:8000/image/',

data: base64Str

success: (res)=>{

const result = JSON.parse(res.result)

// console.log("云函数调用成功",result.data[0].left)

this.setData({

boxInfo: result.data[0]

})

complete: (res)=>{

console.log("云函数调用完成",res)

}

})

fail: ()=>{

wx.showToast({

title: '转化图片失败',

})

complete: ()=>{

console.log("转化图片完成了")

}

})

}

})

xiaochenxu/object recognition/pages/index/index.wxml

<button bindtap="handleChoose">拍照或选照片</button>

<view class="box">

<view wx:if="{{boxInfo}}" class='position' style="left:{{boxInfo.left*ratio}}px;top:{{boxInfo.top*ratio}}px;width:{{boxInfo.width*ratio}}px;height:{{boxInfo.height*ratio}}px"></view>

<image mode="widthFix" src="{{imgSrc}}"></image>

</view>

<view wx:if="{{boxInfo}}" class="txtbox" style="text-align: center;">

<view>分类: {{boxInfo.class}}</view>

</view>

xiaochenxu/object recognition/pages/index/index.wxss

image{

width: 300px;

}

.box{

position: relative;

width: 300px;