Guachos Image Picker

Angular library based on angular material components for the selection, edition and compression of images in png, jpeg, webp formats This library was generated with Angular CLI version 13.1.3, and support until angular version 10.0.2 to the latest version of angular.

Description

In many projects it is of interest to upload and edit images, and sometimes we have to consult other programs for the compression of images and the change of format to improve the performance of the page. With GuachosImagePicker this is possible in real time with for each image that you want to upload.

Installation

Using npm

npm i guachos-image-picker --save

Using yarn

yarn add guachos-image-picker

GuachosImagePicker requires Angular Material. version 10.0.1 or higher

ng add @angular/material

Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

External Resource

GuachosImagePicker use resize-observer, for the functionality of cropping images. The resize observer api is used the resize observer interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement. Install the package

Using npm

npm i resize-observer --save

Using yarn

yarn add resize-observer

Usages

You must import the module GuachosImagePicker where you will use it and use the component

import { GuachosImagePickerModule } from 'guachos-image-picker';

@NgModule({
  imports: [
    GuachosImagePickerModule
  ],
})

In your component:

<guachos-image-picker [_config]="imagePickerConf" ($imageChanged)="onImageChange($event)"></guachos-image-picker>

In .ts file

export class ExampleComponent {
  imagePickerConf: ImagePickerConf = {
    borderRadius: '4px',
    language: 'en',
    width: '320px',
    height: '240px',
  };
}

Here is an example with different configurations

export class ExampleComponent {
  config1: ImagePickerConf = {
    borderRadius: '16px',
    language: 'en',
  };
  config2: ImagePickerConf = {
    borderRadius: '50%',
    language: 'es',
    width: '200px',
    height: '200px',
  };
  config3: ImagePickerConf = {
    borderRadius: '4px',
    language: 'en',
  };
  initialImage = 'https://havanatursa.com/assets/images/multi-agencies/backgrounds/slider.jpg';
}

<h2>Basic usage</h2>
<guachos-image-picker [_config]="config1"></guachos-image-picker>
<br />
<h2>Custom config</h2>
<guachos-image-picker [_config]="config2"></guachos-image-picker>
<br />
<h2>Initial Image</h2>
<guachos-image-picker [_imageSrc]="initialImage" ($imageChanged)="onImageChanged($event)" [_config]="config3"> </guachos-image-picker>

More about the component

The GuachosImagePicker component has a setting to change the width and length of the loaded image. In addition to the language (only 'es' and 'en'). It also has an initial compression option that by default is true. The interface looks like this:

export interface ImagePickerConf {
  width?: string;
  height?: string;
  borderRadius?: string;
  compressInitial?: boolean;
  language?: string;
}

Editing panel

Once you have selected an image, three buttons are enabled below the image:

1- Load a new image.
2- Open the editing panel.
3- DOWNLOAD.

In the edit panel, you can change the quality ratio to compress the file size (in kb). Also changing width and height in px keeping aspect ratio or not, is selectable. You can change the image format as you wish, the options are 'png', 'webp','jpeg'. The 'Png' format is not affected by changing the quality ratio.