291 lines
9.8 KiB
JavaScript
291 lines
9.8 KiB
JavaScript
// if ($(window).width() < 992) {
|
|
// Webcam.set({
|
|
|
|
// width: 1800,
|
|
// height: 1800,
|
|
|
|
// // final cropped size
|
|
// // crop_width: 296,
|
|
// // crop_height: 396,
|
|
// dest_width: 1800,
|
|
// dest_height: 1800,
|
|
|
|
// crop_width: 1800,
|
|
// crop_height: 1800,
|
|
// image_format: 'jpeg',
|
|
// jpeg_quality: 90,
|
|
// // facingMode: "environment",
|
|
// constraints: {
|
|
// facingMode: "user" // This sets the camera to front-facing
|
|
// }
|
|
// });
|
|
// Webcam.attach('#my_camera');
|
|
// Webcam.attach('#video');
|
|
// var demo = $('#video');
|
|
// let demoVideo = $('#video').find('video[playsinline="playsinline"]');
|
|
// demo.css({
|
|
// width: "100%",
|
|
// height: "100%",
|
|
// });
|
|
// demoVideo.css({
|
|
// width: "100%",
|
|
// height: "100%",
|
|
// });
|
|
// } else {
|
|
|
|
// Webcam.set({
|
|
// width: 600,
|
|
// height: 600,
|
|
// image_format: 'jpeg',
|
|
// jpeg_quality: 100
|
|
// });
|
|
// Webcam.attach('#my_camera');
|
|
// Webcam.attach('#video');
|
|
// var demo = $('#video');
|
|
// let demoVideo = $('#video').find('video[playsinline="playsinline"]');
|
|
// demo.css({
|
|
// width: "100%",
|
|
// height: "100%",
|
|
// });
|
|
// demoVideo.css({
|
|
// width: "100%",
|
|
// height: "100%",
|
|
// });
|
|
// }
|
|
|
|
// function take_snapshot1() {
|
|
// Webcam.snap(function (data_uri) {
|
|
// // ایجاد یک عنصر تصویر از دادههای تصویر
|
|
// var img = new Image();
|
|
// img.src = data_uri;
|
|
// img.onload = function() {
|
|
// 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;
|
|
|
|
// let newWidth = 1800;
|
|
// let newHeight = 1800;
|
|
|
|
// // تنظیم اندازه کانواس به اندازه جدید
|
|
// canvas.width = newWidth;
|
|
// canvas.height = newHeight;
|
|
|
|
// // رسم تصویر کراپ شده و تغییر اندازه داده شده
|
|
// ctx.drawImage(img, startX, startY, sideLength, sideLength, 0, 0, newWidth, newHeight);
|
|
// // resolve(canvas.toDataURL('image/jpeg'));
|
|
|
|
|
|
// // // ایجاد یک بوم برای برش دادن تصویر
|
|
// // var canvas = document.createElement('canvas');
|
|
// // var context = canvas.getContext('2d');
|
|
// // var size = Math.min(img.width, img.height);
|
|
|
|
// // canvas.width = size;
|
|
// // canvas.height = size;
|
|
|
|
// // // محاسبه محل برش تصویر
|
|
// // var sx = (img.width - size) / 2;
|
|
// // var sy = (img.height - size) / 2;
|
|
|
|
// // context.drawImage(img, sx, sy, size, size, 0, 0, size, size);
|
|
|
|
// // تبدیل بوم به دادههای URI
|
|
// var croppedDataUri = canvas.toDataURL('image/jpeg');
|
|
|
|
// // نمایش تصویر برش داده شده
|
|
// document.getElementById('result1').innerHTML = '<img style="display:none; object-fit: cover;" id="pic1" data-uri="' + croppedDataUri + '" src="' + croppedDataUri + '"/>';
|
|
// document.getElementById('demoResult1').innerHTML = '<button type="button" class="upload-image1">آپلود عکس اول</button><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + croppedDataUri + '" src="' + croppedDataUri + '"/>';
|
|
// };
|
|
// });
|
|
// $('.md-modal').removeClass('md-show');
|
|
// }
|
|
|
|
// function take_snapshot1() {
|
|
// Webcam.snap(function(data_uri) {
|
|
// document.getElementById('result1').innerHTML = '<img style="display:none; object-fit: cover;" id="pic1" data-uri="' + data_uri + '" src="' + data_uri + '"/>';
|
|
// document.getElementById('demoResult1').innerHTML = '<button type="button" class="upload-image1">آپلود عکس اول</button><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + data_uri + '" src="' + data_uri + '"/>';
|
|
// });
|
|
// $('.md-modal').removeClass('md-show');
|
|
// }
|
|
// function take_snapshot2() {
|
|
// Webcam.snap(function (data_uri) {
|
|
// document.getElementById('result2').innerHTML = '<img style="display:none; object-fit: cover;" id="pic2" data-uri="' + data_uri + '" src="' + data_uri + '"/>';
|
|
// document.getElementById('demoResult2').innerHTML = '<button type="button" class="upload-image2">آپلود عکس دوم</button><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + data_uri + '" src="' + data_uri + '"/>';
|
|
// });
|
|
// $('.md-modal').removeClass('md-show');
|
|
// }
|
|
|
|
|
|
$(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();
|
|
});
|
|
});
|
|
|
|
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() {
|
|
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 = '<button type="button" class="upload-image1">آپلود عکس اول</button><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
}).catch((error) => {
|
|
console.error('Error cropping and resizing photo:', error);
|
|
});
|
|
|
|
$('.md-modal').removeClass('md-show');
|
|
stopCamera();
|
|
}
|
|
|
|
function take_snapshot2() {
|
|
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 = '<button type="button" class="upload-image2">آپلود عکس دوم</button><img style="width: 100%; height: 100%; border-radius:10px; object-fit: cover;" data-uri="' + resizedDataUri + '" src="' + resizedDataUri + '"/>';
|
|
}).catch((error) => {
|
|
console.error('Error cropping and resizing photo:', error);
|
|
});
|
|
|
|
$('.md-modal').removeClass('md-show');
|
|
stopCamera();
|
|
}
|
|
|
|
function set() {
|
|
let pic1 = $("#pic1").attr('src');
|
|
let pic2 = $("#pic2").attr('src');
|
|
let workshopId = Number($('#workshopId').val());
|
|
let employeeId = Number($('#employeeId').val());
|
|
if (pic1 != null && pic2 != null) {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: takePictureAjax,
|
|
data: { "base64pic1": pic1, "base64pic2": pic2, "workshopId": workshopId, "employeeId": employeeId },
|
|
headers: { "RequestVerificationToken": antiForgeryToken },
|
|
success: function (response) {
|
|
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('ثبت عکس با موفقیت انجام شد');
|
|
window.location.reload();
|
|
}, 2000);
|
|
} else {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text(response.message);
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('خطایی پیش آمده است');
|
|
}, 3500);
|
|
}
|
|
},
|
|
failure: function (response) {
|
|
console.log(5, response);
|
|
}
|
|
});
|
|
} else {
|
|
$('.alert-msg').show();
|
|
$('.alert-msg p').text(response.message);
|
|
setTimeout(function () {
|
|
$('.alert-msg').hide();
|
|
$('.alert-msg p').text('گرفتن دو عکس الزامیست');
|
|
}, 3500);
|
|
}
|
|
} |