@tyxeo
дальний знакомый Мурыча

Почему глючат картинки в мобильном браузере?

на сайте пользователь загружает фотки в формате jpg через input
файлы читаются как DataURL
после этого происходит нормализация размера - через холст.toDataURL('image/jpeg', 0.5)
после этого данные улетают на сервер в виде innerHTML

на десктопе и в андроиде у меня всё прекрасно работает
но на некоторых смартфонах некоторые файлы не загружаются
происходит ошибка
но понять и отловить ее пока не могу

некоторые файлы передаются на сервер успешно
некоторые нет, и они небольшие, 3мб

подозреваю что возможно битые файлы или у них кодировка глючная

в htaccess написал:
php_value memory_limit 32M
php_value post_max_size 32M
php_value upload_max_filesize 32M


var создать_картинку = function(image, width, height)
	{
		var холст = document.createElement('canvas')
		холст.width = width
		холст.height = height
		холст.style.opacity = 0
		document.body.appendChild(холст)
		var контекст = холст.getContext('2d')
		контекст.drawImage(image, 0, 0, width, height)
		var DataURL = холст.toDataURL('image/jpeg', 0.5)
		холст.remove()
		return DataURL
	}

input.onchange = function()
    {
    	var массив_файлов = this.files

    	for (var i = 0; i < массив_файлов.length; i++) 
	        {
			    var file = массив_файлов[i]
			    var картинка = document.createElement('img')
			    картинка.className = 'фото_картинка'
			    картинка.onclick = онклик_картинки
			    
			    var reader = new FileReader()
			    reader.onload = (function(картинка) {
			      return function(e) {
			        картинка.src = e.target.result

			        картинка.onloadend = function()
						{
							var width = картинка.naturalWidth 
							var height = картинка.naturalHeight
							var соотношение = width/height

							картинка.src = создать_картинку(картинка, 1000, 1000/соотношение)
						}
			      }
			    })(картинка)
			    reader.readAsDataURL(file)
			    
			    фотки_товара.appendChild(картинка)
			}
    }
  • Вопрос задан
  • 130 просмотров
Решения вопроса 2
Aetae
@Aetae
Тлен
Есть подозрение, что вот это вот создаёт вечный цикл:
картинка.src = e.target.result

картинка.onloadend = function()
{
  var width = картинка.naturalWidth 
  var height = картинка.naturalHeight
  var соотношение = width/height

  картинка.src = создать_картинку(картинка, 1000, 1000/соотношение)
}

1. ставишь картинка.src
2. картинка загружается
3. срабатывает картинка.onloadend
4. ставишь картинка.src
5. картинка загружается
6. срабатывает картинка.onloadend
и т.д.
Ответ написан
@tyxeo Автор вопроса
дальний знакомый Мурыча
оказалось что картинки загружаемые из галереи смартфона не вызывают событие onloadend

сделал через таймаут и вроде заработало
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы