Languages
[Edit]
PL

JavaScript - konwersja blob na base64

0 points
Created by:
Dirask Community
5610

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

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:

               | <--- 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:

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:

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

2. Przykład z samym Base64

W tej sekcji przedstawione rozwi─ůzanie pobiera tylko┬ádane┬ábase64┬áze wskazanego obiektu┬áblob lub pliku┬á.

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:

iVBORw0KGgoAAAANSUhEUgAAAb8AAAGSCAYAAABzIc+aAAAgA...
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join