camera api (含图片预览)
主要为利用input type=file, 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(file);
touch events (触屏事件)
touchstart
touchen
touchcancel 电话的接入或者弹出信息等比较高级的事件触发,一般做保存操作
touchmove
geolocation
注意谷歌浏览器要https才能提供定位服务
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!')
}
device orientation and motion
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 只支持accelerationincludinggravity和interval(应该因为一些限制没有找到),其它浏览器最新版基本都支持
window.addeventlistener('devicemotion', (dme) => {
this.acceleration = dme.acceleration
this.accelerationincludinggravity = dme.accelerationincludinggravity
this.rotationrate = dme.rotationrate
this.interval = dme.interval
}, false)
pointer lock(鼠标锁定)
锁住它!
// 简单示例,将鼠标锁定在 pointer-lock-element 元素内
let = document.getelementbyid("pointer-lock-element");
document.addeventlistener("mousemove", function(e) {
var movementx = e.movementx
movementy = e.movementy
// 打印鼠标移动的增量值。
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();
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。