Downloading AVIF File Converter sử dụng HTML, CSS và JavaScript với mã nguồn

AVIF File Converter là một công cụ chuyển đổi hình ảnh AVIF sang định dạng JPEG, PNG hoặc WebP. Được xây dựng bằng HTML, CSS và JavaScript,

Chào mừng đến với AVIF File Converter, một công cụ đơn giản và hiệu quả trên nền tảng web được thiết kế để chuyển đổi hình ảnh AVIF sang các định dạng phổ biến như JPEG, PNG và WebP. Cho dù bạn là nhiếp ảnh gia, nhà thiết kế hay người dùng hàng ngày, công cụ này giúp chuyển đổi hình ảnh nhanh chóng và dễ dàng. Với giao diện trực quan, người dùng có thể dễ dàng tải lên tệp AVIF, xem trước hình ảnh, điều chỉnh cài đặt chất lượng và tải xuống tệp đã chuyển đổi—tất cả chỉ bằng vài cú nhấp chuột.

Được xây dựng bằng HTML, CSS, and JavaScript, trình chuyển đổi này tận dụng thư viện Browser Image Compression để đảm bảo đầu ra chất lượng cao trong khi vẫn giữ kích thước tệp được tối ưu hóa. Không cần phần mềm phức tạp hoặc tải xuống bổ sung—mọi thứ đều chạy trực tiếp trong trình duyệt của bạn. Hãy dùng thử ngay và trải nghiệm chuyển đổi hình ảnh AVIF nhanh chóng, mượt mà và đáng tin cậy!

Tính năng:

✔ Tải lên tệp AVIF – Người dùng có thể chọn và tải lên hình ảnh AVIF trực tiếp từ thiết bị của họ.
✔ Xem trước hình ảnh trực tiếp – Hình ảnh đã tải lên được hiển thị để xem trước trước khi chuyển đổi.
✔ Nhiều định dạng đầu ra – Chuyển đổi hình ảnh AVIF sang JPEG, PNG hoặc WebP.
✔ Cài đặt chất lượng có thể điều chỉnh – Người dùng có thể kiểm soát chất lượng đầu ra bằng cách sử dụng một thanh trượt đơn giản.
✔ Ngay lập tức Tải xuống – Hình ảnh đã chuyển đổi có thể tải xuống ngay lập tức.
✔ Thiết kế đáp ứng – Hoạt động liền mạch trên cả máy tính để bàn và thiết bị di động.

Công nghệ được sử dụng::

HTML – Cung cấp bố cục cấu trúc của ứng dụng web.
CSS – Cải thiện giao diện trực quan với thiết kế hiện đại và đáp ứng nhanh.
JavaScript – Xử lý việc chọn tệp, xem trước hình ảnh, chuyển đổi định dạng và tải xuống.
Thư viện nén hình ảnh trên trình duyệt – Tối ưu hóa hình ảnh để có hiệu suất tốt hơn.

Cách sử dụng:

Chọn Tệp AVIF – Nhấp vào nút "Chọn Tệp AVIF" và tải hình ảnh của bạn lên.
Xem trước Hình ảnh – Tệp đã chọn sẽ được hiển thị trong phần xem trước.
Chọn Định dạng Đầu ra – Chọn định dạng đầu ra ưa thích của bạn (JPEG, PNG hoặc WebP).
Điều chỉnh Chất lượng – Sử dụng thanh trượt để đặt mức chất lượng mong muốn (cho JPEG/WebP).
Chuyển đổi & Tải xuống – Nhấp vào nút "Chuyển đổi & Tải xuống" để xử lý và lưu tệp.

Ảnh chụp màn hình

Landing Page

Converting Image (Downloadable)

Download code AVIF File Converter

avif-file-converter.zip 2.91MB

Nếu không download được thì sử dụng code sau

Tệp Css

/* General Styles */
body {
    font-family: "Arial", sans-serif;
    background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.hoanvv {
    align-items: center;
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 100%;
}

p {
    font-size: 1rem;
    color: #666;
}

.upload-btn {
    background: #007bff;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.upload-btn:hover {
    background: #0056b3;
}

#fileName {
    margin: 10px 0 10px 0;
    color: #666;
}

/* Preview Section */
.preview-section {
    display: flex;
    justify-content: center;
}

#imagePreview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 5px;
    display: none;
}

/* Settings Section */
.settings-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    margin-top: 10px;
}

.settings-section div {
    width: 45%;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

select,
input[type="range"] {
    width: 100%;
    margin-bottom: 1rem;
}

select {
    padding: 5px;
}

#qualityValue {
    display: block;
    font-size: 0.9rem;
    color: #666;
}

/* Convert Button */
.convert-btn {
    background: #28a745;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.convert-btn:hover {
    background: #218838;
}

Tệp Js

Jconst fileInput = document.getElementById("fileInput");
const fileNameDisplay = document.getElementById("fileName");
const imagePreview = document.getElementById("imagePreview");
const formatSelect = document.getElementById("formatSelect");
const qualitySlider = document.getElementById("qualitySlider");
const qualityValue = document.getElementById("qualityValue");
const convertBtn = document.getElementById("convertBtn");

// Update quality value display
qualitySlider.addEventListener("input", () => {
    qualityValue.textContent = `${Math.round(
        qualitySlider.value * 100
    )}%`;
});

// Handle file input
fileInput.addEventListener("change", (e) => {
    const file = e.target.files[0];
    document.querySelector('.preview-section').style.display = '';
    document.querySelector('.settings').style.display = '';
    fileNameDisplay.style.display = '';
    if (file) {
        fileNameDisplay.textContent = file.name;
        const reader = new FileReader();
        reader.onload = (event) => {
            imagePreview.src = event.target.result;
            imagePreview.style.display = "block";
        };
        reader.readAsDataURL(file);
    }
});

