Dodano wykrywnie oka oraz okaz za okularem. Zmiana struktury plików scss.
This commit is contained in:
Dawid Lisiecki
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'),
|
||||
imageInput = document.getElementById('imageInput'),
|
||||
fileInput = document.getElementById('fileInput');
|
||||
fileInput = document.getElementById('fileInput'),
|
||||
imageResult = document.getElementById('imageResult');
|
||||
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
imageResult.classList.remove("height-0");
|
||||
imageInput.src = URL.createObjectURL(e.target.files[0])
|
||||
});
|
||||
|
||||
@ -12,33 +14,79 @@ imageInput.onload = function () {
|
||||
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
|
||||
let faces = new cv.RectVector();
|
||||
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');
|
||||
eyeCascade.load('haarcascade_eye.xml');
|
||||
eyeGlassesCascade.load('haarcascade_eye_tree_eyeglasses.xml');
|
||||
let msize = new cv.Size(0, 0);
|
||||
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
|
||||
|
||||
for (let i = 0; i < faces.size(); ++i) {
|
||||
console.log(faces)
|
||||
let roiGray = gray.roi(faces.get(i));
|
||||
let roiSrc = src.roi(faces.get(i));
|
||||
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,
|
||||
faces.get(i).y + faces.get(i).height);
|
||||
console.log('point2');
|
||||
console.log(point2);
|
||||
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();
|
||||
roiSrc.delete();
|
||||
}
|
||||
isMatching(faces.size());
|
||||
cv.imshow('imageResult', src);
|
||||
faces.delete();
|
||||
src.delete();
|
||||
gray.delete();
|
||||
faceCascade.delete();
|
||||
eyeCascade.delete();
|
||||
eyes.delete();
|
||||
};
|
||||
|
||||
fileInput.setAttribute('disabled', 'true')
|
||||
|
||||
utils.loadOpenCv(() => {
|
||||
let faceCascadeFile = 'haarcascade_frontalface_default.xml'
|
||||
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
|
||||
let faceCascadeFile = 'haarcascade_frontalface_default.xml',
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
// Sections
|
||||
@import 'sections/register.scss';
|
||||
|
||||
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="card">
|
||||
<div class="card-header">{{ __('Register') }}</div>
|
||||
|
||||
<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') }}">
|
||||
@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">
|
||||
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
|
||||
<div class="col-md-6">
|
||||
<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">
|
||||
<input id="name" type="text"
|
||||
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">
|
||||
@error('name')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
<strong>{{ $message }}</strong>
|
||||
</span>
|
||||
@enderror
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="email"
|
||||
class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
|
||||
<div class="form-group row">
|
||||
<label for="email"
|
||||
class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="email" type="email"
|
||||
class="form-control @error('email') is-invalid @enderror" name="email"
|
||||
value="{{ old('email') }}" required autocomplete="email">
|
||||
<div class="col-md-6">
|
||||
<input id="email" type="email"
|
||||
class="form-control @error('email') is-invalid @enderror" name="email"
|
||||
value="{{ old('email') }}" required autocomplete="email">
|
||||
|
||||
@error('email')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
@error('email')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
<strong>{{ $message }}</strong>
|
||||
</span>
|
||||
@enderror
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="password"
|
||||
class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
|
||||
<div class="form-group row">
|
||||
<label for="password"
|
||||
class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="password" type="password"
|
||||
class="form-control @error('password') is-invalid @enderror" name="password"
|
||||
required autocomplete="new-password">
|
||||
<div class="col-md-6">
|
||||
<input id="password" type="password"
|
||||
class="form-control @error('password') is-invalid @enderror"
|
||||
name="password"
|
||||
required autocomplete="new-password">
|
||||
|
||||
@error('password')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
@error('password')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
<strong>{{ $message }}</strong>
|
||||
</span>
|
||||
@enderror
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="password-confirm"
|
||||
class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
|
||||
<div class="form-group row">
|
||||
<label for="password-confirm"
|
||||
class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="password-confirm" type="password" class="form-control"
|
||||
name="password_confirmation" required autocomplete="new-password">
|
||||
<div class="col-md-6">
|
||||
<input id="password-confirm" type="password" class="form-control"
|
||||
name="password_confirmation" required autocomplete="new-password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mb-0">
|
||||
<div class="col-md-6 offset-md-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{{ __('Register') }}
|
||||
</button>
|
||||
<div class="form-group row mb-0">
|
||||
<div class="col-md-6 offset-md-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{{ __('Register') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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.
|
||||
.copy('resources/images/*', 'public/images')
|
||||
// XML.
|
||||
.copy('resources/xml/haarcascade_frontalface_default.xml', 'public/haarcascade_frontalface_default.xml')
|
||||
.copy('resources/xml/*', 'public')
|
||||
.sass('resources/sass/app.scss', 'public/css');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user