tessl/npm-vue-cropper

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

—

Pending

Overview

Eval results

Files

Component Configuration

Name: tessl/npm-vue-cropper
Author: tessl

Comprehensive configuration options for the VueCropper component, controlling image display, cropping behavior, and output settings.

Capabilities

Image Source Configuration

Controls the source image and basic image handling properties.

/**
 * Source image for cropping
 * @param img - Image source (URL, base64, Blob, or File object)
 */
img: string | Blob | File | null;

/**
 * Compression quality for output image
 * @param outputSize - Quality level from 0.1 to 1.0 (default: 1)
 */
outputSize: number;

/**
 * Output image format
 * @param outputType - Format: "jpeg", "png", or "webp" (default: "jpeg")
 */
outputType: string;

/**
 * Maximum image dimensions for processing
 * @param maxImgSize - Maximum width/height in pixels (default: 2000)
 */
maxImgSize: number | string;

Usage Examples:

<template>
  <!-- URL image -->
  <VueCropper :img="'https://example.com/image.jpg'" />
  
  <!-- File upload -->
  <VueCropper :img="selectedFile" :outputSize="0.8" :outputType="'png'" />
  
  <!-- Base64 image -->
  <VueCropper :img="'data:image/jpeg;base64,/9j/4AAQ...'" />
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    }
  }
};
</script>

Cropping Box Configuration

Settings for the cropping area behavior and appearance.

/**
 * Automatically generate crop box on image load
 * @param autoCrop - Enable auto crop box (default: false)
 */
autoCrop: boolean;

/**
 * Default crop box width
 * @param autoCropWidth - Width in pixels or 0 for 80% of container (default: 0)
 */
autoCropWidth: number | string;

/**
 * Default crop box height
 * @param autoCropHeight - Height in pixels or 0 for 80% of container (default: 0)
 */
autoCropHeight: number | string;

/**
 * Enable fixed aspect ratio for crop box
 * @param fixed - Lock aspect ratio (default: false)
 */
fixed: boolean;

/**
 * Aspect ratio when fixed is true
 * @param fixedNumber - [width, height] ratio (default: [1, 1])
 */
fixedNumber: [number, number];

/**
 * Lock crop box size to prevent resizing
 * @param fixedBox - Disable crop box resizing (default: false)
 */
fixedBox: boolean;

/**
 * Constrain crop box within image boundaries
 * @param centerBox - Keep crop box inside image (default: false)
 */
centerBox: boolean;

/**
 * Minimum crop area size constraint
 * @param limitMinSize - Minimum size in pixels or [width, height] (default: 10)
 */
limitMinSize: number | Array<number> | string;

Usage Examples:

<template>
  <!-- Auto crop with 16:9 aspect ratio -->
  <VueCropper
    :img="imageUrl"
    :autoCrop="true"
    :autoCropWidth="400"
    :autoCropHeight="225"
    :fixed="true"
    :fixedNumber="[16, 9]"
  />
  
  <!-- Fixed size crop box that cannot be resized -->
  <VueCropper
    :img="imageUrl"
    :autoCrop="true"
    :fixedBox="true"
    :autoCropWidth="200"
    :autoCropHeight="200"
  />
  
  <!-- Constrained crop box with minimum size -->
  <VueCropper
    :img="imageUrl"
    :centerBox="true"
    :limitMinSize="[50, 50]"
  />
</template>

Display and Interaction Settings

Controls for user interaction and visual feedback.

/**
 * Show crop box dimensions
 * @param info - Display width x height info (default: true)
 */
info: boolean;

/**
 * Show true output dimensions vs visual dimensions
 * @param infoTrue - Display actual output size (default: false)
 */
infoTrue: boolean;

/**
 * Enable mouse wheel zooming
 * @param canScale - Allow wheel zoom (default: true)
 */
canScale: boolean;

/**
 * Allow image dragging/panning
 * @param canMove - Enable image movement (default: true)
 */
canMove: boolean;

/**
 * Allow crop box dragging
 * @param canMoveBox - Enable crop box movement (default: true)
 */
canMoveBox: boolean;

/**
 * Render image at original aspect ratio
 * @param original - Use original proportions (default: false)
 */
original: boolean;

/**
 * Image rendering mode
 * @param mode - Fit mode: "contain", "cover", "100px", "100% auto" (default: "contain")
 */
mode: string;

Usage Examples:

<template>
  <!-- Read-only cropper with no user interaction -->
  <VueCropper
    :img="imageUrl"
    :canScale="false"
    :canMove="false"
    :canMoveBox="false"
    :info="false"
  />
  
  <!-- Cover mode with original aspect ratio -->
  <VueCropper
    :img="imageUrl"
    :mode="'cover'"
    :original="true"
    :infoTrue="true"
  />
</template>

Output and Quality Settings

Configuration for the final cropped image output.

/**
 * Output original image ratio crop
 * @param full - Maintain original proportions in output (default: false)
 */
full: boolean;

/**
 * Use device pixel ratio for high-DPI output
 * @param high - Enable high-resolution output (default: true)
 */
high: boolean;

/**
 * Output enlargement multiplier
 * @param enlarge - Scale factor for output size 0-1000 (default: 1)
 */
enlarge: number | string;

/**
 * Background fill color for transparent areas
 * @param fillColor - Hex color code for background (default: "")
 */
fillColor: string;

Usage Examples:

<template>
  <!-- High-quality output with 2x enlargement -->
  <VueCropper
    :img="imageUrl"
    :outputSize="1.0"
    :high="true"
    :enlarge="2"
    :fillColor="'#ffffff'"
  />
  
  <!-- Mobile-optimized lower quality -->
  <VueCropper
    :img="imageUrl"
    :outputSize="0.7"
    :high="false"
    :enlarge="1"
  />
  
</template>

Install with Tessl CLI