Tiny nativo JavaScript Image Cropper-Croppr. js

Vista prévia

Descripción

Croppr. js es un plugin JS simple, ligero y personalizable utilizado para recortar cualquier imagen con relación de aspecto configurable, tamaños Min/Max y mucho más.

Install the Croppr.js:

# NPM
$ npm install croppr

# Bower
$ bower install croppr

Funcionamiento

Importar el croppr:

import Croppr from 'croppr';

O inserte directamente la hoja de estilo croppr. CSS y el archivo de JavaScript croppr. js en su página web.

<script src="dist/croppr.js"></script>
<link rel="stylesheet" href="dist/croppr.css">

Cree una nueva instancia y especifique el selector que contiene la imagen que desea recortar.

<img src="1.jpg" alt="" id="cropper">

var croppr = new Croppr('#cropper', {


// settings here
});

var croppr = new Croppr('#cropper', {



// custom aspect radio


// e.g.


aspectRatio: null,



// min/max sizes


maxSize: { width: null, height: null },


minSize: { width: null, height: null },



// start size of crop region


startSize: { width: 100, height: 100, unit: '%' },



// real", "ratio" or "raw"


returnMode: 'real',



// callback functions


onInitialize: null,


onUpdate: null



});

API methods.

// returns the crop region
croppr.getValue();

// moves the crop region to the specified coordinates
croppr.moveTo(x,y);

// resizes the crop region to the specified size
croppr.resizeTo(Width, Height, Origin Array);

// scales the crop region by a factor. origin is an optional argument that specifies the origin point (in ratio) to resize from in the format of [x, y]
croppr.scaleBy(Factor, Origin Array);

// Resets the crop region
croppr.reset();

Registro de cambios

07/08/2018

• Corregir getValue devolver valores redondeados erróneamente