H5+API调用手机系统相机,实现拍照并上传到阿里云OSS
判断Runtime是否支持5+ API// 判断runtime是否支持5+ APIif(navigator.userAgent.indexOf("Html5Plus")!=-1){// 支持5+ APIalert("支持5+ API");}else{// 不支持5+ APIalert("不支持5+ API");}H5+API调用手机系统相机,实现拍照<template><div
·
判断Runtime是否支持5+ API
// 判断runtime是否支持5+ API
if(navigator.userAgent.indexOf("Html5Plus")!=-1){
// 支持5+ API
alert("支持5+ API");
}else{
// 不支持5+ API
alert("不支持5+ API");
}
H5+API调用手机系统相机,实现拍照并上传到阿里云OSS
<template>
<br />
<br />
<br />
<br />
<img :src="select_img" width="100%">
<br />
【注意】安卓系统,5+app环境中,是无法识别input标签capture="camera"的,想实现5+app环境中直接打开相机拍照,只能通过5+api的plus.camera.getCamera().captureImage来实现。
<br />
【H5+】<button @click="captureImage">H5+拍照</button>
<br />
<br />
【H5/微信小程序】拍照:<input capture="camera" id="camera_id" type="file" accept="image/*" />
<br />
<br />
【注意】安卓系统,h5环境中,实现拍照&选择,input必须同时加上capture="camera" 和multiple。
<br />
【安卓系统,H5/微信小程序】拍照&&相册<input capture="camera" id="photo_id" type="file" accept="image/*" multiple />
<br />
【注意】苹果系统,h5环境中,实现拍照&选择,input必须加上multiple,一定不能加capture="camera" ,如果加了会直接调用相机拍照,无法选择图片。
<br />
【苹果系统,H5/微信小程序】拍照&&相册<input id="photo_id" type="file" accept="image/*" multiple />
</template>
<script>
module.exports = {
data() {
return {
select_img: "http://img95.699pic.com/photo/50047/4567.jpg_wh300.jpg"
};
},
methods: {
// 5+api拍照并上传到阿里云OSS
captureImage() {
var that = this;
// 5+api拍照
plus.camera.getCamera().captureImage((p) => {
// 读取系统本地文件
plus.io.resolveLocalFileSystemURL(p, (entry) => {
plus.nativeUI.toast("正在上传照片...");
let client = new OSS.Wrapper({
region: '',
accessKeyId: '',
accessKeySecret: '',
bucket: ''
});
let filename = entry.name;
let suffix = filename.substr(filename.lastIndexOf('.'));
let sufname = '123456789' + suffix;
let storeAs = 'upload/image/' + sufname;
entry.file(function(file) {
var fileReader = new plus.io.FileReader();
// 本地文件转base64
fileReader.readAsDataURL(file);
fileReader.onloadend = function(e) {
//获取文件base64
let base64URL = e.target.result.toString();
// 显示图片
that.select_img = base64URL;
// base64转文件对象
var fileObj = that.dataURLtoFile(base64URL, sufname)
// 上传到阿里云OSS
var s = client.multipartUpload(storeAs, fileObj).then(
result => {
console.log(result.name);
alert("result.name:" + JSON.stringify(result))
plus.nativeUI.closeWaiting();
})
.catch(function(err) {
console.log(JSON.stringify(err));
alert("err:" + JSON.stringify(err))
plus.nativeUI.closeWaiting();
});
}
});
}, function(e) {
plus.nativeUI.closeWaiting();
});
});
},
// 将base64转换为文件
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
},
},
created() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = '/res/js/aliyun-oss-sdk-4.4.4.min.js';
document.body.appendChild(s);
}
};
</script>
<style lang="less" scoped>
span {
display: inline-block;
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)