Làm thế nào để bạn đặt một tệp hình ảnh trong một đối tượng json?

Tôi có thể nghĩ đến việc làm điều đó theo hai cách:

1.

Lưu trữ tệp trong hệ thống tệp trong bất kỳ thư mục nào (giả sử dir1 ) và đổi tên nó để đảm bảo rằng tên là duy nhất cho mọi tệp (có thể là dấu thời gian) (giả sử xyz123.jpg ), và sau đó lưu trữ tên này trong một số DataBase. Sau đó, trong khi tạo JSON, bạn kéo tên tệp này và tạo một URL hoàn chỉnh (sẽ là http://example.com/dir1/xyz123.png ) và chèn nó vào JSON.

2.

Mã hóa cơ sở 64, Về cơ bản, nó là một cách mã hóa dữ liệu nhị phân tùy ý trong văn bản ASCII. Nó có 4 ký tự trên 3 byte dữ liệu, cộng với một chút khoảng đệm ở cuối. Về cơ bản, mỗi 6 bit của đầu vào được mã hóa trong một bảng chữ cái 64 ký tự. Bảng chữ cái "tiêu chuẩn" sử dụng A-Z, a-z, 0-9 và + và /, với =làm ký tự đệm. Có các biến thể URL an toàn. Vì vậy, cách tiếp cận này sẽ cho phép bạn đưa hình ảnh của mình trực tiếp vào MongoDB, trong khi lưu trữ nó Mã hóa hình ảnh và giải mã trong khi tìm nạp, nó có một số nhược điểm riêng:

• mã hóa base64 làm cho kích thước tệp lớn hơn khoảng 33% so với các biểu diễn nhị phân ban đầu của chúng, có nghĩa là có nhiều dữ liệu hơn (điều này có thể đặc biệt khó khăn trên các mạng di động)
• URI dữ liệu không được hỗ trợ trên IE6 hoặc IE7.
• dữ liệu được mã hóa base64 có thể mất nhiều thời gian hơn để xử lý so với dữ liệu nhị phân.

Nguồn

Chuyển đổi hình ảnh sang URI DỮ LIỆU

A.) Canvas

Tải hình ảnh vào Image-Object, tô nó vào canvas và chuyển canvas trở lại dataURL.

function convertToDataURLviaCanvas(url, 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.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

Cách sử dụng

convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

Đị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

B.) FileReader

Tải hình ảnh dưới dạng blob qua XMLHttpRequest và sử dụng API FileReader để chuyển đổi nó thành URL dữ liệu.

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

Cách tiếp cận này

• thiếu hỗ trợ trình duyệt
• có khả năng nén tốt hơn
• cũng hoạt động với các loại tệp khác.

Cách sử dụng

convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

Nguồn