Hướng dẫn chụp ảnh bằng javascript
Đây là một ứng dụng đơn giản về chụp hình, nó sẽ giúp các bạn hình thành cơ sở căn bản về media trên trình duyệt thông qua ngôn ngữ Javacript, đồng thời giúp bạn biết thêm về cách gửi dữ liệu đến PHP để tạo một file ảnh. Trước khi bắt đầu chúng ta hãy tìm hiển nguyên lý hoạt động của nó nhé ! Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. 1. Nguyên lý hoạt độngĐầu tiên khi truy cập vào ứng dụng nếu chưa cho phép sử dụng máy ảnh thì trình duyệt sẽ hỏi về việc này, còn ngược lại thì sẽ truy cập webcam của máy tính rồi dán đường dẫn vào thẻ video. Sau khi nhấp vào nút Chụp hình thì sẽ lấy hình ảnh trong thẻ video in ra thẻ 2. Xây dựng ứng dụng chụp hình đơn giảnTrong ứng dụng này mình có lưu hình lên server luôn nên chúng ta sử dụng cả HTML, CSS, Javascript và PHP. Viết HTMLCác bạn tạo file Bài viết này được đăng tại [free tuts .net]
Trong đó :
Viết CSSTrong phần này mình chỉ viết đơn giản thôi. Các bạn có thể viết giao diện tuỳ theo ý thích. * {padding: 0; margin: 0;} .booth {width: 400px; height: auto; margin: 20px auto; padding: 10px; background-color: #f1f1f1; border: 1px solid #e5e5e5;} .booth a {display: block; padding: 10px; text-align: center; background-color: #428bca; margin: 10px 0; font-size: 15px; color: #fff; text-decoration: none;} Viết JavascriptĐoạn code Javascript dưới đây sẽ xử lý ba công đoạn, công đoạn thứ nhất là khai báo các biến, công đoạn thứ hai là xử lý hiển thị camera, công đoạn thứ ba là xư lý chụp hình và sử dụng Ajax để lưu hình lên server. (function () { // BƯỚC 1: KHỞI TẠO CÁC BIẾN var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var vendoUrl = window.URL || window.webkitURL; // BƯỚC 2: XỬ LÝ HIỂN THỊ WEBCAM BAN ĐẦU canvas.style.display = 'none'; // Ẩn thẻ canvas khi vừa tải trang // Biến chưa hình ảnh webcam tuỳ theo loại từng trình duyệt navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // Hàm lấy hình ảnh webcam navigator.getMedia({ video: true, // Có hình ảnh audio: false // Không có âm thanh // Hàm chèn đường dẫn webcam vào thẻ video }, function (stream) { video.src = vendoUrl.createObjectURL(stream); video.play(); // Phát thẻ video // Hàm thông báo khi xảy lỗi hoặc không hỗ trợ trên trình duyệt này }, function (error) { alert('Rất tiếc đã xảy ra lỗi, có thể do trình duyệt của bạn không hỗ trợ chức năng này hoặc trang này chưa kết nối riêng tư https.'); }); // XỬ LÝ SỰ KIỆN CLICK VÀO NÚT CHỤP ẢNH document.getElementById('capture').addEventListener('click', function () { canvas.style.display = 'block'; // Hiện thẻ canas // In hình ảnh lên thẻ canvas ở x = 0, y = 0, width = 400, height = 300 context.drawImage(video, 0, 0, 400, 300); data = canvas.toDataURL(); // Tạo một đường dẫn hình ảnh của canvas // Gửi dữ liệu ảnh đến file saveimg.php thông qua phương thức POST $.ajax({ type: "POST", url: "saveimg.php", data: { imgBase64: data } // Sau khi gửi dữ liệu thành công thì sẽ thêm nút Đi tới link ảnh }).done(function (result) { $('.booth').append('Đi tới link ảnh'); }); }); })(); Bên trong mình đã chú thích từng bước rồi nên sẽ không giải thích thêm nữa. Viết PHP để nhận dữ liệuChúng ta tạo thêm file Cuối
cùng tạo cái thư mục
4. Lời kếtVới ứng ụng này hi vọng bạn đã phần nào nắm được nguyên lý
hoạt động của máy ảnh trên trình duyệt, cách in hình ảnh lên thẻ |