[Vue] 09 - Canvas + OpenCV.js

Case: Canvas and Router

一、效果圖

側邊欄效果。

代碼下載：https://github.com/jiaopi404/my-canvas

 

二、demo-001 子模塊 

執行動畫

window.requestAnimationFrame(this.draw)

對canvas做具體操作。

<template>
  <div id="demo-001">
    <canvas id="demo-001-canvas">
      不支持 canvas
    </canvas>
  </div>
</template>

<script>
export default {
  name: 'demo-001.vue',
  data () {
    return {
      ctx: null,
      x: 0
    }
  },
  mounted () {
    this.init()
    // window.requestAnimationFrame(this.draw)
    this.draw()
  },
  methods: {
    init () {
      const canvas = document.getElementById('demo-001-canvas')
      this.ctx = canvas.getContext('2d')
    },
    draw () {
      // this.drawRect()　　// 意義不大，可以注釋掉 this.drawPolygon()
      this.x += 1
      if (this.x >= 270) {
        this.x = 0
      }
      window.requestAnimationFrame(this.draw)
    },
 drawRect () { this.ctx.strokeRect(50, 50, 50, 50) this.ctx.fillRect(75, 75, 25, 25) },
    drawPolygon () {
      this.ctx.clearRect(0, 0, 300, 150)
      this.ctx.beginPath()
      this.ctx.moveTo(this.x, 75)
      this.ctx.lineTo(this.x + 30, 45)
      this.ctx.lineTo(this.x + 30, 105)
      // this.ctx.stroke()
      this.ctx.fillStyle = 'pink'
      // this.ctx.rotate(5 * Math.PI / 360)
      this.ctx.fill()
      // note
    }
  }
}
</script>

<style lang="scss" scoped>
#demo-001 {
  #demo-001-canvas {
    border-radius: 5px;
    border: 1px solid #333;
  }
}
</style>

 

三、home 主模塊

參考：[Vue] 06 - Route

<template>
  <div id="home">

    <div class="menu">
      <el-scrollbar>
        <ul>
          <li><router-link to="demo-001">demo-001</router-link></li>
          <li><router-link to="demo-002">demo-002</router-link></li>
        </ul>
      </el-scrollbar>
    </div>

    <div class="body">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>

export default {
  name: 'home',
  components: {

  }
}
</script>

<style lang="scss" scoped>
#home {
  display: flex;
  height: 100%;
  .menu {
    padding: 10px;
    width: 200px;
    height: 100%;
    background-color: pink;
    li {
      margin-bottom: 5px;
    }
  }
  .body {
    flex: auto;
    padding: 10px;
  }
}
</style>

 

四、路由配置

Ref: 關於Vue.use()詳解（跟 install 有關）

參考：[Vue] 06 - Route

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

此處，單獨一個文件 router.js 進行路由配置。

import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: '/demo-001'
    },
    {
      path: '/demo-001',
      name: 'demo-001',
      component: () => import('@/components/demo-001/demo-001.vue')
    },
    {
      path: '/demo-002',
      name: 'demo-002',
      component: () => import('@/components/demo-002/demo-002.vue')
    }
  ]
})

 

 

 

OpenCV.js

一、資源

Ref: https://github.com/greenpdx/opencv-vue [OpenCV 3.3.1 版本有點老舊]

 

Ref: https://github.com/hengzi/opencv-vue [預編譯出opencvjs的包文件，也是 3.3.1 版本，再動態引用]

使用OpenCV.js進行人臉檢測。

 

Ref: https://github.com/abtassociates/mecvision [前后端完整展示]

 

Ref: https://github.com/latsic/imgalign

WebAssembly的例子： 

• • Vue - The web framework used
  • Vuex - Vue store
  • Vuetify - Vue Material Design Component Framework
  • OpenCV - Open Source Computer Vision Library
  • WebAssembly - Binary instruction format for a stack-based virtual machine

  

二、代碼分析

• 依賴包配置：package.json

  "dependencies": {
    "axios": "^0.18.0",
    "opencv.js": "^1.2.1",
    "vue": "^2.6.6"
  },

 

• 默認腳本文件：main.js

默認的樣子。

import Vue from 'vue' import App from './App.vue' import Vue2TouchEvents from 'vue2-touch-events'
// import * as cv from './build-4.3.0/wasm/opencv.js';

Vue.use(Vue2TouchEvents)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

工程中使用OpenCV的案例。

import Vue from 'vue' import App from './App.vue' import Axios from 'axios'
import * as cv from 'opencv.js'

Vue.prototype.$http = Axios
Vue.prototype.$cv = cv

Vue.config.productionTip = false let cnt = 0 let info
let tim = setInterval(() => {
  cnt++
  try {
    info = cv.getBuildInformation()
    clearInterval(tim)
    //console.log(cnt, 'INFO\n', info)

    // Now start Vue
    new Vue({
      render: h => h(App),
    }).$mount('#app')
  }
  catch(err) {
    //console.log('try again', cnt)
    if (cnt > 100) clearInterval(tim)
  }
}, 25)

 

• 加載main.js的過程

 index.tml->main.js->app.vue->index.js->helloworld.vue

 

 

 

常見問題

這個畫筆怎么奇奇怪怪的呢？

this.$cv.imshow("output", this.g_cur_frame);
this.$cv.imshow("canvas", this.g_cur_frame);
// this.canvasContext.drawImage(this.$refs.output, 0, 0)

imshow一用，就出現了如下奇怪的“畫筆”，圓筆變叉叉筆。 What happened?

若干屬性。

this.canvasContext = this.$refs.canvas.getContext('2d');
this.canvasContext.lineJoin    = 'round';
this.canvasContext.lineCap     = 'round';
this.canvasContext.lineWidth   = this.brushSize;
this.canvasContext.strokeStyle = this.tools[this.selectedToolIdx].color;

Ref: Canvas學習：globalCompositeOperation詳解 [有圖例和示范]

答案：

imshow后，可能是某種原因重置了canvas的屬性，re-init canvas就好了。雖然比較齪，不優雅，但不妨礙功能的使用。

 

End.