vue 实现调用摄像头进行拍照功能以及从图库中选择相片功能以及基于photoswipe的vue图片预览组件

客官°小女子只卖身不卖艺 2022-03-26 09:20 843阅读 0赞

效果图

图一： ![2019011617550581.png][]      图二：  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70][]

图三： ![20190116175626748.png][]

图四： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70 1][]

使用组件：

使用vue-photo-preview ：[https://github.com/826327700/vue-photo-preview][https_github.com_826327700_vue-photo-preview]

.ts

import photograph from "@/MobileApp/components/photograph";
    
    @Component({
      components: { photograph }
    })

.vue

<photograph></photograph> // 使用拍照以及选择相片功能
    <photograph showAlbum="false"></photograph> // 使用拍照功能
    <photograph showPhoto="false"></photograph> // 使用拍选择相片功能

组件：

.vue

<template>
      <div>
        <div>
          <div
            :style="{ height: picHeight-2 + 'px' ,width: picWidth-2 + 'px'}"
            ref="showPhoto"
            class="file"
            @click="showType"
          >
            <span class="icon iconfont icon-uploadphoto camera"></span>
          </div>
          <div class="showImgDiv" v-for="(item, index) in photoLists" :key="index" ref="showPhoto">
            <img
              preview="0"
              ref="showImg"
              :style="{ height: picHeight + 'px' ,width: picWidth + 'px'}"
              :src="item"
            >
            <span :style="{ width: picWidth + 'px'}" class="dele" @click="deleImg(index)">
              <span class="icon iconfont icon-delete deleIcon"></span>
            </span>
          </div>
        </div>
        <van-popup v-model="isShow" position="bottom" class="vanPopup">
          <div ref="cameraRemove" class="van-hairline--bottom" @click="close" showPhoto>
            <input
              cameraDisable
              ref="inputCamera"
              class="inputPhoto"
              type="file"
              accept="image/*"
              capture="camera"
              @change="cameraChange"
            >
            <span>拍照</span>
          </div>
          <div ref="multipleRemove" class="van-hairline--bottom" @click="close" showAlbum>
            <input
              multipleDisable
              ref="inputMultiple"
              class="inputPhoto"
              type="file"
              accept="image/*"
              multiple
              @change="multipleChange"
            >
            <span>从相册中选择</span>
          </div>
        </van-popup>
      </div>
    </template>
    
    <style scoped>
    .vanPopup {  
      text-align: center;
      overflow: hidden;
    }
    
    .dele {
      height: 30px;
      background-color: #fff;
      opacity: 0.8;
      text-align: center;
      line-height: 30px;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    .deleIcon {
      color: #3fcc8e;
    }
    
    .showImgDiv {
      position: relative;
      display: inline-block;
      padding-right: 2px;
      padding-top: 5px;
    }
    
    .van-hairline--bottom {
      height: 60px;
      line-height: 60px;
    }
    
    .vanRow {
      background-color: #fff;
    }
    
    .camera {
      color: #3fcc8e;
      font-size: 26px;
    }
    
    .file {
      position: relative;
      border: 1px dashed #3fcc8e;
      display: inline-block;
      overflow: hidden;
      line-height: 88px;
      text-align: center;
      margin-right: 2px;
      margin-top: 5px;
    }
    
    .inputPhoto {
      position: absolute;
      font-size: 100px;
      right: 0;
      top: 0;
      opacity: 0;
    }
    </style>
    
    <script>
    import Photograph from "./photograph.ts";
    export default Photograph;
    </script>

.ts

/**
     * @module MobileApp\components\photograph
     */
    
    import Vue from "vue";
    import { Component, Prop, Watch, Emit } from "vue-property-decorator";
    import { IndexObject } from "@/types";
    import common from "@/MobileApp/utils/common";
    
    @Component
    export default class Photograph extends Vue {
      [x: string]: any;
      private isShow = false;
      private photoLists = [];
      private picWidth = 75;
      private picHeight = 90;
    
      @Prop({ default: "true" }) showAlbum!: string;
      @Prop({ default: "true" }) showPhoto!: string;
    
      mounted() {}
    
      private close() {
        this.isShow = false;
      }
    
      private showType() {
        this.isShow = true;
        this.$nextTick(function() {
          let cameraRemove = this.$refs.cameraRemove as IndexObject;
          let multipleRemove = this.$refs.multipleRemove as IndexObject;
          if (!cameraRemove.parentNode || !multipleRemove.parentNode) {
            return;
          }
          if (this.showAlbum === "false") {
            multipleRemove.parentNode.removeChild(multipleRemove);
          }
          if (this.showPhoto === "false") {
            cameraRemove.parentNode.removeChild(cameraRemove);
          }
        });
      }
    
        private cameraChange() {
          let inputCameraFile = this.$refs.inputCamera as IndexObject;
          let url;
          if (inputCameraFile.files[0]) {
            url = URL.createObjectURL(inputCameraFile.files[0]);
            (this as any).photoLists.push(url);
          }
          this.$previewRefresh();
        }
    
        private multipleChange() {
          let url;
          let inputMultiple = this.$refs.inputMultiple as IndexObject;
          if (inputMultiple.files) {
            for (let file of inputMultiple.files) {
              url = URL.createObjectURL(file);
              (this as any).photoLists.push(url);
            }
          }
          this.$previewRefresh();
        }
    
      private deleImg(index) {
        common
          .dialogConfirm("温馨提示", "请确认要删除此照片?")
          .then(() => {
            // on confirm
            (this as any).photoLists.splice(index, 1);
          })
          .catch(() => {
            // on cancel
          });
      }
    }

[2019011617550581.png]: https://img-blog.csdnimg.cn/2019011617550581.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70]: /images/20220326/c7d65699c8eb4651b1e1dbac5ed35f93.png
[20190116175626748.png]: /images/20220326/7e10e6722c7847b3940beae3652abdcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70 1]: /images/20220326/fb2b1db2d0534161b975ba3a34756035.png
[https_github.com_826327700_vue-photo-preview]: https://github.com/826327700/vue-photo-preview