Tạo ứng dụng chụp hình đơn giản trên web với Javascript và PHP

Đâ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é !

test php

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ẻ canvas, tiếp theo nó sẽ tự động lưu ảnh vừa chụp lên server. Người dùng có thể đi đến đường dẫn ảnh bằng cách nhấp vào đường dẫn "đi tới hình ảnh".

2. Xây dựng ứng dụng chụp hình đơn giản

Trong ứ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 HTML

Các bạn tạo file index.html với nội dung sau :

Bài viết này được đăng tại [free tuts .net]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ứng dụng chụp hình đơn giản</title>
        <style>	
        </style>
    </head>
    <body>
        <div class="booth">
            <video id="video" width="400" height="300"></video>
            <a href="#" id="capture" class="booth-capture-button">Chụp hình</a>
            <canvas id="canvas" width="400" height="300"></canvas>
        </div><!-- div.booth -->
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script>
        </script>
    </body>
</html>

Trong đó :

Thẻ div.booth là nơi chứa toàn bộ ứng dụng.
Thẻ video là nơi chứa hình ảnh webcam.
Thẻ canvas là nơi in hình ảnh khi nhấn Chụp ảnh.
Thẻ a là nút Chụp ảnh.
Thẻ style là nơi mình sẽ viết CSS (xem ở bước viết CSS).
Thẻ script là nơi mình sẽ viết Javascript (xem ở bước viết Javascript).

Viết CSS

Trong 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('<a href="' + result + '">Đi tới link ảnh</a>');
        });
    });
})();

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ệu

Chúng ta tạo thêm file saveimg.php cùng cấp với thư mục chứa file index.html, sau đó nhập nội dung sau vào:

<?php
// Gán dữ liệu nhân được và $img
$img = $_POST['imgBase64']; 

// Tìm kiếm và thay thế đường dẫn ảnh 
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);

// Mã hoá file sang dạng Base64
$fileData = base64_decode($img); 
$charName = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

// Tạo tên ảnh ngẫu nhiên để không bị trùng lặp 
$randName = substr(str_shuffle($charName), 0, 15); 

// imgs/ là đường dẫn của thư mục chứa ảnh
$fileName = 'imgs/' . $randName . '.png'; 

// Ghi dữ liệu $fileData đến file = $fileName
file_put_contents($fileName, $fileData); 

// Trả về tham số result khi hoàn tất
echo $fileName; 
?>

Cuối cùng tạo cái thư mục imgs cùng cấp với file index.html và saveimg.php để chứa ảnh. Bây giờ bạn hãy trải nghiệp đi nhé :)

Lưu ý: Vì chức năng này cần bảo mật dữ liệu khi upload nên những website chạy dưới dạng http sẽ không hoạt động, chỉ có thể chạy được trên server ảo ở local thôi :) Nên bạn nào muốn nó hoạt động trên site live thì sử dụng https nhé!

4. Lời kết

Vớ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ẻ canvas và gửi dữ liệu để tạo một file ảnh bằng PHP . Cảm ơn các bạn đã theo dõi bài viết, chúc các bạn thành công !

Danh sách file tải về

Tên file tải về	Pass giải nén
Camera với Javascript và PHP	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Tạo ứng dụng chụp hình đơn giản trên web với Javascript và PHP

1. Nguyên lý hoạt động

2. Xây dựng ứng dụng chụp hình đơn giản

Viết HTML

Viết CSS

Viết Javascript

Viết PHP để nhận dữ liệu

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Tạo ứng dụng chụp hình đơn giản trên web với Javascript và PHP

1. Nguyên lý hoạt động

2. Xây dựng ứng dụng chụp hình đơn giản

Viết HTML

Viết CSS

Viết Javascript

Viết PHP để nhận dữ liệu

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript