캔버스의 이미지에 사각형을 그립니다.
얼굴 인식 후 이미지 처리에 사용할 수 있습니다.
참고
OpenCV로 얼굴 인식
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="photo.js"></script>
<title>Photo on Canvas</title>
</head>
<body>
<h1>Canvas</h1>
<canvas id="area_aa" height="767" width="1280"></canvas>
Jun/19/2017<p />
</body>
</html>
photo.js
// ----------------------------------------------------------------------
// photo.js
//
// Jun/19/2017
// ----------------------------------------------------------------------
window.onload = function()
{
var canvas = document.getElementById ("area_aa")
var ctx = canvas.getContext('2d')
var img = new Image()
img.src = "./family-557100_1280.jpg"
img.onload = function()
{
ctx.drawImage(img, 0, 0)
ctx.lineWidth = 5
ctx.strokeStyle = "rgb(0, 0, 255)"
ctx.strokeRect (858,230,137,137)
ctx.strokeRect (316,227,122,122)
ctx.strokeRect (548,261,120,120)
ctx.strokeRect (73,350,112,112)
ctx.strokeRect (1026,358,108,108)
}
}
// ----------------------------------------------------------------------
다음 주소로 동작을 확인할 수 있습니다.
h tps : // 에 k 제 mp ぁ로. 오 rg / data_base / da c / g 등 p 히 cs / 칸 ゔ s / p
2019/Jul/19에 동작을 확인했습니다.
Reference
이 문제에 관하여(캔버스의 이미지에 사각형을 그립니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ekzemplaro/items/5e7e242b11ee04be9535텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
