434 lines
17 KiB
JavaScript
434 lines
17 KiB
JavaScript
var loadModels = async () => {
|
|
await Promise.all([
|
|
faceapi.nets.ssdMobilenetv1.loadFromUri("\\weights\\"),
|
|
faceapi.nets.faceRecognitionNet.loadFromUri("\\weights\\"),
|
|
faceapi.nets.faceLandmark68Net.loadFromUri("\\weights\\")
|
|
]);
|
|
};
|
|
loadModels();
|
|
|
|
$(document).ready(function () {
|
|
|
|
if ($(window).width() > 992) {
|
|
$('#desktopDisplay').show();
|
|
$('#mobileDisplay').hide();
|
|
$('#mobileDisplay').html('');
|
|
}
|
|
|
|
if ($(window).width() <= 992) {
|
|
$('#desktopDisplay').html('');
|
|
$('#desktopDisplay').hide();
|
|
$('#mobileDisplay').show();
|
|
}
|
|
|
|
$(document).on('click', '.upload-image1', function () {
|
|
$('.md-modal').addClass('md-show');
|
|
$('.take_snapshot1').show();
|
|
$('.take_snapshot2').hide();
|
|
startCamera();
|
|
});
|
|
|
|
$(document).on('click', '.upload-image2', function () {
|
|
$('.md-modal').addClass('md-show');
|
|
$('.take_snapshot1').hide();
|
|
$('.take_snapshot2').show();
|
|
startCamera();
|
|
});
|
|
|
|
$(document).on('click', '.camera_close', function () {
|
|
$('.md-modal').removeClass('md-show');
|
|
stopCamera();
|
|
});
|
|
|
|
updateSaveButton();
|
|
});
|
|
|
|
//window.onload = async () => {
|
|
// await loadModels();
|
|
// modelsLoaded = true;
|
|
//};
|
|
|
|
|
|
var modelsLoaded = false;
|
|
|
|
//var ensureModelsLoaded = async () => {
|
|
// if (!modelsLoaded) {
|
|
// await loadModels();
|
|
// modelsLoaded = true;
|
|
// }
|
|
//};
|
|
|
|
var updateSaveButton = () => {
|
|
if (!hasErrorPic1 && checkFace1 && !hasErrorPic2 && checkFace2) {
|
|
$('#SaveImageEmployee').removeClass('disable');
|
|
} else {
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
}
|
|
};
|
|
|
|
var runCheckFace1 = async () => {
|
|
|
|
const img1 = document.getElementById('pic1');
|
|
|
|
const detectionPromise1 = await faceapi.detectAllFaces(img1).withFaceLandmarks().withFaceDescriptors();
|
|
|
|
if (detectionPromise1.length === 1) {
|
|
console.log('یک چهره در تصویر اول شناسایی شد');
|
|
|
|
checkFace1 = true;
|
|
hasErrorPic1 = false;
|
|
$('#demoResult1').css('border', '2px dashed #148b8b');
|
|
} else if (detectionPromise1.length > 1) {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('بیش از یک چهره در تصویر اول شناسایی شد');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 4000);
|
|
|
|
hasErrorPic1 = true;
|
|
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
$('.upload-image1').css('background', '#ff090940');
|
|
$('#demoResult1').css('border', '2px dashed #ff5c5c');
|
|
} else {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('چهرهای در تصویر اول شناسایی نشد');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 4000);
|
|
|
|
hasErrorPic1 = true;
|
|
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
$('.upload-image1').css('background', '#ff090940');
|
|
$('#demoResult1').css('border', '2px dashed #ff5c5c');
|
|
}
|
|
updateSaveButton();
|
|
$('#loadingImage1').hide();
|
|
};
|
|
|
|
var runCheckFace2 = async () => {
|
|
|
|
const img2 = document.getElementById('pic2');
|
|
|
|
const detectionPromise2 = await faceapi.detectAllFaces(img2).withFaceLandmarks().withFaceDescriptors();
|
|
|
|
if (detectionPromise2.length === 1) {
|
|
console.log('یک چهره در تصویر دوم شناسایی شد');
|
|
checkFace2 = true;
|
|
hasErrorPic2 = false;
|
|
|
|
$('#demoResult2').css('border', '2px dashed #148b8b');
|
|
} else if (detectionPromise2.length > 1) {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('بیش از یک چهره در تصویر دوم شناسایی شد');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 4000);
|
|
|
|
hasErrorPic2 = true;
|
|
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
$('.upload-image2').css('background', '#ff090940');
|
|
$('#demoResult2').css('border', '2px dashed #ff5c5c');
|
|
} else {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('چهرهای در تصویر دوم شناسایی نشد');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 4000);
|
|
|
|
hasErrorPic2 = true;
|
|
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
$('.upload-image2').css('background', '#ff090940');
|
|
$('#demoResult2').css('border', '2px dashed #ff5c5c');
|
|
}
|
|
updateSaveButton();
|
|
$('#loadingImage2').hide();
|
|
};
|
|
|
|
|
|
var FACING_MODES = JslibHtml5CameraPhoto.FACING_MODES;
|
|
var IMAGE_TYPES = JslibHtml5CameraPhoto.IMAGE_TYPES;
|
|
|
|
// Check if videoElement is already declared to avoid redeclaration
|
|
// if (typeof videoElement === 'undefined') {
|
|
var videoElement = document.getElementById('videoElement');
|
|
var cameraPhoto = new JslibHtml5CameraPhoto.default(videoElement);
|
|
// }
|
|
|
|
function startCamera() {
|
|
// startCameraMaxResolution
|
|
cameraPhoto.startCamera(FACING_MODES.USER).then(() => {
|
|
console.log('Camera started!');
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
console.error('Camera not started!', error);
|
|
});
|
|
}
|
|
|
|
function stopCamera() {
|
|
cameraPhoto.stopCamera().then(() => {
|
|
console.log('Camera stopped!');
|
|
}).catch((error) => {
|
|
console.log('No camera to stop!:', error);
|
|
});
|
|
}
|
|
|
|
function cropAndResizeImage(base64Str, newWidth, newHeight) {
|
|
return new Promise((resolve) => {
|
|
let img = new Image();
|
|
img.src = base64Str;
|
|
img.onload = () => {
|
|
let canvas = document.createElement('canvas');
|
|
let ctx = canvas.getContext('2d');
|
|
|
|
let sideLength = Math.min(img.width, img.height);
|
|
let startX = (img.width - sideLength) / 2;
|
|
let startY = (img.height - sideLength) / 2;
|
|
|
|
canvas.width = newWidth;
|
|
canvas.height = newHeight;
|
|
|
|
ctx.drawImage(img, startX, startY, sideLength, sideLength, 0, 0, newWidth, newHeight);
|
|
resolve(canvas.toDataURL('image/jpeg'));
|
|
};
|
|
});
|
|
}
|
|
|
|
function take_snapshot1() {
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
var sizeFactor = 1;
|
|
var imageType = IMAGE_TYPES.JPG;
|
|
var imageCompression = 1;
|
|
|
|
var config = {
|
|
sizeFactor,
|
|
imageType,
|
|
imageCompression
|
|
};
|
|
|
|
var dataUri = cameraPhoto.getDataUri(config);
|
|
cropAndResizeImage(dataUri, 1800, 1800).then((resizedDataUri) => {
|
|
document.getElementById('result1').innerHTML = '<img style="display:none; object-fit: cover;" id="pic1" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
document.getElementById('demoResult1').innerHTML =
|
|
'<div class="closeImage" onclick="closeImage(\'image1\')">' +
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">' +
|
|
'<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />' +
|
|
'</svg>' +
|
|
'</div>' +
|
|
'<button type="button" class="upload-image1">' +
|
|
'<p class="textUpload textUploaded">عکس اول</p>' +
|
|
'</button>' +
|
|
'<div class="loadingImage" id="loadingImage1">' +
|
|
'<div class="spinner-border" role="status">' +
|
|
'<span class="visually-hidden">Loading...</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
//document.getElementById('demoResult1').innerHTML = '<div class="closeImage" onclick="closeImage("image1")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" /></svg></div><button type="button" class="upload-image1"><p class="textUpload textUploaded">عکس اول</p></button><div class="loadingImage" id="loadingImage1"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
$('#loadingImage1').css('display', 'flex');
|
|
runCheckFace1();
|
|
}).catch((error) => {
|
|
console.error('Error cropping and resizing photo:', error);
|
|
});
|
|
|
|
$('.md-modal').removeClass('md-show');
|
|
|
|
stopCamera();
|
|
}
|
|
|
|
function take_snapshot2() {
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
var sizeFactor = 1;
|
|
var imageType = IMAGE_TYPES.JPG;
|
|
var imageCompression = 1;
|
|
|
|
var config = {
|
|
sizeFactor,
|
|
imageType,
|
|
imageCompression
|
|
};
|
|
|
|
var dataUri = cameraPhoto.getDataUri(config);
|
|
cropAndResizeImage(dataUri, 1800, 1800).then((resizedDataUri) => {
|
|
document.getElementById('result2').innerHTML = '<img style="display:none; object-fit: cover;" id="pic2" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
document.getElementById('demoResult2').innerHTML =
|
|
'<div class="closeImage" onclick="closeImage(\'image2\')">' +
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">' +
|
|
'<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />' +
|
|
'</svg>' +
|
|
'</div>' +
|
|
'<button type="button" class="upload-image2">' +
|
|
'<p class="textUpload textUploaded">عکس دوم</p>' +
|
|
'</button>' +
|
|
'<div class="loadingImage" id="loadingImage2">' +
|
|
'<div class="spinner-border" role="status">' +
|
|
'<span class="visually-hidden">Loading...</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
//document.getElementById('demoResult2').innerHTML = '<div class="closeImage" onclick="closeImage("image2")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" /></svg></div><button type="button" class="upload-image2"><p class="textUpload textUploaded">عکس دوم</p></button><div class="loadingImage" id="loadingImage2"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
$('#loadingImage2').css('display', 'flex');
|
|
runCheckFace2();
|
|
}).catch((error) => {
|
|
console.error('Error cropping and resizing photo:', error);
|
|
});
|
|
|
|
$('.md-modal').removeClass('md-show');
|
|
stopCamera();
|
|
}
|
|
|
|
function closeImage(type) {
|
|
if (type === "image1") {
|
|
$('#demoResult1').html('');
|
|
$('#demoResult1').html('<button type="button" class="upload-image1"><p class="textUpload">بارگذاری عکس اول</p></button>');
|
|
$('#demoResult1').removeAttr('style');
|
|
} else if (type === "image2") {
|
|
$('#demoResult2').html('');
|
|
$('#demoResult2').html('<button type="button" class="upload-image2"><p class="textUpload">بارگذاری عکس دوم</p></button>');
|
|
$('#demoResult2').removeAttr('style');
|
|
} else {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('خطایی رخ داده است.');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 4000);
|
|
}
|
|
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
}
|
|
|
|
async function set() {
|
|
let pic1 = $("#pic1").attr('src');
|
|
let pic2 = $("#pic2").attr('src');
|
|
const img1 = document.getElementById('pic1');
|
|
const img2 = document.getElementById('pic2');
|
|
|
|
let workshopId = Number($('#workshopId').val());
|
|
let employeeId = Number($('#employeeId').val());
|
|
|
|
if (!hasErrorPic1 && checkFace1 && !hasErrorPic2 && checkFace2) {
|
|
const detection1 = await faceapi.detectSingleFace(img1).withFaceLandmarks().withFaceDescriptor();
|
|
const detection2 = await faceapi.detectSingleFace(img2).withFaceLandmarks().withFaceDescriptor();
|
|
|
|
console.log(detection1);
|
|
const distance = faceapi.euclideanDistance(detection1.descriptor, detection2.descriptor);
|
|
if (distance > 0.45) {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('چهره اول با چهره دوم مطابقت ندارد');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 4000);
|
|
return;
|
|
|
|
}
|
|
|
|
if (pic1 != null && pic2 != null) {
|
|
const loading = $('.spinner-loading-progress').show();
|
|
const loadingBtn = $('.spinner-loading').show();
|
|
let startTime = Date.now();
|
|
|
|
$('#SaveImageEmployee').addClass('disable');
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: takePictureAjax,
|
|
data: {
|
|
"base64pic1": pic1,
|
|
"base64pic2": pic2,
|
|
"workshopId": workshopId,
|
|
"employeeId": employeeId
|
|
},
|
|
headers: {
|
|
"RequestVerificationToken": antiForgeryToken
|
|
},
|
|
xhr: function () {
|
|
let xhr = new XMLHttpRequest();
|
|
// Track the progress of the upload
|
|
xhr.upload.onprogress = function (e) {
|
|
if (e.lengthComputable) {
|
|
var percentComplete = (e.loaded / e.total) * 100;
|
|
$('#progressBar').text(Math.round(percentComplete) + '%');
|
|
$('.spinner-loading-progress').css('width', `${Math.round(percentComplete)}%`);
|
|
}
|
|
};
|
|
return xhr;
|
|
},
|
|
success: function (response) {
|
|
let elapsedTime = Date.now() - startTime;
|
|
let delay = Math.max(1000 - elapsedTime, 0);
|
|
|
|
setTimeout(function () {
|
|
if (response.isSuccedded) {
|
|
$('.alert-success-msg').show();
|
|
$('.alert-success-msg p').text(response.message);
|
|
setTimeout(function () {
|
|
$('.alert-success-msg').hide();
|
|
$('.alert-success-msg p').text('');
|
|
|
|
$(`#ImageEmployee_${employeeId}`).attr("src", `data:image/jpeg;base64,${response.src}`);
|
|
$(`#ImageEmployeeMobile_${employeeId}`).attr("src", `data:image/jpeg;base64,${response.src}`);
|
|
$(`#TextUpload_${employeeId}`).text("عکس پرسنل آپلود شده است").removeClass('text-danger');
|
|
$(`#TextUploadMobile_${employeeId}`).text("عکس پرسنل آپلود شده است").removeClass('text-danger');
|
|
|
|
if (!hasPicture) {
|
|
$(`.btnAvticeAction_${employeeId}`)
|
|
.removeClass('disable')
|
|
.addClass('btn-deactive')
|
|
.attr('id', `togglePersonnelStatus_${response.idRollCall}_desktop`);
|
|
$(`.IsActiveStringFind_${employeeId}`).attr('id', `IsActiveString_${response.idRollCall}_desktop`).text("غیر فعال کردن");
|
|
|
|
$(`.btnAvticeActionMobile_${employeeId}`)
|
|
.removeClass('disable')
|
|
.addClass('btn-deactive')
|
|
.attr('id', `togglePersonnelStatus_${response.idRollCall}_mobile`);
|
|
$(`.IsActiveStringFindMobile_${employeeId}`).attr('id', `IsActiveString_${response.idRollCall}_mobile`).text("غیر فعال کردن");
|
|
}
|
|
|
|
$(`#uploadMobileBTN_${employeeId}`).text("ویرایش عکس");
|
|
$(`#uploadMobileBTNMobile_${employeeId}`).text("ویرایش عکس");
|
|
|
|
$(`#Section_${employeeId}`).removeClass("deactive");
|
|
$('#SaveImageEmployee').removeClass('disable');
|
|
$('#MainModal').modal('hide');
|
|
}, 1000);
|
|
} else {
|
|
$('#SaveImageEmployee').removeClass('disable');
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text(response.message);
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 3500);
|
|
}
|
|
}, delay); // Delay the hiding of the spinner
|
|
},
|
|
error: function (response) {
|
|
console.log(5, response);
|
|
}
|
|
});
|
|
} else {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('گرفتن دو عکس الزامیست');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 3500);
|
|
}
|
|
} else {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text('گرفتن دو عکس الزامیست');
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('');
|
|
}, 3500);
|
|
}
|
|
} |