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

Tôi cần chuyển đổi hình ảnh của mình thành chuỗi Base64 để có thể gửi hình ảnh của mình đến máy chủ.

Có tệp JavaScript nào cho việc này không? Khác, làm thế nào tôi có thể chuyển đổi nó?

Bạn có thể sử dụng HTML5 <canvas>cho nó:

Tạo một khung vẽ, tải hình ảnh của bạn vào đó và sau đó sử dụng toDataURL()để có được đại diện Base64 (thực ra, đó là một data:URL, nhưng nó chứa hình ảnh được mã hóa Base64).

Có nhiều cách tiếp cận bạn có thể chọn:

1. Cách tiếp cận: FileReader

Tải hình ảnh dưới dạng blob thông qua XMLHttpRequest và sử dụng API FileReader để chuyển đổi nó thành dataURL :

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

Ví dụ mã này cũng có thể được triển khai bằng API tìm nạp WHATWG :

const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))


toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })

Những cách tiếp cận sau:

• thiếu hỗ trợ trình duyệt
• có nén tốt hơn
• cũng làm việc cho các loại tệp khác

Hỗ trợ trình duyệt:

• http://caniuse.com/#feat=filerhead
• http://caniuse.com/#feat=fetch

2. Cách tiếp cận: Canvas

Tải hình ảnh vào một đối tượng hình ảnh, vẽ nó vào một khung vẽ không bị biến đổi và chuyển đổi khung vẽ trở lại thành dataURL.

function toDataURL(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

toDataURL(
  'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
  function(dataUrl) {
    console.log('RESULT:', dataUrl)
  }
)

Chi tiết

Các định dạng đầu vào được hỗ trợ:

image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp,image/xxx

Các định dạng đầu ra được hỗ trợ:

image/png, image/jpeg, image/webp(Chrome)

Hỗ trợ trình duyệt:

• http://caniuse.com/#feat=canvas

• Internet Explorer 10 (Internet Explorer 10 chỉ hoạt động với cùng một hình ảnh gốc)

3. Cách tiếp cận: Hình ảnh từ hệ thống tệp cục bộ

Nếu bạn muốn chuyển đổi hình ảnh từ hệ thống tệp người dùng, bạn cần thực hiện một cách tiếp cận khác. Sử dụng API FileReader :

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}

<input type="file" onchange="encodeImageFileAsURL(this)" />

Đoạn mã này có thể chuyển đổi tệp chuỗi, hình ảnh và thậm chí tệp video của bạn thành dữ liệu chuỗi Base64.

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

Về cơ bản, nếu hình ảnh của bạn là

<img id='Img1' src='someurl'>

sau đó bạn có thể chuyển đổi nó như thế nào

var c = document.createElement('canvas');
var img = document.getElementById('Img1');
c.height = img.naturalHeight;
c.width = img.naturalWidth;
var ctx = c.getContext('2d');

ctx.drawImage(img, 0, 0, c.width, c.height);
var base64String = c.toDataURL();

Đây là những gì tôi đã làm:

// Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

Và đây là cách bạn sử dụng nó

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})

Tôi thấy rằng cách an toàn và đáng tin cậy nhất để làm điều đó là sử dụng FileReader().

Bản trình diễn: Hình ảnh cho Base64

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <input id="myinput" type="file" onchange="encode();" />
    <div id="dummy">
    </div>
    <div>
      <textarea style="width:100%;height:500px;" id="txt">
      </textarea>
    </div>
    <script>
      function encode() {
        var selectedfile = document.getElementById("myinput").files;
        if (selectedfile.length > 0) {
          var imageFile = selectedfile[0];
          var fileReader = new FileReader();
          fileReader.onload = function(fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result;
            var newImage = document.createElement('img');
            newImage.src = srcData;
            document.getElementById("dummy").innerHTML = newImage.outerHTML;
            document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
          }
          fileReader.readAsDataURL(imageFile);
        }
      }
    </script>
  </body>
</html>

Nếu bạn có một đối tượng tập tin, chức năng đơn giản này sẽ hoạt động:

function getBase64 (file, callback) {

    const reader = new FileReader();

    reader.addEventListener('load', () => callback(reader.result));

    reader.readAsDataURL(file);
}

Ví dụ sử dụng:

getBase64(fileObjectFromInput, function(base64Data){
    console.log("Base64 of file is", base64Data); // Here you can have your code which uses Base64 for its operation, // file to Base64 by oneshubh
});

Bạn có thể sử dụng FileAPI , nhưng nó không được hỗ trợ nhiều.

Theo như tôi biết, một hình ảnh có thể được chuyển đổi thành chuỗi Base64 bằng FileReader () hoặc lưu trữ nó trong phần tử canvas và sau đó sử dụng toDataURL () để lấy hình ảnh. Tôi đã có loại vấn đề tương tự bạn có thể tham khảo điều này.

Chuyển đổi một hình ảnh sang canvas đã được tải

Hãy thử mã này:

Đối với một sự kiện thay đổi tải lên tập tin, gọi chức năng này:

$("#fileproof").on('change', function () {
    readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;

    if (files && files[0]) {
        var fr = new FileReader();
        fr.onload = function (e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL(files[0]);
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

Lưu trữ dữ liệu Base64 trong ẩn nộp để sử dụng.

uploadProfile(e) {

    let file = e.target.files[0];
    let reader = new FileReader();

    reader.onloadend = function() {
        console.log('RESULT', reader.result)
    }
    reader.readAsDataURL(file);
}

Chà, nếu bạn đang sử dụng Dojo Toolkit , nó cho chúng ta một cách trực tiếp để mã hóa hoặc giải mã thành Base64.

Thử cái này:

Để mã hóa một mảng byte bằng cách sử dụng dojox.encoding.base64:

var str = dojox.encoding.base64.encode(myByteArray);

Để giải mã một chuỗi được mã hóa Base64:

var bytes = dojox.encoding.base64.decode(str);