mirror of
https://github.com/sanyuered/WeChat-MiniProgram-AR-WASM.git
synced 2025-10-05 23:16:50 +08:00
121 lines
3.2 KiB
HTML
121 lines
3.2 KiB
HTML
<!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> |