Socket
Socket
Sign inDemoInstall

guachos-image-picker

Package Overview
Dependencies
7
Maintainers
4
Versions
27
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

guachos-image-picker

Biblioteca angular basada en componentes de material angular para la selección, edición y compresión de imágenes en formatos png, jpeg, webp


Version published
Maintainers
4
Weekly downloads
130
increased by49.43%

Weekly downloads

Readme

Source

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.

Keywords

FAQs

Last updated on 28 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc