[Edit]

JavaScript - konwersja Blob na base64

1 contributors

2 contributions

0 discussions

0 points

Created by:

Palpys

764

W tym artykule chcielibyśmy pokazać, jak w JavaScript konwertować obiekt blob lub plik na adresy URL danych zakodowane przy użyciu Base64.

1. Przykład Base64 w adresie URL danych

Edit

W tej sekcji przedstawione rozwiązanie pobiera dane base64 umieszczone w adresie URL danych ze wskazanego obiektu blob lub pliku.

Przykładowy adres URL danych wygląda następująco:

xxxxxxxxxx
 
               | <--- metadane ---> | <--- część base64 ---------->|
               |                    |                              |
var dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...';

Gdzie ... są symboliczne, aby nie wyświetlać wszystkich długich wartości w tym przykładzie.

Wartość adresu URL danych może być używana z dowolnym kodem, który musi działać z jakimś linkiem do zasobu, np:

Możemy wyświetlić obraz:

var image = new Image(); image.src = dataUrl;

Uwaga: przeczytaj ten artykuł, aby zobaczyć praktyczny przykład do uruchomienia online.

Pełny przykład:

xxxxxxxxxx
 
function readDataURL(blob, callback) {
    if (window.FileReader) {
        var reader = new FileReader();
        reader.onload = function() {
            var dataUrl = reader.result;
            if (dataUrl == null) {
                callback(null, 'Data URL is not available.');
            } else {
                callback(dataUrl, null);
            }
        };
        reader.onerror = function() {
            callback(null, 'Incorrect blob or file object.');
        };
        reader.readAsDataURL(blob);
    } else {
        callback(null, 'File API is not supported.');
    }
}
​
// Usage example:
​
var blob = ...; // blob or file object with some picture
​
readDataURL(blob, function(dataUrl, error) {
    if (error) {
        console.log(error);
    } else {
        var image = document.querySelector('#my-image'); // <img id="my-image">
        image.src = dataUrl; // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...
    }
});

wartość dataUrl:

xxxxxxxxxx
 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8...

2. Przykład z samym Base64

Edit

W tej sekcji przedstawione rozwiązanie pobiera tylko dane base64 ze wskazanego obiektu blob lub pliku .

xxxxxxxxxx
 
function extractBase64(dataUrl) {
    var index = dataUrl.indexOf('base64,');
    if (index == -1) {
        return null;
    }
    return dataUrl.substring(index + 7);
}
​
function readBase64(blob, callback) {
    if (window.FileReader) {
        var reader = new FileReader();
        reader.onload = function() {
            var dataUrl = reader.result;
            if (dataUrl != null) {
                var base64 = extractBase64(dataUrl);
                if (base64 != null) {
                    callback(base64, null);
                    return;
                }
            }
            callback(null, 'Base64 data is not available.');
        };
        reader.onerror = function() {
            callback(null, 'Incorrect blob or file object.');
        };
        reader.readAsDataURL(blob);
    } else {
        callback(null, 'File API is not supported.');
    }
}
​
// Usage example:
​
var blob = ...; // obiekt blob lub plik z jakimś obrazkiem
​
readBase64(blob, function(base64, error) {
    if (error) {
        console.log(error);
    } else {
        console.log(base64); // iVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA...
    }
});

Przykładowe dane wyjściowe:

xxxxxxxxxx
 
iVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA...

Alternative titles

JavaScript - konwertowanie Blob na base64

Show discussions ...

JavaScript - konwersja Blob na base64

1. Przykład Base64 w adresie URL danych

2. Przykład z samym Base64

Alternative titles

Native Advertising

🚀

Dirask - we help you to

solve coding problems.

Ask question.

❤️💻 🙂