判断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>
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