【SH】微信小程序调用EasyDL零门槛AI开发平台的图像分类研发笔记

news/2024/12/12 19:47:16/

文章目录

  • 微信小程序字符串
    • 字符串模板
    • 字符串拼接
  • 上传图片
    • 编写JS代码
    • 编写wxml代码
    • 编写wxss代码
  • GET请求测试
    • 编写测试代码
    • 域名不合法问题
  • GET和POST请求测试
    • 编写JS代码
    • 编写wxml代码
    • 编写wxss代码
  • 效果展示

微信小程序字符串

字符串模板

这是ES6引入的特性，允许你通过反引号（`）创建模板字符串，并在其中嵌入变量或表达式。

let name = 'Alice';
let age = 25;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);  // 输出: My name is Alice and I am 25 years old.

字符串拼接

通过加号（+）将多个字符串和变量拼接在一起。

let name = 'Alice';
let age = 25;
let message = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(message);  // 输出: My name is Alice and I am 25 years old.

上传图片

图像数据，base64编码，要求base64编码后大小不超过4M，最短边至少15px，最长边最大4096px,支持jpg/png/bmp格式 注意请去掉头部

媒体 / 图片 / wx.chooseImage（弃用）
媒体 / 视频 / wx.chooseMedia
文件 / FileSystemManager / FileSystemManager.readFile

编写JS代码

// index.js
Page({/*** 页面的初始数据*/data: {imagePaths: [], // 用于存储图片路径的数组imageBase64: '', // 用于存储图片转换成的Base64编码},// 按钮点击事件处理函数chooseAndUploadImage: async function () {try {//刷新数据this.setData({imagePaths: [],imageBase64:'',imageClassification:{}});// 图片上传const getImageInfo = await this.uploadImage();console.log('图片上传成功', getImageInfo.tempFiles);this.setData({imagePaths: [getImageInfo.tempFiles[0].tempFilePath]});// 编码转换const getBase64 = await this.convertToBase64(getImageInfo.tempFiles[0].tempFilePath);console.log('转换Base64编码成功！');// console.log('编码转换成功', getBase64.data);this.setData({imageBase64: getBase64.data});// console.log('页面Base64编码参数值:', this.data.imageBase64);} catch (error) {// 处理错误console.error('图片上传操作失败:', error);// 可以给用户一个错误提示// wx.showToast({ title: '请求失败', icon: 'none' });}},uploadImage: function () {return new Promise((resolve, reject) => {// 选择图片wx.chooseMedia({count: 1, // 允许选择的图片数量mediaType: ['image'], // 文件类型sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机sizeType: ['original', 'compressed'], // 是否压缩所选文件，基础库2.25.0前仅对 mediaType 为 image 时有效，2.25.0及以后对全量 mediaType 有效 camera: 'back', // 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头success(res) {resolve(res)// 上传成功后的回调// console.log('上传成功', res.tempFiles); // 这里可以处理服务器返回的数据// console.log(res.tempFiles[0].tempFilePath)// console.log(res.tempFiles[0].size)},fail(err) {reject(err);// 选择图片失败后的回调console.error('选择图片失败', err);}});});},// 图片转base64编码函数convertToBase64: function (filePath) {return new Promise((resolve, reject) => {const fs = wx.getFileSystemManager();fs.readFile({filePath: filePath,encoding: 'base64',success(res) {// const base64Data = 'data:image/png;base64,' + res.data; // 注意：这里假设图片是png格式，你需要根据实际情况修改MIME类型resolve(res);},fail(err) {reject(err);}});});}
})

编写wxml代码

<!--pages/index/index.wxml-->
<view class="disease"><button bindtap="chooseAndUploadImage">选择图片</button><block wx:if="{{imagePaths.length > 0}}"><!-- <image src="{{imagePaths[0]}}" mode="widthFix" style="width: 100%;"></image> --><image class="fixed-image" src="{{imagePaths[0]}}" mode="aspectFit"></image></block><block wx:else><text>没有选择图片</text></block>
</view>

编写wxss代码

/* 疾病图片样式 */
.disease {text-align: center;padding: 20px;
}.fixed-image {width: 100%; /* 宽度设为100% */height: 300px; /* 你可以根据需要调整高度 */object-fit: cover; /* 确保图片按比例缩放并填充容器 */display: block; /* 移除图片下方的默认间隙 */margin: 0 auto; /* 居中显示 */
}

GET请求测试

编写测试代码

在页面的JS文件中写入如下代码:

// 假设这是一个页面（page）的 JS 文件
Page({data: {responseData: {}  // 用于存储服务器返回的响应数据},// 按钮点击事件，触发 POST 请求handleButtonClick: function() {wx.request({url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=替换为你的API_KEY&client_secret=替换为你的SECRET_KEY',  // 请求的 URLmethod: 'GET',  // 指定请求方法为 GETheader: {  // 根据服务器要求设置请求头'content-type': 'application/json'},success: (res) => {// 请求成功时执行的回调函数console.log('请求成功', res.data);this.setData({responseData: res.data  // 将响应数据存储在页面的 data 中});},fail: (error) => {// 请求失败时执行的回调函数console.error('请求失败', error);}});}
});

在 WXML 文件中添加一个按钮：

<!-- 假设这是页面的 WXML 文件 -->
<view><button bindtap="handleButtonClick">发送 POST 请求</button><view><!-- 显示服务器返回的响应数据 --><text>{{responseData['refresh_token']}}</text></view>
</view>

域名不合法问题

域名问题
解决方案
请参考文档：基础能力 / 网络 / 使用说明
网页登录微信小程序管理后台，【管理->开发管理->服务器域名->修改】，添加域名即可。
在这里插入图片描述
微信开发者工具，【详情->项目配置->域名信息】，显示新增的域名说明添加成功。
项目配置

GET和POST请求测试

GET请求的返参作为POST请求的入参

编写JS代码

// index.js
Page({/*** 页面的初始数据*/data: {apiKey: '替换成你的',secretKey: '替换成你的',accessToken: '', // 用于存储服务器返回的access_token值imagePaths: [], // 用于存储图片路径的数组imageBase64: '', // 用于存储图片转换成的Base64编码imageClassification: {} // 用于存储图像分类结果},// 假设这是某个事件处理函数，比如按钮点击事件handleButtonClick: async function () {try {// 判断图片转换编码是否为空,为空就直接返回if (this.data.imageBase64 === '') {console.log('imageBase64 为空');return 0} else {console.log('执行其他操作');// 执行其他操作}// 发起GET请求const getResult = await this.getAccessToken();console.log('AccessToken请求成功!', getResult.data);this.setData({accessToken: getResult.data.access_token});console.log('AccessToken参数值:', this.data.accessToken);// // 从GET请求的响应中提取需要的数据// const neededData = getResult.data.access_token; // 假设someKey是你需要的字段// 使用GET请求的返回值作为POST请求的参数const postResult = await this.postImageClassification();// 处理POST请求的响应console.log('疾病诊断POST请求成功!', postResult.data);this.setData({imageClassification: postResult.data.results});console.log('疾病诊断结果:', this.data.imageClassification);} catch (error) {// 处理错误console.error('疾病诊断请求失败:', error);// 可以给用户一个错误提示// wx.showToast({ title: '请求失败', icon: 'none' });}},// 封装GET请求的函数getAccessToken: function () {return new Promise((resolve, reject) => {wx.request({url: `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${this.data.apiKey}&client_secret=${this.data.secretKey}`, // GET请求的URLmethod: 'GET',success: (res) => {if (res.statusCode === 200) {resolve(res); // 解析Promise为成功状态，并传递响应数据} else {reject(new Error(`GET请求失败，状态码：${res.statusCode}`)); // 解析Promise为失败状态，并传递错误信息}},fail: (err) => {reject(err); // 网络错误或其他错误时解析Promise为失败状态}});});},// 封装POST请求的函数postImageClassification: function () {return new Promise((resolve, reject) => {wx.request({url: `https://aip.baidubce.com/rpc/2.0/ai_custom/v1/classification/pifubingzhenduan?access_token=${this.data.accessToken}`, // POST请求的URLmethod: 'POST',data: {image: this.data.imageBase64 // 将GET请求的返回值作为POST请求的参数},header: {'content-type': 'application/json' // 根据需要设置请求头},success: (res) => {if (res.statusCode === 200) {resolve(res); // 解析Promise为成功状态，并传递响应数据} else {reject(new Error(`POST请求失败，状态码：${res.statusCode}`)); // 解析Promise为失败状态，并传递错误信息}},fail: (err) => {reject(err); // 网络错误或其他错误时解析Promise为失败状态}});});}
})

