CROPRO Documentation: Using CROPRO with Vue.js

Using CROPRO with Vue.js

In this walkthrough we will create a simple Vue.js app (using Vue CLI), add an image to it, and then add CROPRO wired up to crop and rotate that image.

Follow along or just lookup the sections you are interested in below.

Create a Vue App

Let’s create a simple Vue.js app as the basis for our project. We will use Vue CLI for this.

vue create my-vue-cropro-app

We will go with the "Manually select features" option in the menu. Check "Choose Vue version", "Babel", and "TypeScript" in the next step. We can uncheck everything else for this walkthrough. Press Enter to continue.

Here are the choices I'm making in the next steps:

Vue version - 3.x
Use class-style component syntax? - yes
Use Babel alongside TypeScript - yes
Where do you prefer placing config for ... - In dedicated config files

Now our app is scafolded for us and we can start our project.

Basic app setup

Let's remove the Vue logo from App.vue and change the message for the HelloWorld component so our App.vue looks like this:

<template>
  <HelloWorld msg="CROPRO Vue Demo."/>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</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>

Now, add some image to the src/assets folder (say, sample.jpg) and let's add it to our component in HelloWorld.vue.

For this, remove everything in the template except for the message and add an image tag to display our sample image. At this point HelloWorld.vue should look like this:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <img ref="imgRef"
      src="./../assets/sample.jpg" 
      style="max-width: 50%;" 
      />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Note that we've added a ref attribute to our img tag so we can later reference it in our code.

With all of this in place we are ready to add CROPRO.

Add CROPRO

Now that we have our base project setup, it is time to add CROPRO.

Run:

npm install cropro

yarn add cropro

After that we can import CROPRO into our component and then wire it up.

import * as cropro from 'cropro';

Let's create a showCropArea() method that we will then call to start cropping:

showCropArea() {
  // create a CropArea
  const cropArea = new cropro.CropArea(this.$refs.imgRef);
  // attach an event handler to assign cropped image back to our image element
  cropArea.addRenderEventListener(dataUrl => {
    this.$refs.imgRef.src = dataUrl;
  });
  // launch CROPRO
  cropArea.show();  
}

The only thing left now is to wire this method up so that when a user clicks on the image CROPRO starts and they can start cropping and rotating.

<img ref="imgRef"
  src="./../assets/sample.jpg" 
  style="max-width: 50%;" 
  @click="showCropArea" />

And that's all there is. Your final HelloWorld.vue should look something like this:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <img ref="imgRef"
      src="./../assets/sample.jpg" 
      style="max-width: 50%;" 
      @click="showCropArea" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import * as cropro from 'cropro';

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string;

  // specify type for our reference
  $refs!: {
    imgRef: HTMLImageElement;
  }

  showCropArea() {
    // create a CropArea
    const cropArea = new cropro.CropArea(this.$refs.imgRef);
    // attach an event handler to assign cropped image back to our image element
    cropArea.addRenderEventListener(dataUrl => {
      this.$refs.imgRef.src = dataUrl;
    });
    // launch CROPRO
    cropArea.show();  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

JavaScript version of this demo in CodeSandbox