// Convert and download image
convertBtn.addEventListener("click", async () => {
    const file = fileInput.files[0];
    if (!file) {
        alert("Please upload an AVIF file first.");
        return;
    }

    const options = {
        maxSizeMB: 1,
        maxWidthOrHeight: 1024,
        useWebWorker: true,
        fileType: formatSelect.value,
        initialQuality: qualitySlider.value,
    };

    try {
        const compressedFile = await imageCompression(
            file,
            options
        );
        const downloadLink = document.createElement("a");
        downloadLink.href = URL.createObjectURL(compressedFile);
        downloadLink.download = `converted.${formatSelect.value}`;
        downloadLink.click();
    } catch (error) {
        console.error("Error converting file:", error);
        alert("An error occurred during conversion.");
    }
});

Tệp HTML

<div class="container">
    <h1>AVIF File Converter</h1>
    <p>Convert AVIF files to JPEG, PNG, or WebP with ease!</p>

    <div class="upload-section">
        <input type="file" id="fileInput" accept=".avif" hidden />
        <label for="fileInput" class="upload-btn">Choose AVIF File</label>
    </div>

    <div class="preview-section" style="display: none;">
        <img id="imagePreview" alt="Image Preview" />
    </div>
    <span id="fileName" style="display: none;"></span>

    <div class="settings" style="display: none;">
        <div class="settings-section">
            <div>
                <label for="formatSelect">Output Format:</label>
                <select id="formatSelect">
                    <option value="jpeg">JPEG</option>
                    <option value="png">PNG</option>
                    <option value="webp">WebP</option>
                </select>
            </div>

            <div>
                <label for="qualitySlider">Quality:</label>
                <input type="range" id="qualitySlider" min="0.1" max="1" step="0.1" value="0.8" />
                <span id="qualityValue">80%</span>
            </div>
        </div>

        <button id="convertBtn" class="convert-btn">
            Convert & Download
        </button>
    </div>
</div>

Cách dùng AVIF File Converter

Tải xuống tệp mã nguồn được cung cấp.
Trích xuất tệp zip đã tải xuống.
Mở tệp html và bạn đã sẵn sàng!

Kết luận:

Tóm lại, AVIF File Converter cung cấp một cách liền mạch và hiệu quả để chuyển đổi hình ảnh AVIF sang các định dạng được hỗ trợ rộng rãi một cách dễ dàng. Với giao diện thân thiện với người dùng, cài đặt chất lượng có thể tùy chỉnh và tải xuống ngay lập tức, nó đảm bảo trải nghiệm không gặp rắc rối cho bất kỳ ai muốn chuyển đổi hình ảnh nhanh chóng. Cho dù bạn đang tối ưu hóa tệp để sử dụng trên web hay các dự án cá nhân, công cụ này cung cấp kết quả chất lượng cao ngay trong trình duyệt của bạn—không cần cài đặt. Hãy dùng thử và đơn giản hóa quy trình chuyển đổi hình ảnh của bạn ngay hôm nay!

Vậy là xong! Tôi hy vọng" Bộ chuyển đổi tệp AVIF sử dụng HTML, CSS và JavaScript "này sẽ hỗ trợ bạn trên hành trình lập trình , mang lại giá trị cho các dự án hiện tại và sắp tới của bạn

Lưu ý: Do kích thước hoặc độ phức tạp của bài nộp này, tác giả đã nộp dưới dạng tệp .zip để rút ngắn thời gian tải xuống của bạn. Sau khi tải xuống, bạn sẽ cần một chương trình như Winzip để giải nén.

Lưu ý về virus: SourceCodester.com sẽ quét tất cả các tệp một lần mỗi ngày để tìm virus, nhưng mỗi ngày lại có thêm virus mới nên không có chương trình phòng ngừa nào có thể diệt được 100%

VÌ SỰ AN TOÀN CỦA BẠN, VUI LÒNG:

1. Quét lại các tệp đã tải xuống bằng trình kiểm tra vi-rút cá nhân của bạn trước khi sử dụng.
2. KHÔNG BAO GIỜ chạy các tệp đã biên dịch (.exe, .ocx, .dll, v.v.) mà chỉ chạy mã nguồn.

Downloading AVIF File Converter sử dụng HTML, CSS và JavaScript với mã nguồn

Tính năng:

Công nghệ được sử dụng::

Cách sử dụng:

Ảnh chụp màn hình

Landing Page

Converting Image (Downloadable)

Download code AVIF File Converter

Nếu không download được thì sử dụng code sau

Cách dùng AVIF File Converter

Kết luận:

Các Shortcode có thể sử dụng cho Template Median UI v1.6

Hướng dẫn tắt thông báo sử dụng dữ liệu Vietnamobile trên Facebook

Nexus LiteOS 10 v1709 | Windows 10 Lite Gaming by TheWorldofPC

Download Oppo Unlock Tool (Pattern, FRP, Network) 2022

Windows 10/11 Pro Lite AIO Edition x64 Mar 2022 - Pre-Activated

Downloading AVIF File Converter sử dụng HTML, CSS và JavaScript với mã nguồn

Tính năng:

Công nghệ được sử dụng::

Cách sử dụng:

Ảnh chụp màn hình

Landing Page

Converting Image (Downloadable)

Download code AVIF File Converter

Nếu không download được thì sử dụng code sau

Cách dùng AVIF File Converter

Kết luận:

Tham gia cuộc trò chuyện