正文
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移动端调用手机相册和相机
需要加载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
});
}
Q2: 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代码
Q3: html5或者JS怎样调用手机摄像头或者相册？
你给的网页用的是 input accept="image/*" type="file"，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。
