FE_CPONE/test/vuex/cpone-card-reader/components/oneDialogPhoto.vue

<template>
    <v-dialog v-model="dialog" :overlay="true" max-width="360px">
        <v-card>
            <v-card-title primary-title class="headline grey lighten-2">
                Ambil / Upload Foto
            </v-card-title>

            <v-card-text>
                <v-layout row wrap>
                    <!-- <v-flex xs12> -->
                    <v-flex>
                        <v-card fill-height flat class="photo_box" id="photo_box" elevation="24">
                            <v-layout align-center justify-center>
                                <div class="photo_inside" id="photo_inside" v-show="camera"></div>

                                <div class="photo_inside" id="photo_inside_2" v-show="!camera">
                                    <v-img :src="imageUrl" aspect-ratio="1.34"
                                        class="grey lighten-2 elevation-2"></v-img>
                                </div>
                            </v-layout>
                        </v-card>

                        <v-btn color="transparent" block @click="switch_camera" v-show="camera">Ubah Kamera</v-btn>
                        <v-btn color="success" block @click="snap_photo" v-show="camera">Ambil Foto</v-btn>
                        <v-btn color="orange" dark block @click="camera = true" v-show="!camera">Gunakan Kamera</v-btn>

                        <v-divider>xxxx</v-divider>

                        <v-flex xs12 class="text-xs-center">
                            atau
                        </v-flex>
                        <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                            <v-text-field label="Pilih Gambar" hide-details @click='pickFile' v-model='imageName'
                                prepend-icon='attach_file' class="mt-2"></v-text-field>
                            <input type="file" style="display: none" ref="image" accept="image/*"
                                @change="onFilePicked">
                        </v-flex>

                        <v-flex xs12>
                            <v-btn color="success" block @click="upload" :disabled="camera"
                                :dark="!camera">Simpan</v-btn>
                        </v-flex>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" flat @click="dialog = false">
                    Tutup
                </v-btn>
            </v-card-actions>

        </v-card>
    </v-dialog>
</template>

<style>
.photo_box {
    overflow: hidden;
    min-height: 240px;
    min-width: 320px;
}

.photo_inside {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#photo_inside_2 {
    min-height: 240px;
    min-width: 320px;
}
</style>

<script>
module.exports = {
    data() {
        return {
            title: "Image Upload",
            imageName: '',
            imageUrl: '',
            imageFile: '',
            camera: true,
            swithCamera: false
        }
    },

    computed: {
        dialog: {
            get() { return this.$store.state.photo.dialog_photo },
            set(v) { this.$store.commit('photo/update_dialog_photo', v) }
        }
    },

    methods: {
        snap_photo() {
            var str = this.$store
            Webcam.snap(function (data_uri) {
                // document.getElementById('photo_result').innerHTML = '<img src="'+data_uri+'"/>';
                // console.log(data_uri)
                str.commit('photo/update_photo_64', data_uri)
                str.dispatch('photo/upload')
            })
            delete str
        },

        pickFile() {
            this.$refs.image.click()
        },

        onFilePicked(e) {
            this.camera = false
            console.log(this.camera)
            const files = e.target.files
            if (files[0] !== undefined) {
                this.imageName = files[0].name
                if (this.imageName.lastIndexOf('.') <= 0) {
                    return
                }
                const fr = new FileReader()
                fr.readAsDataURL(files[0])
                fr.addEventListener('load', () => {
                    this.imageUrl = fr.result
                    this.imageFile = files[0] // this is an image file that can be sent to server...
                })
            } else {
                this.imageName = ''
                this.imageFile = ''
                this.imageUrl = ''
            }
        },

        upload() {
            this.$store.commit('photo/update_photo_64', this.imageUrl)
            this.$store.dispatch('photo/upload')
        },

        switch_camera() {
            this.swithCamera = !this.swithCamera
            Webcam.reset();
            Webcam.set({
                width: 320,
                height: 240,
                image_format: 'jpeg',
                jpeg_quality: 90,
                dest_width: 640,
                dest_height: 480,
                constraints: {
                    facingMode: this.swithCamera ? "user" : "environment"
                }
            });

            Webcam.attach('#photo_inside');
        }
    },

    watch: {
        dialog(n, o) {
            if (n === true) {
                this.camera = true;

                Webcam.set({
                    width: 320,
                    height: 240,
                    image_format: 'jpeg',
                    jpeg_quality: 90,
                    dest_width: 640,
                    dest_height: 480,
                    constraints: {
                        facingMode: "environment" // Request rear camera
                    }
                });

                Webcam.attach('#photo_inside');
            } else {
                Webcam.reset();
            }
        },

        camera(n, o) {
            if (n === true) {
                this.imageName = '';
                this.imageFile = '';
                this.imageUrl = '';

                Webcam.set({
                    width: 320,
                    height: 240,
                    image_format: 'jpeg',
                    jpeg_quality: 90,
                    dest_width: 640,
                    dest_height: 480,
                    constraints: {
                        facingMode: "environment" // Request rear camera
                    }
                });

                Webcam.attach('#photo_inside');
            } else {
                Webcam.reset();
            }
        }
    }
}
</script>