Transforming images mechanism

tranform-images.vue

<template>
  <div class="flex flex-column flex-row-ns pa3 calisto bg-black-05">
    <div class="w-50-ns w-100 ph3">
      <!-- upload image -->
    </div>
    <section class="w-40-l w-50-m w-100 ph3 tl" v-if="imageURL">
      <h2>Transform Image</h2>
      <form class="ba b--black bw2 bg-white br2 mw6 center pv2 ph4 shadow-5 f6">
        <div>
          <label for="height" class="dib mb2 mr2 black-70 f5 w-30"
            >Height</label
          >
          <input
            type="number"
            name="height"
            id="height"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            v-model="height"
            @keyup="debounceTransform" />
        </div>
        <div>
          <label class="dib mb2 mr2 black-70 f5 w-30" for="width">Width</label>
          <input
            type="number"
            name="width"
            id="width"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            @keyup="debounceTransform"
            v-model="width" />
        </div>
        <div>
          <label class="dib mb2 mr2 black-70 f5 w-30" for="sharpen"
            >Sharpen</label
          >
          <input
            type="number"
            name="sharpen"
            id="sharpen"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            @keyup="debounceTransform"
            v-model="sharpen"
            min="1"
            max="10" />
        </div>
        <div>
          <label class="dib mb2 mr2 black-70 f5 w-30" for="blur">Blur</label>
          <input
            type="number"
            name="blur"
            id="blur"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            @keyup="debounceTransform"
            v-model="blur"
            min="1"
            max="250" />
        </div>
        <button
          @click="downloadimage"
          class="center db pv2 ph3 mb3 tracked bg-black ba br3 white hover-black hover-bg-black-30 bg-animate pointer f7">
          Download
        </button>
      </form>
    </section>
  </div>
</template>
<script>
  import { getXataClient } from "@/xata";
  import debounce from "lodash/debounce";
  const xata = getXataClient();
  export default {
    data() {
      return {
        recordId: null,
        height: 100,
        sharpen: 0,
        blur: 0,
        width: 100,
        transformedImage: null,
        imageURL: "",
        imageName: "",
      };
    },
    computed: {...},
    methods: {
      debounceTransform: debounce(function () {
        this.editImage();
      }, 2000),
      async editImage() {
        const xataImageData = await xata.db.images.read(this.recordId);
        this.transformedImage = xataImageData.image[0].transform({
          height: this.height,
          width: this.width,
          blur: this.blur,
          sharpen: this.sharpen,
        });
        this.imageURL = this.transformedImage.url;
      },
    },
    mounted() {...},
  };
</script>