Files
Backend-Api/ServiceHost/wwwroot/AssetsClient/pages/Employees/js/modaluploadimagepersonnel.js
2025-03-09 21:52:06 +03:30

486 lines
19 KiB
JavaScript

//////////////faceapi////////////////
var loadModels = async () => {
await Promise.all([
faceapi.nets.ssdMobilenetv1.loadFromUri("\\weights\\"),
faceapi.nets.faceRecognitionNet.loadFromUri("\\weights\\"),
faceapi.nets.faceLandmark68Net.loadFromUri("\\weights\\")
]);
};
loadModels();
var employeeIdTemp;
var rollCallStatusIdTemp;
$(document).ready(function () {
$("#next-step").on("click", function () {
if ($("#step-form2").is(":visible") && !hasUploadedImage) {
if ($("#workshopSettingSelect").val() === "0") {
$('.alert-msg').show();
$('.alert-msg p').text('لطفا گروه را مشخص نمایید');
$('.errorSelection').addClass("errored");
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
$('.errorSelection').removeClass("errored");
}, 2500);
} else {
set();
}
}
if ($('#step-form1').is(":visible")) {
$('#step-form1').hide();
$('#step-form2').show();
$('#step-2').removeClass('not-step');
$('#prev-step').text('مرحله قبل');
$('#next-step #textShowBtn').text('ثبت');
}
});
$("#prev-step").on("click", function () {
if ($('#desktopDisplay').is(":visible")) {
$("#MainModal").modal("hide");
}
if ($('#step-form1').is(":visible")) {
$("#MainModal").modal("hide");
$('#step-2').addClass('not-step');
$('#prev-step').text('انصراف');
}
if ($('#step-form2').is(":visible")) {
$('#step-form1').show();
$('#step-form2').hide();
$('#step-2').addClass('not-step');
$('#prev-step').text('انصراف');
$('#next-step #textShowBtn').text('مرحله بعد');
}
});
//...........comment for check..............................
//if ($(window).width() > 992) {
// if (hasUploadedImage) {
// $('#desktopDisplay').hide();
// $('#mobileDisplay').show();
// $('#desktopDisplay').html('');
// $('#step-form1').show();
// $('#step-form2').hide();
// $('#next-step').removeClass('disable');
// $('#step-2').addClass('not-step');
// } else {
// $('#footerButtons #submitButton').remove();
// $('#footerButtons #closeButton').removeClass('col-6').addClass('col-12');
// $('#desktopDisplay').show();
// $('#mobileDisplay').hide();
// $('#mobileDisplay').html('');
// }
//}
//if ($(window).width() <= 992) {
// //...........comment for check..............................
// if (!hasUploadedImage) {
// //...........comment for check..............................
// $('#desktopDisplay').hide();
// $('#mobileDisplay').show();
// $('#desktopDisplay').html('');
// //...........comment for check..............................
// } else {
// $('#desktopDisplay').show();
// $('#mobileDisplay').hide();
// $('#mobileDisplay').html('');
// }
// //...........comment for check..............................
//}
//...........comment for check..............................
$(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();
});
//...........comment for check..............................
//window.onload = async () => {
// await loadModels();
// modelsLoaded = true;
//};
//...........comment for check..............................
var modelsLoaded = false;
//...........comment for check..............................
//var ensureModelsLoaded = async () => {
// if (!modelsLoaded) {
// await loadModels();
// modelsLoaded = true;
// }
//};
//...........comment for check..............................
var updateSaveButton = () => {
if (!hasErrorPic1 && checkFace1 && !hasErrorPic2 && checkFace2) {
$('#next-step').removeClass('disable');
} else {
$('#next-step').addClass('disable');
}
};
var runCheckFace1 = async () => {
const img1 = document.getElementById('pic1');
const detectionPromise1 = await faceapi.detectAllFaces(img1).withFaceLandmarks().withFaceDescriptors();
//...........comment for check..............................
if (detectionPromise1.length === 1) {
//...........comment for check..............................
console.log('یک چهره در تصویر اول شناسایی شد');
checkFace1 = true;
hasErrorPic1 = false;
$('#demoResult1').css('border', '2px dashed #148b8b');
//...........comment for check..............................
} else if (detectionPromise1.length > 1) {
$('.alert-msg').show();
$('.alert-msg p').text('بیش از یک چهره در تصویر اول شناسایی شد');
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
}, 4000);
hasErrorPic1 = true;
$('#next-step').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;
$('#next-step').addClass('disable');
$('.upload-image1').css('background', '#ff090940');
$('#demoResult1').css('border', '2px dashed #ff5c5c');
}
//...........comment for check..............................
updateSaveButton();
$('#loadingImage1').hide();
};
var runCheckFace2 = async () => {
const img2 = document.getElementById('pic2');
const detectionPromise2 = await faceapi.detectAllFaces(img2).withFaceLandmarks().withFaceDescriptors();
//...........comment for check..............................
if (detectionPromise2.length === 1) {
//...........comment for check..............................
console.log('یک چهره در تصویر دوم شناسایی شد');
checkFace2 = true;
hasErrorPic2 = false;
$('#demoResult2').css('border', '2px dashed #148b8b');
//...........comment for check..............................
} else if (detectionPromise2.length > 1) {
$('.alert-msg').show();
$('.alert-msg p').text('بیش از یک چهره در تصویر دوم شناسایی شد');
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
}, 4000);
hasErrorPic2 = true;
$('#next-step').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;
$('#next-step').addClass('disable');
$('.upload-image2').css('background', '#ff090940');
$('#demoResult2').css('border', '2px dashed #ff5c5c');
}
//...........comment for check..............................
updateSaveButton();
$('#loadingImage2').hide();
};
var FACING_MODES = JslibHtml5CameraPhoto.FACING_MODES;
var IMAGE_TYPES = JslibHtml5CameraPhoto.IMAGE_TYPES;
//...........comment for check..............................
//Check if videoElement is already declared to avoid redeclaration
//if (typeof videoElement === 'undefined') {
//...........comment for check..............................
var videoElement = document.getElementById('videoElement');
var cameraPhoto = new JslibHtml5CameraPhoto.default(videoElement);
//...........comment for check..............................
//}
//...........comment for check..............................
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(data) {
if (data) {
$('#next-step').addClass('disable');
var sizeFactor = 1;
var imageType = IMAGE_TYPES.JPG;
var imageCompression = 1;
var config = {
sizeFactor,
imageType,
imageCompression
};
var dataUri = data;
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 + '"/>';
checkPicture();
}).catch((error) => {
console.error('Error cropping and resizing photo:', error);
});
$('.md-modal').removeClass('md-show');
} else {
$('#next-step').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;" 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 + '"/>';
$('#loadingImage1').css('display', 'flex');
runCheckFace1();
checkPicture();
}).catch((error) => {
console.error('Error cropping and resizing photo:', error);
});
$('.md-modal').removeClass('md-show');
stopCamera();
}
}
function take_snapshot2(data) {
if (data) {
$('#next-step').addClass('disable');
var sizeFactor = 1;
var imageType = IMAGE_TYPES.JPG;
var imageCompression = 1;
var config = {
sizeFactor,
imageType,
imageCompression
};
var dataUri = data;
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;" 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 + '"/>';
checkPicture();
}).catch((error) => {
console.error('Error cropping and resizing photo:', error);
});
$('.md-modal').removeClass('md-show');
} else {
$('#next-step').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();
checkPicture();
}).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);
}
$('#next-step').addClass('disable');
checkPicture();
}
//////////////faceapi////////////////