Biblioteca de recorte de imagen de lado cliente fácil-Cropper. js

Vista prévia

Descripción

Cropper. js es una biblioteca JavaScript diminuta y fácil de usar que proporciona un recorte rápido de la imagen del lado del cliente basado en HTML5 < Canvas > .

Funcionamiento

Importe el archivo JS de la biblioteca en su página HTML.

<script type="text/javascript" src="cropper.js"></script>

Crea un elemento de lienzo de HTML5 el que dibujará el Cropper.

<canvas id="testCanvas" width="600" height="450">

Your browser does not support canvas.
</canvas>

Cree una serie de entradas que permitan la selección de archivos y la interacción con el API de Cropper.

<input type="file" id="fileInput" onchange="handleFileSelect()" />
<input type="button" onclick="cropper.startCropping()" value="Start cropping" />
<input type="button" onclick="cropper.getCroppedImageSrc()" value="Crop" />
<input type="button" onclick="cropper.restore()" value="Restore" />

El JavaScript para activar el Cropper.

// initialize cropper by providing it with a target canvas and a XY ratio (height = width * ratio)
cropper.start(document.getElementById("testCanvas"), 1);




 function handleFileSelect() {

// this function will be called when the file input below is changed

var file = document.getElementById("fileInput").files[0];
// get a reference to the selected file



var reader = new FileReader(); // create a file reader

// set an onload function to show the image in cropper once it has been loaded

reader.onload = function(event) {


var data = event.target.result; // the "data url" of the image


cropper.showImage(data); // hand this to cropper, it will be displayed

};



// this loads the file as a data url calling the function above once done

reader.readAsDataURL(file);
 }