1.登录阿里云云开发平台 https://workbench.aliyun.com/
2.创建新应用
3.下载垃圾分类设计稿.sketch
文件 https://wb-case-showroom.oss-cn-shanghai.aliyuncs.com/demo/垃圾分类设计稿.sketch
4.开发部署
5.右键 Open With imgcook studio
6.导入 -> 选择一个文件 -> 把下载的垃圾分类设计稿.sketch
导入
7.导出
8.点击 + 号,将属性id设置为image
名称和类型的id分别设置为name和category
选择图片,在右侧事件添加onClick原生事件
输入以下代码并保存
function onClick(e) {
function select(handler) {
var input = document.createElement('input');
input.type = 'file';
input.onchange = function() {
var files = Array.from(input.files);
handler(null, files[0]);
};
input.click();
}
select((err, file) => {
const filename = (new Date().getTime()) + '_' + file.name
const freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = () => {
const img = document.getElementById('image');
img.src = freader.result;
};
fetch('/policy', {
method: 'post'
})
.then((res) => res.json())
.then((policy) => {
console.log(policy);
const formData = new FormData();
formData.append('Filename', filename);
formData.append(
'key',
policy.dir + '/' + filename
);
formData.append('OSSAccessKeyId', policy.accessid);
formData.append('policy', policy.policy);
formData.append('Signature', policy.signature);
formData.append('success_action_status', '200');
formData.append('file', file);
return fetch(policy.host, {
method: 'post',
body: formData
}).then(() => policy);
})
.then((policy) => {
const imageUrl = [policy.host, policy.dir, filename].join('/');
return fetch(`/algo`, {
method: 'post',
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
body: `imageUrl=${imageUrl}`
});
})
.then((res) => res.json())
.then(({
Data
}) => {
if (!Data) {
alert('无法识别该图片');
return;
}
const {
Category,
Rubbish
} = Data.Elements[0];
document.getElementById('name').innerText = Rubbish || '未识别';
document.getElementById('category').innerText = Category || '未识别';
console.log(data);
});
});
}
9.保存项目并创建
10.代码 -> H5开发规范 ->关闭
11.左侧创建imgcook
文件夹,导出代码到该文件夹
12.打卡imgcook
文件夹里的index.html
文件,修改标题
13.在云开发平台的应用配置里批量添加环境变量
AKID=LTAI4G1j3U8ue1yT3g6Tg1TG
AKSK=WB8Ev6zMHoKQnUSLp8V4zP7xeAgbWC
REGION=cn-shanghai
OSSBUCKET=wb-case-showroom
OSSDIR=photo
14.部署
15.加上/imgcook/index.html
就能看到了