html5相机,Html5技术

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html5移动端调用手机相册和相机

需要加载cordova.js

方法：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

pictureSource = navigator.camera.PictureSourceType;

destinationType = navigator.camera.DestinationType;

}

//相册

function fromCamera()

{

var source = pictureSource.PHOTOLIBRARY;

navigator.camera.getPicture(function (imageData) {

setimg(imageData);

}, function (message) {

if (source == pictureSource.CAMERA)

alert('加载照相机出错!' + message);

else

alert('加载相册出错!' + message);

}, {

quality: 50,

destinationType: destinationType.FILE_URI,

sourceType: source

});

}

//拍照

function EditImgPz()

{

navigator.camera.getPicture(function (imageData) {

setimg(imageData);

}, function (message) {

alert(message);

}, {

quality: 50,

destinationType: navigator.camera.DestinationType.FILE_URI,

sourceType: Camera.PictureSourceType.CAMERA,

allowEdit: true,

encodingType: Camera.EncodingType.JPEG,

popoverOptions: CameraPopoverOptions,

saveToPhotoAlbum: true

});

}

相关问答

Q1: HTML5都有哪些新特性呢？

HTML5新特性如下：

1、脱机缓存。您可以在关闭浏览器并再次打开时还原数据，以减少网络流量。

2、音频和视频可以自由嵌入，多媒体形式更加灵活。

3、地理位置。地理位置定位使得定位导航不再是专属导航软件，地图也不需要下载很大的地图包。它可以通过缓存、去哪里、去哪里以及更灵活的方式来解决。

4、画布绘制提高了移动平台的绘制能力。canvas API可以用来绘制一个简单的热点地图来收集用户体验数据，并支持对图像的移动、旋转、缩放等常规编辑。

5、丰富的互动方式。提高交互能力：拖动、撤消历史操作、文本选择等。

6、与原生app相比，开发维护成本低。降低开发和维护成本；？使页面更小，减少用户不必要的开销；性能更好，功耗更低。

7、CSS3视觉设计师的辅助利器支持。CSS3支持字体嵌入、布局和最令人印象深刻的动画功能。

8、HTML5调用相机、相册和通讯录的功能。

扩展资料：

2014年10月29日，万维网联盟宣布，HTML第五次重大修订，经过近8年的努力，标准规范终于完成。HTML5旨在支持移动设备上的多媒体。引入了新的语法特性来支持这一点，如视频、音频和画布标记。HTML5还引入了一些新功能，这些功能可以真正改变用户与文档交互的方式，包括增强灵活性的新解析规则、新属性、过时或冗余属性等。

Q2: 在html5中使用navigator.getUserMedia打开相机，要怎样进行关闭？

在浏览器中打开摄像头，使用它navigator.getUserMedia根据不同浏览器获取摄像头对象，这时候需要授权打开摄像头//获取摄像头对象

“navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;navigator.getUserMedia({video:true,audio: true},gotStream,noStream);//”打开摄像头。

打开摄像头，并将摄像头实时流输出到浏览器中

!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/title

/headbody

video id="video" width="1024" height="800" autoplay/video

button id="snap"截图/button

canvas id="canvas" width="1024" height="800"/canvas

script type="text/javascript"

var video = document.getElementById("video");

var canvas=document.getElementById("canvas");

var context=canvas.getContext('2d');

//获取摄像头对象

navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;