How to Make a Photo Editor with Vue.js

With the advancement of web technologies like the HTML5 canvas API, adding graphics to a web app is easier than ever. Users are also expecting more graphics manipulation features from web apps. Therefore, things like photo editors are becoming more common as a feature in web apps.

Adding a photo editor is still a difficult task to do on your own. Fortunately, developers have stepped up to help us build a photo editor component. For Vue.js apps, we can use the Vue.js version of the TUI Image Editor package. The documentation is located at https://github.com/nhn/toast-ui.vue-image-editor.

In this article, we will make a simple photo editor app with this photo editor. To start, we run the Vue CLI by running:

npx @vue/cli create photo-editor

We keep the default options when running the wizard, so we press Enter through the default options. Next, we install the packages we need. We will use BootstrapVue for styling and the TUI Image Editor. To install them, run:

npm i @toast-ui/vue-image-editor bootstrap-vue

Next, we make our app. We start by replacing the existing code of Home.vue with the following:

<template>
  <div class="page">
    <div class="imageEditorApp">
      <b-button-toolbar>
        <b-button @click="cropMode()">Toggle Crop Mode</b-button>
      </b-button-toolbar>
      <br />
      <tui-image-editor ref="editor" :include-ui="useDefaultUI" :options="options"></tui-image-editor>
    </div>
  </div>
</template>
<script>
import { ImageEditor } from "@toast-ui/vue-image-editor";
const icona = require("tui-image-editor/dist/svg/icon-a.svg");
const iconb = require("tui-image-editor/dist/svg/icon-b.svg");
const iconc = require("tui-image-editor/dist/svg/icon-c.svg");
const icond = require("tui-image-editor/dist/svg/icon-d.svg");
const blackTheme = {
  "menu.normalIcon.path": icond,
  "menu.activeIcon.path": iconb,
  "menu.disabledIcon.path": icona,
  "menu.hoverIcon.path": iconc
};
export default {
  name: "home",
  components: {
    "tui-image-editor": ImageEditor
  },
  data() {
    return {
      useDefaultUI: true,
      options: {
        cssMaxWidth: window.innerWidth,
        cssHeight: 800,
        includeUI: {
          theme: blackTheme…