개시하다

만약 기계 학습과 관련되어 검측과 식별을 진행한다면 아래 그림처럼 이미지의 결과 부분을 강조할 때도 있다.이번에는 민주주의 사이트 개발에 관한 것이다.js를 사용했기 때문에 구성 요소로 사용해 보았습니다.

방법

조사해 보니 여러 가지 방법이 있는 것 같다

SVG

Canvas

외부 서버에서 처리 및 결과 수신

etc...

시도한 결과 vue의 템플릿 작업과 일치하는 SVG를 사용하기로 결정했습니다.

어셈블리 내 프로세스

아주 간단합니다.
svg 요소 중

이미지 레이블로 이미지 그리기

어셈블리 매개변수로 사용할 좌표(왼쪽 상단이 원점일 때의 비율)의 개수만 수신v-forrect 태그 반복 그리기 (패키지)

이상

어셈블리의 템플릿 섹션

<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 내 요소의 중복 처리 등은 매우 간단하게 이루어졌다.동작도 딱딱한 느낌이 없어서 좋았어요.p>

필요하면 npm에 공개할까요...