app拍照功能：vue+html5+

 1、页面样式，基本样式框架用的YDUI,样式简单，大家也可以自己写

<template>
    <div id="camera">
        <div class="relative margin-top30">
            <div>
                <div class="cameraText" style="float:left;width: 10%">照&nbsp;片</div>
                <div style="float:right;width: 90%">
                    <yd-grids-group :rows="4" item-height="60px">
                        <yd-grids-item v-for="(img,index) in imgs" :key="index" >
                            <div slot="else" style="text-align: center;position: relative;height: 60px">
                                <img :src="img.src" class="imgSize" @click="scAImg(img.src)">
                              
                            </div>
                        </yd-grids-item>
                        <yd-grids-item v-for="(img,index) in waitUpload" :key="index" >
                            <div slot="else" style="text-align: center;position: relative;height: 60px">
                                <img :src="img.src" class="imgSize" @click="scAImg(img.src)">
                                <img src="../assets/img/delete.png" class="delmg" @click="beforeDelImg(img.oid,img.index)">

                            </div>
                        </yd-grids-item>
                        <yd-grids-item >
                            <div slot="else" style="text-align: center;">
                                <img @click="cameraImgC" class="imgSize"  src="../assets/img/camera.png" style="height: 55px">
                            </div>
                        </yd-grids-item>
                    </yd-grids-group>
                </div>
            </div>

        </div>
        <yd-actionsheet :items="photoType" v-model="actionShow" cancel="取消"></yd-actionsheet>
        <yd-popup v-model="showScaImg" position="center" width="100%"  style="height: 100%">
            <!--    <img solt="top" src="../assets/img/scaDel.png"  class="scallImg" @click="showScaImg=false">-->
            <div  style="height: 34px;line-height:34px;width: 100%;z-index: 99;text-align: center;background: #9a8b8b;color: #dadada;"  @click="showScaImg=false">关闭</div>
            <div class="text-center" >
                <img :src="scallImg" style="width: 100%">

            </div>
        </yd-popup>
    </div>
</template>
<style>

    .scallImg{
        height: 30px;
        width: 30px;
        position: fixed;
        right: 0.05rem;
        top: 0.15rem;
        z-index: 99;
    }
    .margin-top30{
        margin-top: 0.3rem;
    }
    .imgSize{
        height: 45px;
        max-width: 97%;
    }
    .delmg{
        height: 18px;
        position: relative;
        top: -50px;
        left: 85%;
        display:block;
        z-index: 10;
    }
    .cameraText{
        font-size: 0.3rem;
        color: #b2a8a8;

    }
    .detailImgs{
        margin: 0 0.1rem;
    }
    #camera  .yd-popup-center.yd-popup-show {
        height: 100% !important;
    }
    #camera .yd-grids-4 .yd-grids-item:not(:nth-child(4n)):before {
        border-right: 0px !important;
    }
    #listDetail .yd-grids-4 .yd-grids-item:not(:nth-child(5n)):before{
        border-right: 0px;
    }
    #listDetail .yd-grids-4:before{
        border-bottom:0px;
    }
    
</style>

2、js ，该部分主要使用html5+ : camera，IO，uploader；,api地址：http://www.html5plus.org/doc/zh_cn/maps.html#，不是使用vue框架也可以使用，经测试使用安卓4.2.2（包含）以上版本都可以兼容

<script>
    export default {
        name: "Camera",
        props:['imgs','isAbleClick','folderID','ciId'],
        data() {
            return {
                actionShow:false,
                photoType:[
                    {
                        label: '拍照',
                        callback: () => {
                            this._openCamera()
                        }
                    },
                    {
                        label: '从相册中选取',
                        callback: () => {
                            this._selectPhoto()
                        }
                    }
                ],
                showScaImg:false,
                scallImg:"",
                addImgs:[],
                delImgs:[],
                waitUpload:[],

            }
        },
        methods:{
              /*按钮是否可点击*/
            cameraImgC(){
                if(this.isAbleClick){
                    this.actionShow=true;
                }else{
                    this.actionShow=false;
                }
            },
              /*打开照相机*/
            _openCamera() {
                this.actionShow = false
                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);
                        })
                    },
                    error => {
                    },
                    {resolution:res,format:fmt}
                );
            },
             /*从相册选择照片*/
            _selectPhoto() {
                this.actionShow = false;
                plus.gallery.pick(path => {
                    this.compressImg(path);
                }, e => {
                }, {filter: "image"});
            },       
            /*压缩图片，上传更快*/
            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.waitUpload.push(img);
                        }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.waitUpload.push(img);
                                 createUpload(event.target);
                            }, error => {
                            });
                        }
                    })
                });

            }，
        createUpload(path) {
                var _this=this;
                var task = plus.uploader.createUpload(this.commonData.baseUrl , {method:'POST'}, function (t, status) {
                    // 上传完成
                    var result = JSON.parse(t.responseText);
                  
                  
                });
                task.setRequestHeader("access-token",_this.commonData.accessToken);
                task.addFile(path, {key: "uploadfile"});
                task.start();
            },
        }
    }
</script>