or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-configuration.mdevent-handling.mdindex.mdprogrammatic-control.md
tile.json

tessl/npm-vue-cropper

A Vue.js component that provides comprehensive image cropping functionality for Vue 2 applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-cropper@0.6.x

To install, run

npx @tessl/cli install tessl/npm-vue-cropper@0.6.0

index.mddocs/

Vue Cropper

Vue Cropper is a Vue.js component that provides comprehensive image cropping functionality for Vue 2 applications. It offers an elegant and feature-rich cropping interface with real-time preview capabilities, customizable cropping areas, and support for multiple image formats (JPEG, PNG, WebP).

Package Information

  • Package Name: vue-cropper
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install vue-cropper

Core Imports

Vue 2 component import:

import { VueCropper } from "vue-cropper";

Vue 2 global installation:

import VueCropper from 'vue-cropper';
Vue.use(VueCropper);

CommonJS:

const { VueCropper } = require("vue-cropper");

CDN usage:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-cropper@0.6.5/dist/index.js"></script>

Basic Usage

<template>
  <div class="cropper-container" style="width: 500px; height: 400px;">
    <VueCropper
      ref="cropper"
      :img="imageUrl"
      :outputSize="0.8"
      :outputType="'jpeg'"
      :info="true"
      :canScale="true"
      :autoCrop="true"
      :autoCropWidth="300"
      :autoCropHeight="200"
      :fixed="true"
      :fixedNumber="[16, 9]"
      @real-time="handleRealTime"
      @img-load="handleImageLoad"
    />
  </div>
  
  <div class="controls">
    <button @click="getCroppedImage">Get Cropped Image</button>
    <button @click="rotateLeft">Rotate Left</button>
    <button @click="rotateRight">Rotate Right</button>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper';

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imageUrl: '/path/to/your/image.jpg'
    };
  },
  methods: {
    handleRealTime(data) {
      // Real-time preview data
      console.log('Preview data:', data);
    },
    handleImageLoad(status) {
      if (status === 'success') {
        console.log('Image loaded successfully');
      } else {
        console.error('Image failed to load');
      }
    },
    getCroppedImage() {
      this.$refs.cropper.getCropData((data) => {
        // data is base64 encoded cropped image
        console.log('Cropped image:', data);
      });
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    }
  }
};
</script>

Architecture

Vue Cropper is built around several key components:

  • Vue Component: Single file component (VueCropper) that encapsulates all cropping functionality
  • Canvas Rendering: Uses HTML5 Canvas for image manipulation and cropping operations
  • Touch Support: Full mobile device support with touch gestures for drag, zoom, and rotation
  • EXIF Handling: Automatic image orientation correction based on EXIF data
  • Real-time Preview: Live preview system with customizable preview sizes and zoom levels
  • Plugin System: Vue 2 plugin architecture for global installation

Capabilities

Component Configuration

Core component props for controlling image display, cropping behavior, and output settings. Essential for customizing the cropper to specific use cases.

interface VueCropperProps {
  img: string | Blob | File | null;
  outputSize: number;
  outputType: string;
  info: boolean;
  canScale: boolean;
  autoCrop: boolean;
  autoCropWidth: number | string;
  autoCropHeight: number | string;
  fixed: boolean;
  fixedNumber: [number, number];
  fixedBox: boolean;
  full: boolean;
  canMove: boolean;
  canMoveBox: boolean;
  original: boolean;
  centerBox: boolean;
  high: boolean;
  infoTrue: boolean;
  maxImgSize: number | string;
  enlarge: number | string;
  mode: string;
  limitMinSize: number | Array<number> | string;
  fillColor: string;
}

Component Configuration

Event Handling

Event system for responding to image loading, cropping interactions, and real-time preview updates. Critical for integrating cropper feedback into your application.

interface VueCropperEvents {
  'img-load': (status: 'success' | 'error' | Error) => void;
  'img-load-error': (error: Error) => void;
  'img-moving': (data: MovingData) => void;
  'crop-moving': (data: MovingData) => void;
  'real-time': (data: PreviewData) => void;
  'change-crop-size': (data: CropSizeData) => void;
}

interface MovingData {
  moving: boolean;
  axis: {
    x1: number;
    x2: number;
    y1: number;
    y2: number;
  };
}

interface PreviewData {
  url: string;
  img: string;
  div: string;
  w: number;
  h: number;
}

Event Handling

Programmatic Control

Methods for controlling the cropper programmatically, including crop operations, image transformations, and data extraction.

interface VueCropperMethods {
  startCrop(): void;
  stopCrop(): void;
  clearCrop(): void;
  goAutoCrop(): void;
  changeScale(delta: number): void;
  rotateLeft(): void;
  rotateRight(): void;
  rotateClear(): void;
  changeCrop(w: number, h: number): void;
  refresh(): void;
  getCropData(callback: (base64: string) => void): void;
  getCropBlob(callback: (blob: Blob) => void): void;
  getImgAxis(): AxisData;
  getCropAxis(): AxisData;
  readonly cropW: number;
  readonly cropH: number;
}

interface AxisData {
  x1: number;
  x2: number;
  y1: number;
  y2: number;
}

Programmatic Control

Global Plugin Interface

interface VueCropperGlobal {
  version: string;
  install: (Vue: any) => void;
  VueCropper: typeof VueCropper;
}

The default export provides the global plugin interface for Vue 2 installation via Vue.use().