CropCanvas

Petit outil javascript qui permet de découper une zone d'un canvas et de l'enregistrer en tant qu'image.

Présentation

J'ai développé au boulot une interface web simple qui permet de charger un pdf (grâce à pdf.js), d'en isoler une partie pour la découper en tant qu'image à envoyer au serveur. CropCanvas est la partie du code qui effectue cette dernière opération à l'aide de la librairie fabric.js.

Rien de transcendental, simplement un outil basique qui peut ensuite servir à faire des choses plus complexes.

CropCanvas dépend de fabric.js version 2 ou supérieur.

Démonstration

Utilisation

Attention : CropCanvas nécessite la version 2 ou supérieure de la librairie fabric.js pour fonctionner, librairie qui n'est pas fournit avec l'application.

<script src="/path/to/fabric.js"></script>
<canvas id="myCanvas"></canvas>
Code HTML
import { CropCanvas } from './path/to/CropCanvas.js';
const canvas = document.getElementById('myCanvas');
const cropCanvas = new CropCanvas(canvas);
Code javascript

API

Historique

2019-06-22
  • add Gestion du zoom
  • add Gestion de la rotation
2019-01-12
  • upd Mise en ligne du projet.
2018-10-29
  • upd Classe javascript indépendante.
2018-10-25
  • add Première version avec usage de pdf.js.