Почему глючат картинки в мобильном браузере?
на сайте пользователь загружает фотки в формате 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 |
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(картинка) } } |
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(картинка) } }
Дополнительно:
происходит ошибка
но понять и отловить ее пока не могу
так может её и нет? тем более мы её не видим.
var создать_картинку ...
Надеюсь в реальном проекте нет кириллицы в синтаксисе JS? А то я напрягся. Везде придется следить чтобы у тега script не терялся атрибут charset. И как раз за все браузеры не ручаюсь, что где-то не отвалится синтаксис на кириллице (особенно, если какой-нибудь режим strict у JS включить).
можно хоть иероглифы писать
Он либо сам дорастёт( а может и уже дорос и перерос:) ) до понимания, что кириллице и snake_case в js коде не место, а египетские скобки и точки с запятой - наоборот обязательны, либо это уже не будет иметь значения.
мне наплевать на любые профессиональные законы
но мне наплевать ))
Есть подозрение, что вот это вот создаёт вечный цикл:
картинка.src = e.target.result картинка.onloadend = function() { var width = картинка.naturalWidth var height = картинка.naturalHeight var соотношение = width/height картинка.src = создать_картинку(картинка, 1000, 1000/соотношение) } |
картинка.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
и т.д.
- спс
исправил таккартинка.onloadend = function() { var width = картинка.naturalWidth var height = картинка.naturalHeight var соотношение = width/height картинка.onloadend = null картинка.src = создать_картинку(картинка, 1000, 1000/соотношение) }
картинка.onloadend = function() { var width = картинка.naturalWidth var height = картинка.naturalHeight var соотношение = width/height картинка.onloadend = null картинка.src = создать_картинку(картинка, 1000, 1000/соотношение) }
- вторую ошибку описал в ответе на вопрос
оказалось что картинки загружаемые из галереи смартфона не вызывают событие onloadend
сделал через таймаут и вроде заработало
- Странно, но тогда есть два более разумных решения, которые можно попробовать, чем таймер:
1. Заменить onloadend на классический onload.
2. Поменять местами картинка.src = и картинка.onload = - возможно событие отрабатывает прямо при присваивании, т.к. ничего грузить не надо(хотя и те должно бы).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с глючащими картинками в мобильном браузере может иметь несколько причин. Ниже перечислены некоторые из наиболее распространенных причин и способы их решения:
1. **Неоптимизированные изображения**: Если размер изображений слишком большой, они могут загружаться медленно или отображаться некорректно на мобильных устройствах. Рекомендуется оптимизировать изображения перед загрузкой на сайт, используя сжатие и оптимизацию формата.
2. **Неверно указанные размеры**: Указание фиксированных размеров для изображений может привести к их неправильному отображению на разных устройствах. Рекомендуется использовать относительные размеры (например, %) или адаптивный дизайн для корректного отображения изображений на разных экранах.
3. **Отсутствие атрибута srcset**: Атрибут srcset позволяет браузеру выбирать наиболее подходящее изображение в зависимости от разрешения экрана устройства. Убедитесь, что используете этот атрибут для поддержки адаптивных изображений.
4. **Проблемы с кэшированием**: Если изображения не кэшируются на мобильных устройствах, это также может привести к их неправильному отображению. Убедитесь, что настройки кэширования на сервере правильно настроены.
5. **Проблемы с подключением**: Медленное или нестабильное соединение с интернетом на мобильном устройстве может быть причиной проблем с загрузкой изображений. В этом случае рекомендуется оптимизировать загрузку изображений или использовать CDN для улучшения скорости загрузки.
Использование вышеуказанных рекомендаций может помочь вам решить проблему с глючащими картинками в мобильном браузере. Пожалуйста, опишите более подробно, какие именно проблемы возникают у вас, чтобы мы могли предложить более конкретные решения.