Image to Base64 Encoder Online giúp chuyển đổi Image thành Base64 String. Sao chép vào clipboard và Tải xuống chuỗi base64
Trong quá trình phát triển để cải thiện hiệu suất hoặc không muốn tải hình ảnh hoặc biểu tượng nhỏ, công cụ image to base64 sẽ giúp ích. Chuỗi Base64 dưới dạng Hình ảnh có thể được sử dụng trong email dưới dạng [Phần mở rộng thư Internet đa năng]. Tất cả hỗ trợ trình duyệt mới nhất để hiển thị chuỗi base64 dưới dạng hình ảnh. Base64 Chuỗi biểu thị dữ liệu trong radix-64 đặc biệt phổ biến trên WWW [World Wide Web]
Bạn có thể làm gì với Image to Base64 Converter?
- Công cụ này giúp bạn chuyển đổi Hình ảnh của mình sang nhóm Base64 một cách dễ dàng
- Tất cả các định dạng hình ảnh được hỗ trợ như PNG, JPEG, GIF, v.v.
- Giới hạn tải lên hình ảnh được đặt thành 4 MB
- Hình ảnh mã hóa Base64 tạo mã HTML cho IMG với Base64 dưới dạng src [nguồn dữ liệu]
- Mã nền CSS của Hình ảnh với base64 cũng được tạo
- Công cụ Mã hóa hình ảnh hỗ trợ tải Tệp hình ảnh để chuyển đổi sang Base64. Nhấp vào nút Tải lên hình ảnh và chọn Tệp
- Image to Base64 Online hoạt động tốt trên Windows, MAC, Linux, Chrome, Firefox, Edge và Safari
Image to Base64 hoạt động như thế nào?
Nó sử dụng thuật toán base64 để tạo chuỗi base64 từ hình ảnh bằng JavaScript. Nó không gửi hình ảnh đến máy chủ để chuyển đổi
Bộ mã hóa Base64 sang Hình ảnh Trực tuyến giúp chuyển đổi Chuỗi Base64 thành hình ảnh. Sao chép vào clipboard và tải xuống hình ảnh
Nó cho phép bất kỳ ai có công cụ này mà không cần cài đặt trên PC hoặc thiết bị của họ để chuyển đổi dữ liệu Base64 thành tệp hình ảnh. Bảng chữ cái Base64 bao gồm tất cả 26 ký tự chữ cái viết hoa từ A-Z và 26 ký tự viết thường tương ứng từ a-z
Bạn có thể làm gì với Base64 để giải mã hình ảnh?
- Công cụ này giúp chuyển đổi chuỗi/văn bản base64 thành hình ảnh
- Sau khi chuyển đổi hình ảnh, bạn có thể tải xuống dưới dạng tệp png / hình ảnh
- Công cụ này giúp bạn chuyển đổi Chuỗi Base64 thành hình ảnh một cách dễ dàng
- Công cụ mã hóa Base64 hỗ trợ tải Tệp văn bản Base64 để chuyển đổi sang Hình ảnh. Nhấp vào nút Tải tệp lên và chọn Tệp
- Base64 to Image Online hoạt động tốt trên Windows, MAC, Linux, Chrome, Firefox, Edge và Safari
JavaScript có quy ước chuyển đổi URL hình ảnh hoặc hình ảnh PC cục bộ thành chuỗi base64. Chuỗi này có thể chứa nhiều ký hiệu và chữ cái. Ở đây, nó được giải thích cách tạo một phần tử canvas, tải một hình ảnh vào đó và sử dụng toDataURL để hiển thị biểu diễn chuỗi. Để có được biểu diễn chuỗi base64, chúng tôi cũng sẽ sử dụng tùy chọn trình đọc tệp
Trong trường hợp này, nó được tạo dưới dạng phần tử canvas và kích thước của nó sẽ được chỉ định. dataURL nơi biểu diễn chuỗi sẽ được lưu trữ. Chúng tôi sẽ thêm hình ảnh ngẫu nhiên từ các nguồn trực tuyến và đảm bảo đối tượng để tránh các vấn đề bảo mật. 'Ẩn danh' dưới dạng crossOrigin Cuối cùng, chức năng gọi lại của chúng tôi sẽ chuyển dataURL đến chức năng toDataURL để thông báo cho cửa sổ rằng chuỗi base64 cho hình ảnh tương ứng đã sẵn sàng để xem trước
ví dụ 1
Ví dụ sau cố gắng chuyển đổi hình ảnh sang URL dữ liệu Base64 trong JavaScript –
Get URL i
ví dụ 2
Sau đây là một ví dụ chuyển đổi một hình ảnh thành URL -
Get URL i
Display String
Trong trường hợp bạn chưa biết, URL dữ liệu chỉ đơn giản là một chuỗi ký tự dài đại diện cho mã nhị phân của hình ảnh của bạn. Sau đó, bạn có thể sử dụng URL này trong các thẻ HTML của mình
Rât thuận tiện
Video hướng dẫn
Nếu bạn thích video hướng dẫn hơn, bạn có thể xem video dài 4 phút này trên kênh YouTube của tôi
Bước 1. Nhập tệp
Bạn sẽ cần một trường nhập tệp trong HTML của mình. Chỉ như thế này
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bạn có thể đặt tên cho ID bất cứ điều gì bạn thích
Bước 2. Thay đổi sự kiện
Trong JavaScript, bạn sẽ cần đính kèm trình nghe change
để phản ứng khi người dùng chọn tệp
const fileInput = document.getElementById["fileInput"];
fileInput.addEventListener["change", e => {
console.log[e];
}];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn chọn một tệp và kiểm tra bảng điều khiển, bạn sẽ thấy đối tượng sự kiện. Lưu ý tài sản
0Get URL i
Display String
Bước 3. Thiết lập trình đọc tệp
Tiếp theo, bạn sẽ cần tham chiếu đến tệp đã chọn và tạo một phiên bản mới của
1. Đối tượng đọc tệp này có thể đọc tệp ở các dạng khác nhauGet URL i
Display String
fileInput.addEventListener["change", e => {
const file = fileInput.files[0];
const reader = new FileReader[];
}];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thay thế dòng
2 bằng đoạn mã trênGet URL i
Display String
Bước 4. Đọc dưới dạng URL dữ liệu
Bây giờ chúng ta đã tạo
1, chúng ta có thể yêu cầu nó đọc tệp dưới dạng URL dữ liệu Base64Get URL i
Display String
reader.addEventListener["load", [] => {
// Base64 Data URL 👇
console.log[reader.result];
}];
reader.readAsDataURL[file];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Như bạn có thể thấy, chúng tôi đính kèm sự kiện
const fileInput = document.getElementById["fileInput"];
fileInput.addEventListener["change", e => {
console.log[e];
}];
1 với sự kiện 1. Khi tệp đã được đọc xong, chúng tôi có thể lấy URL dữ liệu bằng cách truy cậpGet URL i
Display String
const fileInput = document.getElementById["fileInput"];
fileInput.addEventListener["change", e => {
console.log[e];
}];
3