JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css" />

<div id="app">
  <cropper 
    :src="getImage()"
    :stencil-props="{ aspectRatio: 9/16 }"
    @change="change"
  ></cropper>
</div>

JavaScript

new Vue({
  el: '#app',  
  methods: {
    change({coordinates, canvas}) {
       console.log(coordinates, canvas)
    },
    getImage() {
     return 'https://images.unsplash.com/photo-1540804485132-9c94bcae6c66?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80';  
    }
  }
})