zishuo/WeChat-MiniProgram-AR-WASM
1
0
Fork 0
mirror of https://github.com/sanyuered/WeChat-MiniProgram-AR-WASM.git synced 2025-10-05 23:16:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added OpenCV

Browse Source
This commit is contained in:
AR Fashion
2021-12-06 00:02:43 +08:00
committed by GitHub
parent fad66a56e0
commit c38c70963e
8 changed files with 14325 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app.json
View File

@@ -8,12 +8,18 @@
"pages": [ "pages": [
"index" "index"
] ]
},
{
"root": "package_lesson2",
"pages": [
"index"
]
} }
], ],
"window": { "window": {
"backgroundTextStyle": "light", "backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff", "navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微信小程序运行Go", "navigationBarTitleText": "运行WASM",
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
}, },
"sitemapLocation": "sitemap.json" "sitemapLocation": "sitemap.json"

71
opencv_dev/assets/app.css Normal file
View File

@@ -0,0 +1,71 @@
.page{
background-color: #F8F8F8;
font-size: 16px;
}
.page__hd {
padding: 40px;
}
.page__bd {
padding-bottom: 40px;
}
.page__bd_spacing {
padding-left: 15px;
padding-right: 15px;
}
.page__ft{
padding-bottom: 10px;
text-align: center;
}
.page__title {
text-align: left;
font-size: 20px;
font-weight: 400;
}
.page__desc {
margin-top: 5px;
color: #888888;
text-align: left;
font-size: 14px;
}
.marginTop10{
margin-top: 10px;
}
.loading{
text-align: center;
}
.button-sp-area{
margin: 0 auto;
padding-top: 15px;
width: 60%;
}
.mini-btn{
margin-right: 5px;
}
.weui-panel__hd{
font-weight:bold;
color:#333;
}
.visibleCanvas{
margin:10px auto;
display: block;
}
.hiddenCanvas{
position:fixed;
left:1000px;
width:800%;
height:400%;
}
.inputImage{
width:375px;
display: block;
margin: auto;
}

9652
opencv_dev/assets/opencv_exec.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
opencv_dev/assets/sampleImage1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

6
opencv_dev/assets/vue.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4468
opencv_dev/assets/weui.css Normal file
View File

File diff suppressed because one or more lines are too long

121
opencv_dev/lesson2.html Normal file
View File

@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenCV WebAssembly</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/weui.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div id="app" class="page">
<div class="page__bd">
<div class="weui-panel">
<div class="weui-panel__hd">图像处理</div>
<div class="weui-panel__bd">
<img id="image1" v-bind:src="sampleImage1Url" class="inputImage" />
<canvas id="canvas1" class="visibleCanvas"></canvas>
<div class="weui-media-box">
<a href="javascript:" class="weui-btn weui-btn_primary marginTop10"
v-on:click="btnRun1">灰度化</a>
<a href="javascript:" class="weui-btn weui-btn_primary marginTop10"
v-on:click="btnRun2">边缘检测</a>
<a href="javascript:" class="weui-btn weui-btn_primary marginTop10"
v-on:click="btnRun3">特征点检测</a>
</div>
</div>
</div>
</div>
</div>
<script src="assets/vue.min.js"></script>
<script>
// wasm路径（相对于assets/opencv_exec.js的文件位置）
window.wasm_url = "../opencv3.4.16.wasm";
</script>
<!-- opencv_exec.js会从window.wasm_url获取wasm路径 -->
<script src="assets/opencv_exec.js"></script>
<script>
// 可见画布
const canvas1 = 'canvas1'
// 示例图片
const sampleImage1 = './assets/sampleImage1.jpg'
// 画布最大宽度
const maxCanvasWidth = 375
// 图像元素
const image1 = 'image1'
var app = new Vue({
el: '#app',
data: {
canvas1Width: 375,
canvas1Height: 150,
sampleImage1Url: sampleImage1,
},
mounted: function () {
},
methods: {
imgProcess1(imageData, canvasDom) {
let src = cv.imread(imageData);
let dst = new cv.Mat();
// 灰度化
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);
cv.imshow(canvasDom, dst);
src.delete();
dst.delete()
},
imgProcess2(imageData, canvasDom) {
let src = cv.imread(imageData);
let dst = new cv.Mat();
// 灰度化
cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
// 边缘检测
cv.Canny(src, dst, 50, 100, 3, false);
cv.imshow(canvasDom, dst);
src.delete();
dst.delete()
},
imgProcess3(imageData, canvasDom) {
let src = cv.imread(imageData);
let dst = new cv.Mat();
// 灰度化
cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
var orb = new cv.ORB();
var keypoints= new cv.KeyPointVector();
var descriptors= new cv.Mat();
// 特征点
orb.detect(src,keypoints)
// 特征点的描述因子
orb.compute(src,keypoints,descriptors)
// 绘制特征点
cv.drawKeypoints(src, keypoints, dst)
cv.imshow(canvasDom, dst);
src.delete();
dst.delete()
},
btnRun1() {
var _that = this;
_that.imgProcess1(image1, canvas1)
},
btnRun2() {
var _that = this;
this.imgProcess2(image1, canvas1)
},
btnRun3() {
var _that = this;
this.imgProcess3(image1, canvas1)
},
},
});
</script>
</body>
</html>

BIN
opencv_dev/opencv3.4.16.wasm Normal file
View File

Binary file not shown.