Chuyển đổi Base64 DataURL

Base64 Thuần
0 ký tự

Công cụ trực tuyến chuyển đổi hai chiều giữa Base64 thuần và DataURL với khả năng tự động nhận diện MIME và loại bỏ khoảng trắng.

Đề xuất Liên quan

Mã hóa Base64

Giải mã Base64

Base64 gộp nhiều dòng

Base64 sang ảnh

Ảnh sang Base64

Dọn dẹp Base64

Base64 DataURL là gì?

DataURL là một lược đồ URI nhúng dữ liệu trực tiếp vào URL với định dạng data:[<kiểu MIME>];base64,<dữ liệu Base64>. Nó cho phép nhúng hình ảnh, PDF, phông chữ và các tài nguyên nhỏ khác trực tiếp vào HTML, CSS, JavaScript mà không cần thêm yêu cầu HTTP.

**Base64 thuần so với DataURL:** Base64 thuần chỉ là một chuỗi đã mã hóa (ví dụ iVBORw0KGgo...); DataURL là một URI đầy đủ với tiền tố data: và kiểu MIME, có thể dùng trực tiếp làm giá trị cho src, href, url()…

**Mục đích của công cụ:** Chuyển đổi qua lại giữa «chuỗi Base64 thuần» và «DataURL đầy đủ» — vừa có thể tự động thêm tiền tố data: và kiểu MIME vào một Base64 có sẵn, vừa có thể trích phần Base64 thuần ra khỏi DataURL.

**Các ứng dụng phổ biến:** ① nhúng hình nền trong CSS; ② src nội tuyến trong HTML <img>; ③ hình ảnh nội tuyến trong Markdown; ④ dán hình ảnh vào trình soạn thảo văn bản; ⑤ gỡ lỗi lược đồ data URI.

Trường hợp sử dụng

  • Thêm tiền tố data: và kiểu MIME vào một Base64 có sẵn để có DataURL có thể nhúng thẳng vào HTML
  • Trích phần Base64 thuần ra khỏi một DataURL để tái lắp ráp hoặc truyền tải dễ dàng hơn
  • Kiểm tra tính đầy đủ của tải trọng Base64 khi gỡ lỗi tài nguyên data: ở frontend
  • Tự động nhận diện kiểu MIME (PNG/JPEG/PDF…) của Base64 lấy từ bộ nhớ tạm
  • Chuẩn bị data URL để dùng trong CSS background-image hoặc HTML <img src>
  • Biến Base64 của hình ảnh thành DataURL có thể dán vào trình soạn thảo Markdown

Cách Sử dụng

  1. Chọn chiều: «Thêm tiêu đề» (Base64 thuần → DataURL) hoặc «Bỏ tiêu đề» (DataURL → Base64 thuần).
  2. Dán nội dung vào ô bên trái: ở chế độ thêm dán Base64 thuần, ở chế độ bỏ dán chuỗi data:...
  3. Ở chế độ thêm có thể giữ «Tự động nhận diện» hoặc chọn một kiểu cụ thể trong menu MIME.
  4. Công cụ chuyển đổi theo thời gian thực, kết quả hiển thị bên phải và có thể sao chép hoặc tải xuống dạng txt.

Tính năng

  • Chuyển đổi hai chiều: Base64 thuần ↔ DataURL
  • 11 kiểu MIME: hình ảnh, tài liệu, âm thanh/video, văn bản
  • Tự động nhận diện MIME: dựa trên byte ma thuật cho PNG/JPEG/GIF/WEBP/PDF
  • Loại bỏ khoảng trắng: tự động dọn dẹp ký tự xuống dòng và dấu cách thừa
  • Chuyển đổi theo thời gian thực: tự tính lại sau 300 ms khi nhập
  • Đổi chiều tự động: khi chuyển chiều, đầu vào và đầu ra tự hoán đổi
  • Sao chép một cú nhấp: kết quả được sao chép ngay vào bộ nhớ tạm
  • Tải xuống txt: lưu thành tệp dataurl-result.txt
  • Tương thích PC và di động: bảng điều khiển có thể kéo hoặc chuyển tab
  • Xử lý cục bộ trong trình duyệt: nội dung không gửi lên máy chủ

Best Practices

Ưu tiên tự động nhận diện

Nếu không chắc kiểu MIME, hãy giữ «Tự động nhận diện» mặc định và chỉ chọn thủ công khi nhận diện thất bại.

Chú ý giới hạn kích thước

