Bài viết chia sẻ cách chuyển đổi hình ảnh thành chuỗi Base64 trong JavaScript, bao gồm phần giải thích và phần code ví dụ.

Cách chuyển hình ảnh thành Base64

Lấy file và tạo Object URL

let file = fileInputElement.files[0];
let objectUrl = URL.createObjectURL(file);

let file = fileInputElement.files[0];

Lấy ra file được chọn bởi người dùng thông qua phần tử input có id là “file”. Biến file lưu trữ thông tin của file được chọn, bao gồm tên file, kiểu file và nội dung của file.

let objectUrl = URL.createObjectURL(file);

Sử dụng phương thức createObjectURL của đối tượng URL để tạo một URL trỏ đến file đó. Biến objectUrl lưu trữ URL này. Chú ý rằng đây chỉ là một URL tạm thời và sẽ bị xoá khi trang web đóng hoặc khi biến objectUrl được giải phóng.

URL.createObjectURL() trong JavaScript sẽ trả về một URL có dạng:

blob:[origin]/[uuid]

Trong đó:

  • [origin]: địa chỉ origin của trang hiện tại.
  • [uuid]: một chuỗi duy nhất được sinh ra để đại diện cho đối tượng được tạo ra.

Ví dụ:

blob:http://example.com/1a8b675c-c79d-42c2-bfbf-9e51b3e2384c

Chuyển thành Base64 với đầu vào là Object URL

function toBase64(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

Hàm toBase64() nhận đầu vào là đường dẫn URL của hình ảnh và một hàm callback để xử lý kết quả. Trong hàm này, một đối tượng XMLHttpRequest được tạo ra để tải hình ảnh từ đường dẫn URL. Sau đó, một đối tượng FileReader được tạo ra để đọc nội dung của hình ảnh và chuyển đổi nó sang chuỗi base64. Khi quá trình đọc nội dung hoàn thành, hàm callback được gọi để trả về kết quả chuỗi base64.

Gọi hàm và nhận kết quả

Đây là cách gọi hàm để nhận được chuỗi base64.

toBase64(objectUrl, function (result) {
    // result: chứa chuỗi base64
});

Ví dụ

– Code ví dụ:

<html>

<head>
    <title>Image To Base64</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <meta name="description" content="">
</head>

<body>
    <div class="container">
        <div class="mt-5">
            <h4 class="text-center text-uppercase">Image To Base64</h4>
        </div>

        <div class="m-2">
            <input class="form-control mt-10" type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*"
                id="file">

            <div style="text-align:center;">
                <button class="btn btn-success mt-3" type="button" onclick="convertImageToBase64();">Convert</button>
                <button class="btn btn-danger mt-3" type="button" onclick="reset();">Reset</button>
            </div>
        </div>

        <div class="m-2">
            <label for="base64Result">Base64:</label>
            <p class="text-success" id="status" hidden>Copied!</p>
            <textarea class="form-control mt-2" id="base64Result" rows="16" style="width:100%;"
                onclick="selectBase64();"></textarea>
        </div>

        <div class="m-2">
            <p><i>Copyright 2022 Phan Xuân Chánh</i></p>
        </div>
    </div>

    <script type="text/javascript">
        function toBase64(<em>url</em>, <em>callback</em>) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                var reader = new FileReader();
                reader.onloadend = function () {
                    callback(reader.result);
                }
                reader.readAsDataURL(xhr.response);
            };
            xhr.open('GET', url);
            xhr.responseType = 'blob';
            xhr.send();
        }

        function convertImageToBase64() {
            let fileInputElement = document.querySelector('#file');

            if (fileInputElement.value === '') {
                alert('Empty!');
            } else {
                let file = fileInputElement.files[0];

                let objectUrl = URL.createObjectURL(file);
                toBase64(objectUrl, function (<em>result</em>) {
                    document.querySelector('#base64Result').value = result;
                });
            }
        }

        function reset() {
            document.querySelector('#file').value = null;
            document.querySelector('#base64Result').value = null;
        }

        function selectBase64() {
            let textAreaElement = document.querySelector('#base64Result');
            if (textAreaElement.value !== '') {
                textAreaElement.focus();
                textAreaElement.select();
                document.execCommand('copy');

                document.querySelector('#status').removeAttribute('hidden');

                setTimeout(function () {
                    document.querySelector('#status').setAttribute('hidden', true);
                }, 3000);
            }
        }
    </script>
</body>

</html>

– Kết quả:

Giao diện công cụ chuyển hình ảnh sang Base 64.
Giao diện chính.
Giao diện công cụ chuyển hình ảnh sang Base 64 (khi đã chọn và thực hiện chuyển đổi).
Giao diện khi đã chọn ảnh và nhấn nút Convert.

Lời kết

Như vậy là qua bài viết trên mình đã làm một ví dụ đơn giản để thực hiển chuyển hình ảnh thành base64. Mong rằng bài viết sẽ giúp ích cho bạn, cảm ơn bạn đã đọc bài viết này!

Được phân loại:

Lập trình

Được gắn thẻ: