Ngx Img

Angular image upload component with cropping, compression, and validation.

drag & drop · multi-crop · base64 or blob output · Angular 4-7

---

Note: This project is archived and no longer actively maintained. It works with Angular 4 through 7.

---

Install

npm install @harryy/ngx-img --save

Setup

import { NgxImgModule } from '@harryy/ngx-img'

@NgModule({
  imports: [NgxImgModule]
})
export class AppModule {}

---

Usage

Basic upload

<ngx-img (onSelect)="onImageSelected($event)"></ngx-img>

With cropping

<ngx-img
  [config]="{
    fileSize: 2048,
    fileType: ['.png', '.jpg', '.jpeg'],
    quality: 0.8,
    crop: [{ ratio: 1, viewMode: 1 }]
  }"
  (onSelect)="onCropped($event)"
  (onReset)="onRemoved()">
</ngx-img>

With validation

<ngx-img
  [config]="{
    fileSize: 1024,
    minWidth: 200,
    minHeight: 200,
    maxWidth: 2000,
    maxHeight: 2000
  }"
  [errorTexts]="{
    fileSize: 'File must be under {value}KB',
    minWidth: 'Minimum width is {value}px'
  }"
  (onSelect)="handleImage($event)">
</ngx-img>

---

API

Inputs

Property	Type	Default	Description
config	object	see below	Upload and compression config
imgSrc	string	''	Initial image source
alt	string	''	Alt text
fileName	string	''	Display file name
remove	boolean	true	Show remove button
errorTexts	object	built-in	Custom validation error messages
text	object	built-in	Custom UI labels

Config

  PROPERTY       TYPE        DEFAULT                        DESCRIPTION
  --------       ----        -------                        -----------
  fileSize       number      2048                           Max file size (KB)
  minWidth       number      0                              Min image width (px)
  maxWidth       number      0                              Max image width (px)
  minHeight      number      0                              Min image height (px)
  maxHeight      number      0                              Max image height (px)
  fileType       string[]    ['.gif','.jpeg','.png','.jpg'] Allowed file types
  quality        number      0.8                            Compression (0-1)
  output         string      'base64'                       'base64' or 'blob'
  crop           array       --                             Crop configs (enables crop mode)

Crop Config

Each item in the crop array:

  PROPERTY        TYPE      DESCRIPTION
  --------        ----      -----------
  ratio           number    Aspect ratio constraint
  viewMode        0-3       Cropper view mode
  autoCropArea    0-1       Initial crop area (default 0.8)
  width/height    number    Output canvas dimensions
  fillColor       string    Background fill color

Outputs

Event	Description
(onChange)	Fires on file selection (raw File object)
(onSelect)	Fires after processing (base64 or blob)
(onReset)	Fires when image is removed

---

Features

• Drag-and-drop file upload
• Client-side image compression with quality control
• Multi-crop support (multiple aspect ratios from one image)
• Real-time dimension and size validation
• Customizable error messages with value interpolation ({value})
• Works with Angular 4, 5, 6, and 7

---

License

MIT