编写wxml代码

<!-- 诊断 -->
<view class="diagnosis"><button bindtap="handleButtonClick">疾病诊断</button><view class="table"><block wx:for="{{imageClassification}}" wx:key="index"><view class="table-row"><view class="table-cell">{{item.name}}</view> <view class="table-cell">{{item.score}}</view></view></block></view>
</view>

编写wxss代码

/* 诊断样式 */
.diagnosis {padding: 20px;
}.table {display: flex;flex-direction: column;width: 100%;
}.table-row {display: flex;justify-content: space-between;width: 100%;margin-bottom: 10px; /* 根据需要调整行间距 */
}.table-cell {flex: 1; /* 使两列平分宽度 */padding: 10px; /* 根据需要调整单元格内边距 */box-sizing: border-box; /* 确保内边距不影响总宽度 */border: 1px solid #ddd; /* 可选：添加边框 */text-align: center; /* 可选：文本居中 */
}

效果展示

界面效果

界面效果
识别效果

识别效果


http://www.ppmy.cn/news/1554582.html

相关文章

hibernate 配置 二级 缓存

hibernate 配置 二级 缓存

一级缓存 是默认的 是session 级别的缓存 二级缓存是 可选的 是sessionfactory的缓存 hibernate.cfg.xml 加入如下配置 <!-- 开启二级缓存--> <property name"hibernate.cache.use_second_level_cache">true</property> <!-- 使用ecache 作…
阅读更多...
http 和 https 的区别？

