HTML5 device access 设备访问详解


Posted in HTML / CSS onMay 24, 2018

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 (触屏事件)

参考地址

  1. touchstart
  2. touchen
  3. touchcancel 电话的接入或者弹出信息等比较高级的事件触发,一般做保存操作
  4. touchmove
  5. 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(鼠标锁定)

参考地址 

<button onclick="lockPointer();">锁住它!</button>
    <div id="pointer-lock-element" style="width:500px;height:500px;background-color: red"></div>
// 简单示例,将鼠标锁定在 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();
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 #HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 #HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 #HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 #HTML / CSS
使用Canvas操作像素的方法
Jun 14 #HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 #HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 #HTML / CSS
You might like
php生成短网址示例
2014/05/05 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
Vue程序调试的方法
2019/06/17 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
django 消息框架 message使用详解
2019/07/22 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python内存映射文件读写方式
2020/04/24 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python接口测试文件上传实例解析
2020/05/22 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
护士见习期自我鉴定
2014/02/08 职场文书
会计专业导师推荐信
2014/03/08 职场文书
小学安全工作总结2015
2015/05/18 职场文书
关于幸福的感言
2015/08/03 职场文书
关于python类SortedList详解
2021/09/04 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python