Làm cách nào tôi có thể chuyển đổi hình ảnh thành chuỗi Base64 bằng JavaScript?

Trong bài viết này, chúng ta sẽ xem cách chuyển đổi hình ảnh thành chuỗi base64 bằng cách sử dụng jquery. Các lược đồ mã hóa Base64 thường được sử dụng khi có nhu cầu mã hóa dữ liệu nhị phân cần được lưu trữ và truyền qua phương tiện được thiết kế để xử lý ASCII. Điều này là để đảm bảo rằng dữ liệu vẫn còn nguyên vẹn mà không bị sửa đổi trong quá trình vận chuyển. Base64 là một nhóm lược đồ mã hóa nhị phân thành văn bản biểu thị dữ liệu nhị phân (cụ thể hơn là một chuỗi byte 8 bit) theo chuỗi 24 bit có thể được biểu thị bằng bốn chữ số Base64 6 bit

Chúng tôi sẽ chuyển đổi hình ảnh thành chuỗi base64 bằng jquery hoặc javascript. Để chuyển đổi base64 thành chuỗi, chúng tôi đang sử dụng hàm FileReader() và nhận kết quả từ tệp

Hãy xem, chuyển đổi hình ảnh thành jquery chuỗi base64 hoặc chuyển đổi hình ảnh thành javascript chuỗi base64

FileReader được dùng để đọc nội dung của Blob hoặc Tệp

  
    How To Convert Image Into Base64 String Using jQuery - Techsolutionstuff
    
  
  
  
    
    Submit
    
  
  
  

Phương thức createElement() tạo Nút phần tử với tên được chỉ định như nút, canvas, v.v.  

Trong ví dụ này, chúng ta sẽ xem cách chuyển đổi hình ảnh thành chuỗi base64 bằng jQuery. Các lược đồ mã hóa Base64 thường được sử dụng khi có nhu cầu mã hóa dữ liệu nhị phân cần được lưu trữ và truyền qua phương tiện được thiết kế để xử lý ASCII

Chúng tôi sẽ chuyển đổi hình ảnh thành chuỗi base64 bằng jquery hoặc javascript. Để chuyển đổi base64 thành chuỗi, chúng tôi đang sử dụng hàm FileReader() và nhận kết quả từ tệp

Hãy xem, chuyển đổi hình ảnh thành chuỗi base64 jQuery

ví dụ 1

FileReader được sử dụng để đọc nội dung của Blob hoặc File

  
    
    
  
  
  

    
    Submit
    
  

  
  

ví dụ 2

Phương thức createElement() tạo Nút phần tử với tên được chỉ định như nút, canvas, v.v.

function base64Img(img) {
   
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');   
   canvas.width = img.width;
   canvas.height = img.height;   
   ctx.drawImage(img, 0, 0);
   return canvas.toDataURL('image/jpeg');
}const img = document.querySelector('#image');
img.addEventListener('load', function (event) {
   const dataUrl = base64Img(event.currentTarget);
   alert(dataUrl);
});

Bạn cũng có thể thích

• đọc thêm. Ví dụ về bảng chữ ký của Laravel
• đọc thêm. Hướng dẫn tải lên hình ảnh Dropzone trong Laravel 6/7
• đọc thêm. Cách lấy giá trị danh sách hộp kiểm đã chọn trong Jquery
• đọc thêm. Cách tích hợp Cổng thanh toán Razorpay trong Laravel

Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi

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 thẻ HTML

  
    
    
  
  
  

    
    Submit
    
  

  
  

0 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

  
    
    
  
  
  

    
    Submit
    
  

  
  

1 để 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

  
    
    
  
  
  

    
    Submit
    
  

  
  

2

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

  
    
    
  
  
  

    
    Submit
    
  

  
  

3. Đố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

  
    
    
  
  
  

    
    Submit
    
  

  
  

4 bằng mã trên

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

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

  
    
    
  
  
  

    
    Submit
    
  

  
  

3, 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

  
    
    
  
  
  

    
    Submit
    
  

  
  

3. 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 hình ảnh thành chuỗi base64 trong JavaScript?

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

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

Làm cách nào để chuyển đổi png thành base64?