mirror of
https://github.com/sanyuered/WeChat-MiniProgram-AR-WASM.git
synced 2025-09-27 03:15:54 +08:00
added OpenCV
This commit is contained in:
AR Fashion
8
app.json
8
app.json
@@ -8,12 +8,18 @@
|
||||
"pages": [
|
||||
"index"
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "package_lesson2",
|
||||
"pages": [
|
||||
"index"
|
||||
]
|
||||
}
|
||||
],
|
||||
"window": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "微信小程序运行Go",
|
||||
"navigationBarTitleText": "运行WASM",
|
||||
"navigationBarTextStyle": "black"
|
||||
},
|
||||
"sitemapLocation": "sitemap.json"
|
||||
|
||||
71
opencv_dev/assets/app.css
Normal file
71
opencv_dev/assets/app.css
Normal 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
9652
opencv_dev/assets/opencv_exec.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
opencv_dev/assets/sampleImage1.jpg
Normal file
BIN
opencv_dev/assets/sampleImage1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
6
opencv_dev/assets/vue.min.js
vendored
Normal file
6
opencv_dev/assets/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4468
opencv_dev/assets/weui.css
Normal file
4468
opencv_dev/assets/weui.css
Normal file
File diff suppressed because one or more lines are too long
121
opencv_dev/lesson2.html
Normal file
121
opencv_dev/lesson2.html
Normal 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
BIN
opencv_dev/opencv3.4.16.wasm
Normal file
Binary file not shown.
Reference in New Issue
Block a user