DataURL có giới hạn 2–4 MB trong trình duyệt; với tệp lớn, nên dùng URL tham chiếu thay vì nhúng.

Loại bỏ ký tự thừa

Base64 dán vào thường chứa xuống dòng, công cụ sẽ tự loại bỏ; nếu yêu cầu cao hơn, hãy dùng «Làm sạch Base64» trước.

Kiểm tra đối chiếu

Sau khi chuyển đổi, dùng «Kiểm tra Base64» hoặc công cụ dành cho nhà phát triển của trình duyệt để xác nhận DataURL tải đúng.

Kiểm tra sau khi sao chép

Sau khi dán vào vị trí đích, kiểm tra trong bảng điều khiển của trình duyệt xem kết quả giải mã có khớp với kỳ vọng không.

Câu hỏi Thường gặp

Chế độ thêm đã bật tự động nhận diện chưa?

Có. Công cụ mặc định bật tự động nhận diện: kiểm tra các byte đầu của Base64 (byte ma thuật) để xác định định dạng PNG, JPEG, GIF, WEBP hoặc PDF. Nếu cần kiểu MIME khác (ví dụ application/json, video/mp4), bạn có thể chọn thủ công trong menu thả xuống.

Đầu vào đã có tiền tố data: thì sao?

Ở chế độ thêm, nếu đầu vào đã bắt đầu bằng data:, công cụ sẽ trả lại nguyên bản và không thêm tiền tố lần nữa. Ở chế độ bỏ, nếu đầu vào không phải định dạng DataURL, công cụ sẽ loại bỏ khoảng trắng và trả về Base64 thuần.

Nếu tự động nhận diện thất bại thì sao?

Nếu Base64 không khớp với bất kỳ byte ma thuật nào của PNG/JPEG/GIF/WEBP/PDF, tự động nhận diện sẽ rơi về application/octet-stream. Trong trường hợp này, nên chọn kiểu MIME mong muốn theo cách thủ công.

Hỗ trợ những kiểu MIME nào?

image/png, image/jpeg, image/gif, image/webp, image/svg+xml, application/pdf, application/json, text/plain, text/html, audio/mpeg, video/mp4 — tổng cộng 11 kiểu phổ biến.

DataURL có giới hạn kích thước trong trình duyệt không?

Có. Hầu hết trình duyệt giới hạn tổng độ dài DataURL (khoảng 2–4 MB tùy trình duyệt); vượt giới hạn sẽ khiến tài nguyên tải thất bại. Với tệp lớn, nên dùng URL thông thường.

DataURL có thể dùng ở đâu?

Trong HTML <img src>, CSS url(), <a href> để tải xuống, JavaScript fetch, cú pháp hình ảnh Markdown, tài nguyên nhúng trong dữ liệu JSON…

Xuống dòng và khoảng trắng trong Base64 được tự động loại bỏ chứ?

Có. Ở chế độ thêm, xuống dòng và khoảng trắng được loại bỏ trước khi thêm tiền tố; ở chế độ bỏ, khoảng trắng cũng được loại bỏ sau khi trích từ DataURL.

Đổi chiều có làm thay đổi đầu vào không?

Khi đổi chiều, công cụ tự động lấy kết quả đầu ra hiện tại làm đầu vào mới, giúp thao tác liên tục trở nên thuận tiện.

Nội dung có được gửi lên máy chủ không?

Không. Mọi chuyển đổi đều được xử lý cục bộ trong trình duyệt; đầu vào và đầu ra đều không rời khỏi thiết bị của bạn.

Thuật ngữ

DataURL
Lược đồ URI dữ liệu do RFC 2397 định nghĩa, định dạng data:[<mime>];base64,<data>, có thể dùng trực tiếp làm giá trị src, href, url()…
Kiểu MIME
Mã định danh loại phương tiện, ví dụ image/png, application/pdf. Công cụ hỗ trợ 11 kiểu MIME phổ biến và có khả năng tự động nhận diện.
Byte ma thuật
Các byte cố định ở đầu tệp dùng để nhận diện định dạng. Công cụ phát hiện PNG/JPEG/GIF/WEBP/PDF thông qua các byte ma thuật.
Base64
Phương pháp mã hóa biểu diễn dữ liệu nhị phân bằng 64 ký tự có thể in được. Phần tải trọng của DataURL là Base64.
Lược đồ Data URI
Giao thức URI data: do RFC 2397 định nghĩa — tên gọi chính thức của đặc tả DataURL.

Authoritative References