html5相册,html5电子相册

html5 如何调用手机相册

需要加载cordova.js

创新互联从2013年创立，先为沙河口等服务建站，沙河口等地企业，进行企业商务咨询服务。为沙河口企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

方法：

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

});

}

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

});

}

html5怎样调用手机摄像头或者相册

h2 class="title-detail"  

图片描述  

/h2  

input type="hidden" id="picIndex" value="0"  

div id='image-list' class="row image-list"  

!-- input id="upload_image" type="file" name="image" accept="image/*" / --  

div class="image-item space" onclick="showActionSheet()"  

div class="image-up"/div  

/div  

/div

function showPics(url,name){          

//根据路径读取到文件   

plus.io.resolveLocalFileSystemURL(url,function(entry){  

entry.file( function(file){  

var fileReader = new plus.io.FileReader();  

fileReader.readAsDataURL(file);  

span style="white-space:pre"   /span   fileReader.onloadend = function(e) {  

var picUrl = e.target.result.toString();  

var picIndex = $("#picIndex").val();  

var nowIndex = parseInt(picIndex)+1;  

$("#picIndex").val(nowIndex);  

var html = '';  

html += 'div class="image-item " id="item'+nowIndex+'"';  

html += 'div class="image-close" onclick="delPic('+nowIndex+')"X/div';  

html += 'divimg src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"//div';  

html += '/div';  

html += $("#image-list").html();  

$("#image-list").html(html);   

span style="white-space:pre"   /span}  

});  

});   

}  

//压缩图片    

function compressImage(url,filename){    

var name="_doc/upload/"+filename;  

plus.zip.compressImage({    

src:url,//src: (String 类型 )压缩转换原始图片的路径    

dst:name,//压缩转换目标图片的路径    

quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100    

overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件    

},    

function(zip) {  

//页面显示图片  

showPics(zip.target,name);  

},function(error) {    

plus.nativeUI.toast("压缩图片失败，请稍候再试");    

});    

}   

//调用手机摄像头并拍照  

function getImage() {    

var cmr = plus.camera.getCamera();    

cmr.captureImage(function(p) {    

plus.io.resolveLocalFileSystemURL(p, function(entry) {    

compressImage(entry.toLocalURL(),entry.name);    

}, function(e) {    

plus.nativeUI.toast("读取拍照文件错误：" + e.message);    

});    

}, function(e) {    

}, {    

filter: 'image'   

});    

}  

//从相册选择照片  

function galleryImgs() {    

plus.gallery.pick(function(e) {    

var name = e.substr(e.lastIndexOf('/') + 1);  

compressImage(e,name);  

}, function(e) {    

}, {    

filter: "image"    

});    

}  

//点击事件，弹出选择摄像头和相册的选项  

function showActionSheet() {    

var bts = [{    

title: "拍照"    

}, {    

title: "从相册选择"    

}];    

plus.nativeUI.actionSheet({    

cancel: "取消",    

buttons: bts    

},    

function(e) {    

if (e.index == 1) {    

getImage();    

} else if (e.index == 2) {    

galleryImgs();    

}    

}    

);    

}

首先是html代码，很简单，就是给一个添加按钮，点击触发事件

其次方法共分为5个方法 看第二段JS代码

html5或者JS怎样调用手机摄像头或者相册？

你给的网页用的是 input accept="image/*" type="file"，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。