vue-croppa

customize css

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-croppa/dist/vue-croppa.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-croppa.min.js"></script>
<div id="app">
  <croppa v-model="myCroppa" canvas-color="transparent"></croppa>
  <button @click="generateImage">Generate</button>
  <br>
  <img class="output" :src="imgUrl" >
</div>

CSS

.croppa-container {
  background-color: white;
  border: 3px solid black
}

JavaScript

Vue.use(Croppa)  

var app = new Vue({
  el: '#app',
  data: {
    myCroppa: null,
    imgUrl: ''
  },
  
  methods: {
  	generateImage: function() {
    	let url = this.myCroppa.generateDataUrl()
      if (!url) {
      	alert('no image')
        return
      }
      this.imgUrl = url
    }
  }
})