Build a Vue.js 3 Modal Image Editor to Crop,Zoom & Rotate Images in Browser Using vue-img-cutter in TS

App.vue

<template>
    <div>
      <h2>Image Cropper Example with vue-img-cutter</h2>
  
      <!-- Trigger the cropping tool -->
      <ImgCutter
        ref="imgCutter"
        :isModal="true"
        :boxWidth="800"
        :boxHeight="400"
        :cutWidth="400"
        :cutHeight="300"
        :rate="'4:3'"
        :tool="true"
        @cutDown="handleCrop"
      >
        <!-- Custom slot for the open button -->
        <template #open>
          <button @click="openCutter">Choose Image</button>
        </template>
      </ImgCutter>
  
      <!-- Preview cropped image -->
      <div v-if="croppedImage" class="preview-section">
        <h3>Cropped Image:</h3>
        <img :src="croppedImage.dataURL" alt="Cropped Image Preview" />
      </div>
    </div>
  </template>
  
  <script>
  import ImgCutter from "vue-img-cutter";
  
  export default {
    components: { ImgCutter },
    data() {
      return {
        croppedImage: null, // To store cropped image data
      };
    },
    methods: {
      openCutter() {
        // Open the ImgCutter tool programmatically
        const image = {
          name: "sample.jpg", // Image name
          src: "https://via.placeholder.com/800x600", // Image source
        };
        this.$refs.imgCutter.handleOpen(image);
      },
      handleCrop(result) {
        // Handle the cropped image data
        this.croppedImage = result;
        console.log("Cropped Image Data:", result);
      },
    },
  };
  </script>
  
  <style>
  .preview-section {
    margin-top: 20px;
  }
  .preview-section img {
    max-width: 100%;
    height: auto;
  }
  </style>

<div>

<h2>Image Cropper Example with vue-img-cutter</h2>

<ImgCutter

ref="imgCutter"

:isModal="true"

:boxWidth="800"

:boxHeight="400"

:cutWidth="400"

:cutHeight="300"

:rate="'4:3'"

:tool="true"

@cutDown="handleCrop"

<button @click="openCutter">Choose Image</button>

</template>

</ImgCutter>

<h3>Cropped Image:</h3>

</div>

</template>

import ImgCutter from "vue-img-cutter";

export default {

components: { ImgCutter },

data() {

return {

croppedImage: null, // To store cropped image data

};

methods: {

openCutter() {

// Open the ImgCutter tool programmatically

const image = {

name: "sample.jpg", // Image name

src: "https://via.placeholder.com/800x600", // Image source

};

this.$refs.imgCutter.handleOpen(image);

handleCrop(result) {

// Handle the cropped image data

this.croppedImage = result;

console.log("Cropped Image Data:", result);

};

</script>

<style>

.preview-section {

margin-top: 20px;

}

.preview-section img {

max-width: 100%;

height: auto;

}

</style>

Build a Vue.js 3 Modal Image Editor to Crop,Zoom & Rotate Images in Browser Using vue-img-cutter in TS

Comments

Leave a Reply Cancel reply

Archives