[vue-advance-cropper] cropper를 이미지 전체로 적용하기

개요

요구사항으로 이미지 전체를 cropper로 덮고 시작하자는 개선사항이 들어왔다. 

 

*cropper

 

 

 

참고

https://norserium.github.io/vue-advanced-cropper/components/cropper.html#props

 

 

개선 전

cropper가 이미지 부분만 잡고있다.

해결 방법

<template>
  <cropper 
     :src="img" :default-size="defaultSize" />
</template>

<script>
import { Cropper } from "vue-advanced-cropper";
import "vue-advanced-cropper/dist/style.css";
import "vue-advanced-cropper/dist/theme.compact.css";

export default {
  name: "VueCropper",
  components: {
    Cropper,
  },
  props: {
    img: {
      type: [Object, String],
      default: null,
    },
  },
  methods: {
    defaultSize({ imageSize, visibleArea }) {
      return {
        width: (visibleArea || imageSize).width,
        height: (visibleArea || imageSize).height,
      };
    }, 
  }
}
</script>

 

 

결과

cropper가 이미지 전체를 잡게 되었다.