3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

vue.jsで画像中にバウンディングボックスを表示させてみる

はじめに

機械学習関連で検出や認識などをしていると、下図みたいに画像中の結果部分を強調表示したくなるときがありました。今回は、デモサイトの開発にvue.jsを利用していたので、コンポーネントとして実装してみました。

thumbnail

やり方

調べてみると、いろんなやり方があるようで

  • SVG
  • Canvas
  • 外部のサーバで処理して結果を受け取る
  • etc...

試してみた結果、vueのテンプレート操作と相性が良かったSVGを使うことにしました。

コンポーネント内での処理

至って簡単。

svg要素の中に

  1. imageタグで画像を描画
  2. コンポーネントの引数として受け取った座標(左上を原点とした場合の割合)の個数分だけv-for で繰り返し、rectタグ(バウンディングボックス)を描画

以上

コンポーネント内のテンプレート部分

<svg v-if="imgsize" :viewBox="'0 0 ' + imgsize.width + ' ' + imgsize.height">
    <image :xlink:href="src" width="100%" height="100%"/>
    <rect
      v-for="(bb, i) in bbs" :key="'bb' + i"
      :x="bb.left * imgsize.width || '0'" :y="bb.top * imgsize.height || '0'" :width="bb.width * imgsize.width || '0'" :height="bb.height * imgsize.height || '0'"
      fill="none" :stroke="bbcolor || '#EF5350'" :stroke-width="bbstroke || '2'" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/>
</svg>

結果

こんな感じ

See the Pen vue-boundingbox by icchi (@icchi) on CodePen.

まとめ

Reactと違い、vueだとSVG内要素の繰り返し処理など、非常に簡単に実装できました。動作も特にもっさり感はなくいい感じです。

もし需要があるなら、npmに公開しようかな...

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?