Доступ к устройству HTML5 Подробное объяснение доступа к устройству

Справочный адрес

В основном используется тип ввода=файл, Accept=image/* для обработки.

Методы предварительного просмотра изображения (два типа)

 const file = e.target.files[0]//Метод 1 const url1 = window.URL.createObjectURL(file);let url2 //Метод 2 const reader = new FileReader();reader.onload = (e) => { url2 = e.target.result;};reader.readAsDataURL(файл);

Справочный адрес

1. сенсорный старт
2. прикасаться
3. TouchCancel активируется более сложными событиями, такими как доступ к телефону или всплывающая информация, и обычно представляет собой операцию сохранения.
4. сенсорное перемещение
5. геолокация

Справочный адрес

Обратите внимание, что Google Chrome требует https для предоставления услуг определения местоположения.

 if (navigator.geolocation){ navigator.geolocation.getCurrentPosition((position) => { this.geolocation = `latitude:${position.coords.latitude},longitude:${position.coords.longitude}` }, (ошибка ) => { console.log(err); { EnableHighAccuracy: true, MaximumAge: 30000, // буферная память timeout : 27000 // время ожидания }) } else { alert('геолокация не поддерживается!') }

Справочный адрес

 window.addEventListener('deviceorientation',(doe) => { this.absolute = doe.absolute //false означает, что данные ориентации предоставляются собственной системой координат устройства this.alpha = doe.alpha // вокруг оси Z 0-360 при вводе Горизонтальное направление мобильного телефона равно 0 или 360 this.beta = doe.beta // Вокруг оси X -180~180 описывает вращение спереди назад this.gamma = doe.gamma // Описание вращения слева направо вокруг оси Y -90~90}, true) // chrome v65 поддерживает только ускорение, включая гравитацию и интервал (не должно быть найдено из-за некоторых ограничений), а также последние версии других браузеры в основном поддерживают window. addEventListener('devicemotion', (dme) => { this.acceleration = dme.acceleration this.accelerationIncludeGravity = dme.accelerationIncludeGravity this.rotationRate = dme.rotationRate this.interval = dme.interval }, false)

Справочный адрес

 <button onclick=lockPointer();>Заблокируйте!</button> <div id=pointer-lock-element style=width:500px;height:500px;background-color: red></div>

 // Простой пример: заблокируйте мышь внутри элемента указателя-блокировки let = document.getElementById(pointer-lock-element); document.addEventListener(mousemove, function(e) { var motionX = e.movementX motionY = e. motionY //Распечатываем приращение значения перемещения мыши console.log(X= + motionX, Y= + motionY }, false function lockPointer() {); elem = document.getElementById(pointer-lock-element); elem.requestPointerLock || elem.mozRequestPointerLock || elem.requestPointerLock;

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.