changes

components/media/CropImage.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="tile is-ancestor py-5 px-3 mx-0" v-if="image">
+      <div class="tile is-1"/>
+    <div class="tile is-7">
+      <Cropper
+      ref="cropper"
+      :src="image"
+      @change="onChange"
+        :stencil-props="getRatio" />
+    </div>
+    <div class="tile is-1"> </div>
+    <div class="tile">
+      <div v-if="avatar!==true">
+      <p class="mt-2 fs-16">Chọn tỷ lệ hoặc nhập chiều rộng và cao</p>
+        <div class="tags are-medium mt-2">
+    <a :class="curRatio.k===v.k? 'tag is-primary' : 'tag'" v-for="(v,i) in ratios" :key="i" @click="curRatio=v">{{v.k}}</a>
+  </div>
+        <div class="block mt-5">
+          <b-radio v-model="radio"
+            native-value="replace">
+            Ghi đè
+          </b-radio>
+          <b-radio v-model="radio" class="ml-3"
+            native-value="new">
+            Tạo file mới
+          </b-radio>
+        </div>
+      <p class="mt-4">
+        <a class="button is-primary mr-4 mb-2" :class="loading? 'is-loading' : ''" @click="updateImage()">Lưu lại</a> 
+      </p>
+      <p class="mt-2" v-if="coordinates">
+        Hình ảnh cắt, {{'W: ' + coordinates.width +  ', H: ' + coordinates.height + ', W/H: ' + coordinates.ratio}}
+      </p>
+      </div>
+      <div class="is-italic has-text-grey" v-else>* Di chuyển khung để chọn hình ảnh phù hợp</div>
+    </div>
+    </div>
+</template>
+<script>
+  import { CircleStencil, Cropper } from 'vue-advanced-cropper'
+  import 'vue-advanced-cropper/dist/style.css'
+  export default {
+    components: {
+      Cropper,
+      CircleStencil
+    },
+    props: ['selected', 'image', 'avatar'],
+    data() {
+      return {
+        coordinates: undefined,
+        ratios: [{k: '1/1'}, {k: '5/4'}, {k:'4/3'}, {k: '3/2'}, {k: '5/3'}, {k:'16/9'}, {k: '2/1'}, {k: '3/1'}, {k: '4/5'}, {k: '3/4'}, {k: '2/3'}, {k: '3/5'}, {k: '9/16'}, {k: '1/2'}, {k: '1/3'}],
+        curRatio: {k: '1/1'},
+        radio: this.avatar? 'new' : 'replace',
+        rectangle: true,
+        loading: false
+      }
+    },
+    computed: {
+      getRatio() {
+        return {aspectRatio: this.$calc(this.curRatio.k)}
+      }
+    },
+    methods: {
+      onChange({ coordinates, canvas}) {
+        this.coordinates = coordinates
+        this.coordinates.ratio = (this.coordinates.width*1.00 / this.coordinates.height).toFixed(2)
+      },
+      updateImage() {
+        const { canvas } = this.$refs.cropper.getResult()
+        if (canvas) canvas.toBlob(blod=>this.saveAs(blod))
+      },
+      async saveAs(blod) {
+        this.loading = true
+        var form = new FormData();
+        let name = this.selected.file.indexOf('-')>0? this.selected.file.substring(15, this.selected.file.length) : this.selected.file
+        this.fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + '-' + name
+        if(this.radio==='replace') this.fileName = this.selected.file
+        form.append('filename', this.fileName)
+        form.append('name', name)
+        form.append('file', blod)
+        form.append('type', 'file')
+        form.append('size', this.selected.size)
+        form.append('user', this.$store.state.login.id)
+        let result = await this.$insertapi('upload', form)
+        this.loading = false
+        if(result==='error') return
+        this.$emit('modalevent', {name: 'image', data: result.rows[0]})
+      }
+    }
+  }
+</script>