⑤ h5调用摄像头

<div :style="{ zIndex : !pre ? 1 : 2 }">
    <div @click="getN" v-show="!npre"></div>
    <img @click="getN" v-show="npre" :src="npre" alt />
</div>
<input type="file" style="display:none" accept="image/*" @change="getPhoto" id="fromCam3" />

getN() {
    document.getElementById("fromCam3").click();
},
getPhoto(e) {
    let input = e.target;
    let file = input.files[0];
    let reader = new FileReader();
    let Orientation = 0;

    reader.onload = e => {
        let img = new Image(),
        iheight = 720,
        iwidth, //图片resize宽度
        quality = 0.3, //1,  //图像质量 
        canvas = document.createElement("canvas"),
        drawer = canvas.getContext("2d");
        img.src = e.target.result;
        img.onload = () => {
            img.onload = null;
            iwidth = iheight * (img.width / img.height);
            canvas.width = iwidth;
            canvas.height = iheight;
            drawer.drawImage(img, 0, 0, iwidth, iheight);

            let degree = (90 * Math.PI) / 180;
            if (iwidth < iheight) {
                //将竖放的照片旋转为横放
                canvas.width = iheight;
                canvas.height = iwidth;
                drawer.rotate(degree);
                drawer.drawImage(img, 0, -iheight, iwidth, iheight);
            }
            let finalSrc = canvas.toDataURL("image/jpeg", 1);
            this.npre = finalSrc;
        };
    };
    reader.readAsDataURL(file);
}