Sử dụng Vue-croppie để chỉnh sửa ảnh trong dự án Vue-js

1. Lời nói đầu?

Khi lập trình front-end với Vue-js việc sử dụng các thư viện của vue là một điều thường gặp.
Ví dụ như trong trường hợp tạo profile avatar chẳng hạn, bạn muốn làm được nhiều điều hơn so với việc chỉ upload ảnh thông thường lên trang cá nhân như là cắt xén và zoom out zoom in trong ảnh. Hôm nay mình sẽ hướng dẫn các bạn một thư viện phục vụ cho điều đó một cách dễ dàng đó là Vue-croppie.

2. Tạo môi trường chạy vue:

2.1 Cài đặt npm:

Vì sử dụng npm để cài đặt nên máy tính của các bạn cần có cài đặt sẵn npm nhé. Cách cài npm theo link sau:
https://www.guru99.com/download-install-node-js.html

2.2 Cài đặt vue-cli:

Sử dụng npm cài đặt vue như sau:

$ npm install vue

Khởi động nền tảng cho ứng dụng:

# cài đặt vue-cli $ npm install --global vue-cli $ vue init webpack profile-image $ cd profile-image $ npm run dev

Bạn vào browser gõ localhost:8080 hiển thị ra trang Vue là đã cài đặt thành công nhé.

3. Hướng dẫn cài đặt Vue-croppie

Sau khi hoàn thành bạn sẽ có được một folder như sau:

Nói sơ về folder này: src chứa các file code của các bạn, ở đây vue tự động chia ra 1 file App.vue chính và 3 folder là assets,components và router trong đó assets chứa các file .css, ảnh để import vào dự án. Components chứa các component nhỏ trong dự án.
Các package được install bằng npm sẽ được lưu trong package.json

3.1. Cài đặt Vue-croppie:

Sử dụng lệnh như sau:
npm install vue-croppie --save

3.2. Sử dụng Vue-croppie:

Để sử dụng ta vào src\main.js import thêm VueCroppie như sau:

import Vue from 'vue'
import App from './App'
import router from './router'
import VueCroppie from 'vue-croppie'
import 'croppie/croppie.css'

Vue.config.productionTip = false
Vue.use(VueCroppie)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Sau đó ta có thể import <vue-croppie/> vào các template trong App.vue và các file .vue trong thư mục components. Lưu ý là có thể truyền các Props cho <vue-croppie/>. Ví dụ như:

<vue-croppie
    :mouseWheelZoom="false"
    :viewport="{ width: 200, height: 200, type: 'circle' }"
    @result="fn"
>
</vue-croppie>

Ở ví dụ này chúng ta đã truyền các tham số ví dụ như độ rộng và độ dài hiển thị là 200, kiểu là circle hình tròn, enableOrientation không thể phóng to bằng chuột.

Bạn có thể làm theo ví dụ của mình như sau:

• file \src\App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <vue-croppie
      ref="croppieRef"
      :enableOrientation="true"
      :boundary="{ width: 300, height: 300 }"
      @result="result"
      @update="update">
    </vue-croppie>

    <img style="margin-top:20px" v-bind:src="cropped">
    <div style="margin-top:20px">
      <button @click="bind()">Change picture</button>
      <button @click="rotate(-90)">Rotate Left</button>
      <button @click="rotate(90)">Rotate Right</button>
      <button @click="crop()">Crop</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    // Set image để sử dụng cho Vue-croppie
    this.$refs.croppieRef.bind({
      url: 'http://i.imgur.com/Fq2DMeH.jpg'
    })
  },
  
  // Tạo thư viện cho Vue-croppie
  data () {
    return {
      cropped: null,
      images: [
        'http://i.imgur.com/fHNtPXX.jpg',
        'http://i.imgur.com/ecMUngU.jpg',
        'http://i.imgur.com/7oO6zrh.jpg',
        'http://i.imgur.com/miVkBH2.jpg'
      ]
    }
  },
  
  methods: {
  
    bind () {
      // Chọn 1 hình trong các hình trong thư viện
      let url = this.images[Math.floor(Math.random() * 4)]
      this.$refs.croppieRef.bind({
        url: url
      })
    },

    crop () {
      // để sẵn format của hình là kiểu jpeg
      let options = {
        format: 'jpeg',
        circle: true
      }
      this.$refs.croppieRef.result(options, (output) => {
        this.cropped = output
      })
    },

    result (output) {
      this.cropped = output
    },

    update (val) {
      console.log(val)
    },

    rotate (rotationAngle) {
      // Xoay image
      this.$refs.croppieRef.rotate(rotationAngle)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Kết quả sẽ như sau:

4. Kết luận:

Vậy là mình đã hướng dẫn các bạn sử dụng Vue-croppie trong dự án của Vue-js. Chúc các bạn sử dụng thành công nhé.