http 和 https 的区别？

HTTP (HyperText Transfer Protocol) 和 HTTPS (HyperText Transfer Protocol Secure) 是两种用于在 Web 浏览器和网站服务器之间传输网页的协议&#xff0c;它们的主要区别在于安全性。以下是 HTTP 和 HTTPS 的一些关键区别&#xff1a; 安全性&#xff1a; HTTP&#xff1a;H…
阅读更多...
Windows使用VirtualBox安装macOS

Windows使用VirtualBox安装macOS

您的赞&#xff0c;是Ikun练习时长两年半 和 In Windows 11更新的动力 之前我在这里写了一篇文章&#xff0c;名字是“[教程]用VirtualBox安装MacOS虚拟机”。我感觉这篇文章没有写详细&#xff0c;所以重新写了一篇。 镜像下载 这个吗… [此资源非常稀有&#xff0c;下载此文…
阅读更多...
【数据结构】计数排序的原理及实现

【数据结构】计数排序的原理及实现

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在准备26考研 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章…
阅读更多...
Android APP自学笔记

Android APP自学笔记

摘抄于大学期间记录在QQ空间的一篇自学笔记&#xff0c;当前清理空间&#xff0c;本来想直接删除掉的&#xff0c;但是感觉有些舍不得&#xff0c;因此先搬移过来。 Android导入已有外部数据库 2015.06.26在QQ空间记录&#xff1a;在Android中不能直接打开res aw目录中的数据…
阅读更多...
【MIT-OS6.S081作业1.3】Lab1-utilities primes

【MIT-OS6.S081作业1.3】Lab1-utilities primes

本文记录MIT-OS6.S081 Lab1 utilities 的primes函数的实现过程 文章目录 1. 作业要求primes (moderate)/(hard) 2. 实现过程2.1 代码实现 1. 作业要求 primes (moderate)/(hard) Write a concurrent version of prime sieve using pipes. This idea is due to Doug McIlroy, in…
阅读更多...
蓝桥杯我来了

蓝桥杯我来了

最近蓝桥杯报名快要截止了&#xff0c;我们学校开始收费了&#xff0c;我们学校没有校赛&#xff0c;一旦报名缴费就是省赛&#xff0c;虽然一早就在官网上报名了&#xff0c;但是一直在纠结&#xff0c;和家人沟通&#xff0c;和朋友交流&#xff0c;其实只是想寻求外界的支持…
阅读更多...
分布式 CAP理论 总结

分布式 CAP理论 总结

前言 相关系列 《分布式 & 目录》《分布式 & CAP理论 & 总结》《分布式 & CAP理论 & 问题》 分布式 分布式的核心是将大型业务拆解成多个子业务以使之在不同的机器上执行。分布式是用于解决单个物理机容量&性能瓶颈问题而采用的优化手段&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023