<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);
    }