HTML5 device access device access detailed explanation

Reference address

Mainly using input type=file, accept=image/* for processing

Image preview methods (two types)

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

Reference address

1. touchstart
2. touchen
3. touchcancel is triggered by more advanced events such as phone access or pop-up information, and is generally a save operation.
4. touchmove
5. geolocation

Reference address

Note that Google Chrome requires https to provide location services.

 if (navigator.geolocation){ navigator.geolocation.getCurrentPosition((position) => { this.geolocation = `latitude:${position.coords.latitude},longitude:${position.coords.longitude}` }, (err ) => { console.log(err); }, { enableHighAccuracy: true, maximumAge : 30000, // buffer memory timre timeout : 27000 // waiting time }) } else { alert('geolocation not supported!') }

Reference address

 window.addEventListener('deviceorientation',(doe) => { this.absolute = doe.absolute //false means that the orientation data is provided by the device's own coordinate system this.alpha = doe.alpha //around the Z axis 0-360 when entering The horizontal direction of the mobile phone is 0 or 360 this.beta = doe.beta // Around the X axis -180~180 describes the rotation from front to back this.gamma = doe.gamma // Description of rotation from left to right around the Y axis -90~90}, true) // chrome v65 only supports accelerationIncludingGravity and interval (it should not be found due to some restrictions), and the latest versions of other browsers basically support window. addEventListener('devicemotion', (dme) => { this.acceleration = dme.acceleration this.accelerationIncludingGravity = dme.accelerationIncludingGravity this.rotationRate = dme.rotationRate this.interval = dme.interval }, false)

Reference address

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

 // Simple example, lock the mouse inside the pointer-lock-element element let = document.getElementById(pointer-lock-element); document.addEventListener(mousemove, function(e) { var movementX = e.movementX movementY = e. movementY //Print the incremental value of mouse movement console.log(X= + movementX, Y= + movementY); }, false); function lockPointer() { elem = document.getElementById(pointer-lock-element); elem.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; elem.requestPointerLock(); }

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.