Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2019, 16:38
Новичок на форуме
Отправить личное сообщение для undersatanae666 Посмотреть профиль Найти все сообщения от undersatanae666
 
Регистрация: 14.11.2019
Сообщений: 4

Вернуть base64 изображения в цикле
Есть такой код:
var DataURL = "";
			function toDataURL(url) {
			  var xhr = new XMLHttpRequest();
			  xhr.open('GET', url);
			  xhr.responseType = 'blob';
			  xhr.send();
			  xhr.onload = function() {
				var reader = new FileReader();
				reader.readAsDataURL(xhr.response);
				reader.onloadend = function() {
					DataURL = DataURL + reader.result + ";";
				}
			  };
			}
			
			for (var i in result) {			//в массиве result ссылки на изображения
				toDataURL(result[i]);
			}	
			console.log(DataURL);

Он не работает, потому что console.log срабатывает раньше, чем заполняется переменная DataURL.
Как переписать функцию toDataURL() чтобы она стала синхронной?
Ответить с цитированием
  #2 (permalink)  
Старый 19.11.2019, 08:48
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 74

Сообщение от undersatanae666 Посмотреть сообщение
Есть такой код:
var DataURL = "";
			function toDataURL(url) {
			  var xhr = new XMLHttpRequest();
			  xhr.open('GET', url);
			  xhr.responseType = 'blob';
			  xhr.send();
			  xhr.onload = function() {
				var reader = new FileReader();
				reader.readAsDataURL(xhr.response);
				reader.onloadend = function() {
					DataURL = DataURL + reader.result + ";";
				}
			  };
			}
			
			for (var i in result) {			//в массиве result ссылки на изображения
				toDataURL(result[i]);
			}	
			console.log(DataURL);

Он не работает, потому что console.log срабатывает раньше, чем заполняется переменная DataURL.
Как переписать функцию toDataURL() чтобы она стала синхронной?
У вас не только консоль ничего не "отдаст", но и счетчик для заполнения массива ссылками на изображения ничего не заполнит.
Меняем функцию запроса добавив callback
function toDataURL(url, callback) {
			  var xhr = new XMLHttpRequest();
			  xhr.open('GET', url);
			  xhr.responseType = 'blob';
			  xhr.send();
			  xhr.onload = function() {
				var reader = new FileReader();
				reader.readAsDataURL(xhr.response);
				reader.onload = function() {
					DataURL = DataURL + reader.result + ";";
                                        callback(DataURL); // вызов после всех манипуляций
				}
                                
			  };
			}
toDataUrl("ваш урл!", function(youcallback){
 console.log(youcallback); // вывод результата после обработки
}


Так же и заполнение массива ссылками нужно по коллбэку вызывать.

код не проверял, требуется отладка, по памяти писал. Указал лишь направление.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript) nightofpromises Элементы интерфейса 1 16.03.2019 09:54
Не работает загрузка изображения fenix_63 Node.JS 1 04.08.2016 15:03
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 18:06
Расчет реальных размеров изображения в галерее Vision Элементы интерфейса 7 10.07.2012 21:56
Проверка размера изображения Bizarre Общие вопросы Javascript 4 09.03.2011 18:02