Chuyển đổi html sang JavaScript hình ảnh Base64

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

 type="file" id="fileInput" />

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

   
   
   
   Get URL i
   


   
   


   
      Display String
   

0

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

   
   
   
   Get URL i
   


   
   


   
      Display String
   

1. Đối tượng đọc tệp này có thể đọc tệp ở các dạng khác nhau

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

   
   
   
   Get URL i
   


   
   


   
      Display String
   

2 bằng đoạn mã trên

Bước 4. Đọc dưới dạng URL dữ liệu

Bây giờ chúng ta đã tạo

   
   
   
   Get URL i
   


   
   


   
      Display String
   

1, chúng ta có thể yêu cầu nó đọc tệp dưới dạng URL dữ liệu Base64

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

   
   
   
   Get URL i
   


   
   


   
      Display String
   

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ập

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

3

Làm cách nào để chuyển đổi nội dung HTML sang Base64 trong JavaScript?

Làm cách nào để chuyển đổi hình ảnh thành Base64 trong JavaScript?

Làm cách nào để chuyển đổi hình ảnh thành Base64?

Chúng tôi có thể chuyển đổi hình ảnh sang Base64 không?