Class: CropCanvas

CropCanvas(canvas)

Objet permettant de récupérer la découpe d'une zone d'un canvas. L'objet utilise la librairie fabric.js pour toutes les manipulations.

Constructor

new CropCanvas(canvas)

Construction du composant

Parameters:
Name Type Description
canvas HTMLCanvasElement

Élément canvas sur lequel travailler.

Methods

crop()

Appliquer le retaillage en générant une image (url:data) correspondant.

getDataUri() → {String}

Récupérer la data-uri générée depuis le retaillage.

Returns:

La data-uri ddécrivant la zone retaillée.

Type
String
getRealSizes() → {Object}

Récupérer les vraies tailles utiles, qui dépendent de la rotation (width et height switchée) et du niveau de zoom

Returns:

Objet avec deux propriétés : width et height

Type
Object
getRotation() → {Number}

Récupérer l'angle de rotation de l'image dans le canvas

Returns:

L'angle en degrés.

Type
Number
getZoom() → {Number}

Récupérer le niveau de zoom appliqué.

Returns:

Niveau de zoom

Type
Number
preview(id)

Visualiser l'image découpée dans un élément image de la page.

Parameters:
Name Type Description
id String

Identifiant de l'élément image

rotate(value)

Appliquer une rotation au canvas. Elle s'applique en plus de l'éventuelle rotation existente.

Parameters:
Name Type Description
value Number

90, -90 ou 180

save()

Enregistrer l'image découpée sur le poste client

setImage(url)

Définir une image qui sera utiliser comme source pour le retaillage.

Parameters:
Name Type Description
url String

Url de l'image

setRatio(ratio)

Définir le ration largeur / hauteur de la zone de crop.

Parameters:
Name Type Description
ratio Number

Ratio

setZoom(value)

Appliquer un zoom au canvas.

Parameters:
Name Type Description
value Number

Entre 0.2 et 5