Acceso al dispositivo HTML5 Acceso al dispositivo Explicación detallada

Dirección de referencia

Utilizando principalmente tipo de entrada=archivo, aceptar=imagen/* para procesar

Métodos de vista previa de imágenes (dos tipos)

 const file = e.target.files[0]//Método 1 const url1 = window.URL.createObjectURL(file);let url2//Método 2 const lector = new FileReader();reader.onload = (e) => { url2 = e.target.result;};reader.readAsDataURL(archivo);

Dirección de referencia

1. inicio táctil
2. tocar
3. touchcancel se activa mediante eventos más avanzados, como el acceso al teléfono o información emergente, y generalmente es una operación de guardado.
4. toque-movimiento
5. geolocalización

Dirección de referencia

Tenga en cuenta que Google Chrome requiere https para proporcionar servicios de ubicación.

 if (navigator.geolocation){ navigator.geolocation.getCurrentPosition((position) => { this.geolocation = `latitud:${position.coords.latitude},longitude:${position.coords.longitude}` }, (err ) => { console.log(err }, { enableHighAccuracy: verdadero, edad máxima: 30000, // memoria intermedia tiempo de espera de tiempo: 27000 // tiempo de espera }) } else { alerta('¡geolocalización no compatible!') }

Dirección de referencia

 window.addEventListener('deviceorientation',(doe) => { this.absolute = doe.absolute //false significa que los datos de orientación los proporciona el propio sistema de coordenadas del dispositivo this.alpha = doe.alpha // alrededor del eje Z 0-360 al ingresar La dirección horizontal del teléfono móvil es 0 o 360 this.beta = doe.beta // Alrededor del eje X -180 ~ 180 describe la rotación de adelante hacia atrás this.gamma = doe.gamma // Descripción de la rotación de izquierda a derecha alrededor del eje Y -90~90}, verdadero) // Chrome v65 solo admite aceleración, incluida gravedad e intervalo (no se debe encontrar debido a algunas restricciones), y las últimas versiones de otros los navegadores básicamente admiten window. addEventListener('devicemotion', (dme) => { this.acceleration = dme.acceleration this.accelerationIncludeGravity = dme.accelerationIncludeGravity this.rotationRate = dme.rotationRate this.interval = dme.interval }, falso)

Dirección de referencia

 <button onclick=lockPointer();>¡Ciérralo!</button> <div id=pointer-lock-element style=width:500px;height:500px;background-color: red></div>

 // Ejemplo simple, bloquear el mouse dentro del elemento elemento de bloqueo del puntero let = document.getElementById(elemento-bloqueo del puntero); document.addEventListener(mousemove, function(e) { var movimientoX = e.movementX movimientoY = e. movimientoY //Imprime el valor incremental del movimiento del mouse console.log(X= + movimientoX, Y= + movimientoY }, function lockPointer() {); elem = document.getElementById(elemento-bloqueo de puntero); elem.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock ||

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.