Dodano wykrywnie oka oraz okaz za okularem. Zmiana struktury plików scss.
This commit is contained in:
parent
1336bd8800
commit
7a1e0ce3c1
4
Library/.idea/encodings.xml
Normal file
4
Library/.idea/encodings.xml
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="Encoding" addBOMForNewFiles="with NO BOM" />
|
||||||
|
</project>
|
58
Library/resources/js/facedatection.js
vendored
58
Library/resources/js/facedatection.js
vendored
@ -1,8 +1,10 @@
|
|||||||
const utils = new Utils('errorMessage'),
|
const utils = new Utils('errorMessage'),
|
||||||
imageInput = document.getElementById('imageInput'),
|
imageInput = document.getElementById('imageInput'),
|
||||||
fileInput = document.getElementById('fileInput');
|
fileInput = document.getElementById('fileInput'),
|
||||||
|
imageResult = document.getElementById('imageResult');
|
||||||
|
|
||||||
fileInput.addEventListener('change', (e) => {
|
fileInput.addEventListener('change', (e) => {
|
||||||
|
imageResult.classList.remove("height-0");
|
||||||
imageInput.src = URL.createObjectURL(e.target.files[0])
|
imageInput.src = URL.createObjectURL(e.target.files[0])
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -12,33 +14,79 @@ imageInput.onload = function () {
|
|||||||
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
|
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
|
||||||
let faces = new cv.RectVector();
|
let faces = new cv.RectVector();
|
||||||
let faceCascade = new cv.CascadeClassifier();
|
let faceCascade = new cv.CascadeClassifier();
|
||||||
|
let eyes = new cv.RectVector();
|
||||||
|
let eyeCascade = new cv.CascadeClassifier();
|
||||||
|
let eyeGlassesCascade = new cv.CascadeClassifier();
|
||||||
faceCascade.load('haarcascade_frontalface_default.xml');
|
faceCascade.load('haarcascade_frontalface_default.xml');
|
||||||
|
eyeCascade.load('haarcascade_eye.xml');
|
||||||
|
eyeGlassesCascade.load('haarcascade_eye_tree_eyeglasses.xml');
|
||||||
let msize = new cv.Size(0, 0);
|
let msize = new cv.Size(0, 0);
|
||||||
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
|
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
|
||||||
|
|
||||||
for (let i = 0; i < faces.size(); ++i) {
|
for (let i = 0; i < faces.size(); ++i) {
|
||||||
console.log(faces)
|
|
||||||
let roiGray = gray.roi(faces.get(i));
|
let roiGray = gray.roi(faces.get(i));
|
||||||
let roiSrc = src.roi(faces.get(i));
|
let roiSrc = src.roi(faces.get(i));
|
||||||
let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
|
let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);
|
||||||
|
console.log('point1');
|
||||||
|
console.log(point1);
|
||||||
let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
|
let point2 = new cv.Point(faces.get(i).x + faces.get(i).width,
|
||||||
faces.get(i).y + faces.get(i).height);
|
faces.get(i).y + faces.get(i).height);
|
||||||
|
console.log('point2');
|
||||||
|
console.log(point2);
|
||||||
cv.rectangle(src, point1, point2, [255, 0, 0, 255]);
|
cv.rectangle(src, point1, point2, [255, 0, 0, 255]);
|
||||||
|
console.log(faces.get(i).height);
|
||||||
|
console.log(faces.get(i).width);
|
||||||
|
// detect eyes in face ROI
|
||||||
|
eyeCascade.detectMultiScale(roiGray, eyes, 1.1, 3, 0, msize, msize);
|
||||||
|
for (let j = 0; j < eyes.size(); ++j) {
|
||||||
|
console.log('Wykryto oko');
|
||||||
|
let point1 = new cv.Point(eyes.get(j).x, eyes.get(j).y);
|
||||||
|
let point2 = new cv.Point(eyes.get(j).x + eyes.get(j).width,
|
||||||
|
eyes.get(j).y + eyes.get(j).height);
|
||||||
|
cv.rectangle(roiSrc, point1, point2, [0, 0, 255, 255]);
|
||||||
|
}
|
||||||
|
eyeGlassesCascade.detectMultiScale(roiGray, eyes, 1.1, 3, 0, msize, msize);
|
||||||
|
if(!eyes.size()){
|
||||||
|
for (let k = 0; k < eyes.size(); ++k) {
|
||||||
|
console.log('Wykryto oko za okularem');
|
||||||
|
let point1 = new cv.Point(eyes.get(k).x, eyes.get(k).y);
|
||||||
|
let point2 = new cv.Point(eyes.get(k).x + eyes.get(k).width,
|
||||||
|
eyes.get(k).y + eyes.get(k).height);
|
||||||
|
cv.rectangle(roiSrc, point1, point2, [0, 0, 255, 255]);
|
||||||
|
}
|
||||||
|
}
|
||||||
roiGray.delete();
|
roiGray.delete();
|
||||||
roiSrc.delete();
|
roiSrc.delete();
|
||||||
}
|
}
|
||||||
|
isMatching(faces.size());
|
||||||
cv.imshow('imageResult', src);
|
cv.imshow('imageResult', src);
|
||||||
faces.delete();
|
faces.delete();
|
||||||
src.delete();
|
src.delete();
|
||||||
gray.delete();
|
gray.delete();
|
||||||
faceCascade.delete();
|
faceCascade.delete();
|
||||||
|
eyeCascade.delete();
|
||||||
|
eyes.delete();
|
||||||
};
|
};
|
||||||
|
|
||||||
fileInput.setAttribute('disabled', 'true')
|
fileInput.setAttribute('disabled', 'true')
|
||||||
|
|
||||||
utils.loadOpenCv(() => {
|
utils.loadOpenCv(() => {
|
||||||
let faceCascadeFile = 'haarcascade_frontalface_default.xml'
|
let faceCascadeFile = 'haarcascade_frontalface_default.xml',
|
||||||
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
|
eyeCascadeFile = 'haarcascade_eye.xml',
|
||||||
|
eyeGlassesCascade = 'haarcascade_eye_tree_eyeglasses.xml';
|
||||||
|
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {});
|
||||||
|
utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {});
|
||||||
|
utils.createFileFromUrl(eyeGlassesCascade, eyeGlassesCascade, () => {
|
||||||
fileInput.removeAttribute('disabled');
|
fileInput.removeAttribute('disabled');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function isMatching(facesSize) {
|
||||||
|
console.log('Ilość twarzy: ' + facesSize);
|
||||||
|
if (facesSize > 1) {
|
||||||
|
console.log('Wykryto więcej niż jedną twarz.');
|
||||||
|
} else if (facesSize < 1) {
|
||||||
|
console.log('Nie wykryto twarzy.');
|
||||||
|
} else {
|
||||||
|
console.log('Wykryto prawidłowe zdjęcie.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
22
Library/resources/sass/app.scss
vendored
22
Library/resources/sass/app.scss
vendored
@ -7,23 +7,5 @@
|
|||||||
// Bootstrap
|
// Bootstrap
|
||||||
@import '~bootstrap/scss/bootstrap';
|
@import '~bootstrap/scss/bootstrap';
|
||||||
|
|
||||||
svg {
|
// Sections
|
||||||
position: absolute;
|
@import 'sections/register.scss';
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
stroke: blue;
|
|
||||||
stroke-width: 0.7px;
|
|
||||||
stroke-linecap: square;
|
|
||||||
}
|
|
||||||
|
|
||||||
.handle {
|
|
||||||
fill: blue;
|
|
||||||
pointer-events: all;
|
|
||||||
stroke:blue;
|
|
||||||
stroke-width: 2px;
|
|
||||||
cursor: move;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
16
Library/resources/sass/sections/register.scss
vendored
Normal file
16
Library/resources/sass/sections/register.scss
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.card-opencv {
|
||||||
|
.p_image{
|
||||||
|
#imageInput{
|
||||||
|
|
||||||
|
}
|
||||||
|
#imageInit{
|
||||||
|
|
||||||
|
}
|
||||||
|
#imageResult{
|
||||||
|
width: 100%;
|
||||||
|
&.height-0{
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -12,119 +12,99 @@
|
|||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">{{ __('Register') }}</div>
|
<div class="card-header">{{ __('Register') }}</div>
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="card-opencv">
|
|
||||||
<div class="row">
|
|
||||||
{{-- <div class="container">
|
|
||||||
<div id="background" class="o_image">
|
|
||||||
<img id="sample" src="images/sample_2.jpg" alt="facedetection" />
|
|
||||||
<span>©reactcodes blog</span>
|
|
||||||
</div>
|
|
||||||
<div class="p_image">
|
|
||||||
<canvas id="imageInit"></canvas>
|
|
||||||
<canvas id="imageResult"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="b_container">
|
|
||||||
<button id="apply">Apply</button>
|
|
||||||
</div>--}}
|
|
||||||
<div class="col-12">
|
|
||||||
<div id="background" class="o_image">
|
|
||||||
<img id="sample" alt="facedetection" style=" display: none"/>
|
|
||||||
</div>
|
|
||||||
<div class="p_image">
|
|
||||||
<img id="imageInput">
|
|
||||||
<canvas id="imageInit"></canvas>
|
|
||||||
<canvas id="imageResult"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<input type="file" id="fileInput">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- <div class="col-12">
|
|
||||||
<div class="opencv_image">
|
|
||||||
<canvas id="imageInit"></canvas>
|
|
||||||
<canvas id="imageResult"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="opencv_input">
|
|
||||||
<input type="file" id="file_input">
|
|
||||||
</div>
|
|
||||||
</div>--}}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form method="POST" action="{{ route('register') }}">
|
<form method="POST" action="{{ route('register') }}">
|
||||||
@csrf
|
@csrf
|
||||||
|
<div class="card-opencv">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div id="background" class="o_image">
|
||||||
|
<img id="sample" class="d-none" alt="facedetection"/>
|
||||||
|
</div>
|
||||||
|
<div class="p_image">
|
||||||
|
<img id="imageInput" class="d-none">
|
||||||
|
<canvas id="imageInit" class="d-none"></canvas>
|
||||||
|
<canvas id="imageResult" class="height-0"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="name"
|
||||||
|
class="col-md-4 col-form-label text-md-right">Avatar</label>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<input type="file" id="fileInput">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label for="name"
|
||||||
|
class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
|
||||||
|
|
||||||
<div class="form-group row">
|
<div class="col-md-6">
|
||||||
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
|
<input id="name" type="text"
|
||||||
|
class="form-control @error('name') is-invalid @enderror" name="name"
|
||||||
|
value="{{ old('name') }}" required autocomplete="name" autofocus>
|
||||||
|
|
||||||
<div class="col-md-6">
|
@error('name')
|
||||||
<input id="name" type="text"
|
<span class="invalid-feedback" role="alert">
|
||||||
class="form-control @error('name') is-invalid @enderror" name="name"
|
|
||||||
value="{{ old('name') }}" required autocomplete="name" autofocus>
|
|
||||||
|
|
||||||
@error('name')
|
|
||||||
<span class="invalid-feedback" role="alert">
|
|
||||||
<strong>{{ $message }}</strong>
|
<strong>{{ $message }}</strong>
|
||||||
</span>
|
</span>
|
||||||
@enderror
|
@enderror
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label for="email"
|
<label for="email"
|
||||||
class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
|
class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
|
||||||
|
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<input id="email" type="email"
|
<input id="email" type="email"
|
||||||
class="form-control @error('email') is-invalid @enderror" name="email"
|
class="form-control @error('email') is-invalid @enderror" name="email"
|
||||||
value="{{ old('email') }}" required autocomplete="email">
|
value="{{ old('email') }}" required autocomplete="email">
|
||||||
|
|
||||||
@error('email')
|
@error('email')
|
||||||
<span class="invalid-feedback" role="alert">
|
<span class="invalid-feedback" role="alert">
|
||||||
<strong>{{ $message }}</strong>
|
<strong>{{ $message }}</strong>
|
||||||
</span>
|
</span>
|
||||||
@enderror
|
@enderror
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label for="password"
|
<label for="password"
|
||||||
class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
|
class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
|
||||||
|
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<input id="password" type="password"
|
<input id="password" type="password"
|
||||||
class="form-control @error('password') is-invalid @enderror" name="password"
|
class="form-control @error('password') is-invalid @enderror"
|
||||||
required autocomplete="new-password">
|
name="password"
|
||||||
|
required autocomplete="new-password">
|
||||||
|
|
||||||
@error('password')
|
@error('password')
|
||||||
<span class="invalid-feedback" role="alert">
|
<span class="invalid-feedback" role="alert">
|
||||||
<strong>{{ $message }}</strong>
|
<strong>{{ $message }}</strong>
|
||||||
</span>
|
</span>
|
||||||
@enderror
|
@enderror
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label for="password-confirm"
|
<label for="password-confirm"
|
||||||
class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
|
class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
|
||||||
|
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<input id="password-confirm" type="password" class="form-control"
|
<input id="password-confirm" type="password" class="form-control"
|
||||||
name="password_confirmation" required autocomplete="new-password">
|
name="password_confirmation" required autocomplete="new-password">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group row mb-0">
|
<div class="form-group row mb-0">
|
||||||
<div class="col-md-6 offset-md-4">
|
<div class="col-md-6 offset-md-4">
|
||||||
<button type="submit" class="btn btn-primary">
|
<button type="submit" class="btn btn-primary">
|
||||||
{{ __('Register') }}
|
{{ __('Register') }}
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
12213
Library/resources/xml/haarcascade_eye.xml
Normal file
12213
Library/resources/xml/haarcascade_eye.xml
Normal file
File diff suppressed because it is too large
Load Diff
22619
Library/resources/xml/haarcascade_eye_tree_eyeglasses.xml
Normal file
22619
Library/resources/xml/haarcascade_eye_tree_eyeglasses.xml
Normal file
File diff suppressed because it is too large
Load Diff
2
Library/webpack.mix.js
vendored
2
Library/webpack.mix.js
vendored
@ -17,5 +17,5 @@ mix.js('resources/js/app.js', 'public/js/app.js')
|
|||||||
// Images.
|
// Images.
|
||||||
.copy('resources/images/*', 'public/images')
|
.copy('resources/images/*', 'public/images')
|
||||||
// XML.
|
// XML.
|
||||||
.copy('resources/xml/haarcascade_frontalface_default.xml', 'public/haarcascade_frontalface_default.xml')
|
.copy('resources/xml/*', 'public')
|
||||||
.sass('resources/sass/app.scss', 'public/css');
|
.sass('resources/sass/app.scss', 'public/css');
|
||||||
|
Loading…
Reference in New Issue
Block a user