前端项目用hbuilder打包成APP后，调用api开启摄像头进行拍照, 5+app框架

这几个方法function是js通用的, 非vue项目也可以使用! 记得收藏哦!

重点是从 按钮"开启相机" 开始,点击触发photo方法

可以直接看method中的photo方法, 该方法可以单独复制出去使用

<template>
	<div id="listBox">
		<div class="head">
			<span class="title2">公共服务</span>
		</div>
		<div class="body">
			<div class="msgBox">
				<el-col :span="8" v-for="(item,index) in objArr" :key="index">
					<div class="grid-content bg-purple" @click="toFile(item.DIR_ID,item.DIR_NAME)">
						<img :src="item.ICON_URL" :alt="item.DIR_NAME" class="item_img" />
					</div>{{item.DIR_NAME}}
				</el-col>
			</div>
		</div>

		<div style="height: 200px;">
			<van-button type="primary"  @click="photo()">开启相机</van-button>
			<br>
			<img v-for="(item,index) in fileList" :src="item" :alt="item" style="width: 50px;height: 50px" @click="myImagePreview(item)"/>
		</div>
	</div>
</template>
<script>
	import { ImagePreview } from 'vant'
	import qs from 'qs'
	export default {
		name: "list",
		data() {
			return {
				fileList: [],
				androidAttrs: null,
				itWidth: null,
				objArr: []
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			photo() {
			    /*重点 : 调用api开启系统相机*/
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				cmr.captureImage(path => {
						plus.gallery.save(path, params => {
							this.compressImg(params.file);  //调用api对拍摄的图片进行压缩, 不需要可以不压缩
						})
					},
					error => {}, {
						resolution: res,
						format: fmt
					}
				);
			},
			compressImg(path) {
				/*1MB以下的不压缩*/
				let _this = this;
				let img = {};
				// img.index = this.$getUUID();
				img.oid = "";
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					entry.file(function(file) {
						if (file.size <= 1024000) {
							img.src = path;
							_this.fileList.push(img.src);
						} else {

							let newP = path.substr(0, path.lastIndexOf("/") + 1) + (new Date()).getTime() +
								path.substr(path.lastIndexOf("."), path.length);
			 			plus.zip.compressImage({
								src: path,
								dst: newP,
								overwrite: false,
								format: 'jpg',
								quality: 50
							}, event => {
								img.src = event.target;
								_this.fileList.push(img.src);
								console.log('文件信息',event.target)
							}, error => {});
						}
					})
				});

			},

			afterRead(file) {
				// 此时可以自行将文件上传至服务器
				console.log(file);
			},
			beforeRead(file) {
				console.log(file)
				return true
			},
			myImagePreview(src){
				ImagePreview([src]);
			},
			getList() {
				let that = this;
				this.$axios({
					method: 'post',
					url: '',
					data: qs.stringify({
						"Id": 123
					}),
				}).then(res => {
					if (res.data.state == 1) {
						that.objArr = res.data.data;
						console.log("获取一级目录", that.objArr)

						that.$nextTick(() => {
							let arr = document.getElementsByClassName('bg-purple');
							that.itWidth = arr[0].offsetWidth;
							for (let i = 0; i < arr.length; i++) {
								arr[i].style.height = that.itWidth + 'px';
							}
						})
					} else {
						that.$message.error(res.data.msg);
					}
				})
			},
			toFile(id, title) {
				this.$router.push({
					path: '/ceshi',
					query: {
						id,
						title
					}
				})
			},
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			}
		},
	};
</script>
<style scoped>
	@import url("./list.css");
</style>

如果有获取不到plus这个全局变量的情况
那么你应该在你项目的pubilc文件夹下找到index.html
加入以下代码: (该代码是为了防止用户不小心按到手机返回键退出应用, 也可以用于获取全局的puls变量)

		<script>
			document.addEventListener('plusready', function() {
				var webview = plus.webview.currentWebview();
				plus.key.addEventListener('backbutton', function() {
					webview.canBack(function(e) {
						if (e.canBack) {
							webview.back();
						} else {
							//webview.close(); //hide,quit
							//plus.runtime.quit();
							//首页返回键处理
							//处理逻辑：1秒内，连续两次按返回键，则退出应用；
							var first = null;
							plus.key.addEventListener('backbutton', function() {
								//首次按键，提示‘再按一次退出应用’
								if (!first) {
									first = new Date().getTime();
									console.log('再按一次退出应用');
									setTimeout(function() {
										first = null;
									}, 1000);
								} else {
									if (new Date().getTime() - first < 1500) {
										plus.runtime.quit();
									}
								}
							}, false);
						}
					})
				});
			});
		</script>