Nếu bạn muốn tạo một project về tuyển dụng. Cần chụp nhanh hình ảnh của các nhân viên để đưa vào CV. Thì bài viết này sẽ là một chia sẻ hữu ích cho bạn.
Trong bài viết này, tôi xin chia sẻ đoạn code để bạn có thể kết nối với Webcam, và Capture hình ảnh của Webcam để đưa vào vị trí mong muốn.
{tocify} $title={Table of Contents}
1. Thiết kế giao diện hiển thị
Nguyên liệu cần thiết:
- Một khung hiển thị hình ảnh lấy trực tiếp từ webcam
- Một khung hiển thị hình ảnh chụp được
- Một nút nhấn để ra lệnh chụp hình
Đây là đoạn code HTML đơn giản tôi đã tạo sẵn:
<!DOCTYPE html>
<html>
<head>
<title>Capture webcam image with PHP and jQuery - tips.vn</title>
<style type="text/css">
#results {
padding:5px;
border:1px solid;
background:#ccc;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Capture webcam image with php and jquery - tips.vn</h1>
<div class="row">
<div class="col-md-6">
<div id="my_webcam"></div>
<br/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="hidden" name="image" class="image-target">
</div>
<div class="col-md-6">
<div id="results">Your captured image will appear here...</div>
</div>
</div>
</div>
</body>
</html>
2. Nhúng thư viện WebcamJS
Chèn các thư viện sau vào giữa cặp thẻ <head></head>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
Tiếp theo, chúng ta cần khởi tạo Webcam, đặt chế độ chụp ảnh vào nút Take Snapshot và hiển thị hình ảnh mới chụp được lên khung result.
Các bạn chèn đoạn code jQuery bên dưới vào trên thẻ </body> của trang web:
<script language="JavaScript">
Webcam.set({
width: 480,
height: 360,
image_format: 'jpeg',
jpeg_quality: 120
});
Webcam.attach( '#my_webcam' );
function take_snapshot() {
Webcam.snap( function(url) {
$(".image-target").val(url);
document.getElementById('results').innerHTML = '<img src="'+url+'"/>';
} );
}
</script>
Great tips thanks!
ReplyDelete