Componente de recorte de imagen fácil con recorte de imagen angular

Vista prévia

Descripción

Una directiva AngularJS creada por andyshora que le permite cambiar el tamaño, hacer zoom y recortar una imagen local y, a continuación, generar un URI de datos codificado en Base64 que representa la imagen recortada. Todas las opciones/parámetros se pueden pasar a través de los atributos de datos HTML5.

Funcionamiento

Incluya el Requird angular. js de una red CDN en el documento.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>

Incluya el Image-Crop-Styles. CSS para el estilo del componente de recorte de imagen.

<link rel="stylesheet" href="image-crop-styles.css"

Incluya la Directiva de recorte de imagen.

<script src="image-crop.js"></script>

Cree el código HTML para el componente de recorte de imagen.

<div ng-controller="MainController">

<p ng-hide="imageCropResult||imageCropStep!=1">Let's get started &rarr; <a ng-click="showImageCropper=true;imageCropStep=1">Crop Image</a></p>

<p ng-show="imageCropResult">Wanna start over? &rarr; <a ng-click="imageCropResult=null;imageCropStep=1">Reset</a></p>

<image-crop




 data-width="300"




 data-height="300"




 data-shape="circle"




 data-step="imageCropStep"




 data-result="imageCropResult"




 ng-show="showImageCropper"



 ></image-crop>

<hr>

<h2>Result</h2>

<div ng-show="imageCropResult"> <img ng-src="{{ imageCropResult }}" alt="The Cropped Image">


<textarea class="result-datauri">{{ imageCropResult }}</textarea>

</div>

<p ng-hide="imageCropResult">Not cropped yet</p>
</div>

El JavaScript.

<script>
var myApp = null;
(function() {

angular.module('myApp', ['ImageCropper'])
.controller('MainController', function($scope) {
console.log('MainController');

$scope.imageCropResult = null;
$scope.showImageCropper = false;

$scope.$watch('imageCropResult', function(newVal) {
if (newVal) {
console.log('imageCropResult', newVal);
}

});

});

})();
</script>

Opciones/parámetros.

• Data-width = "300 ″: el ancho del Cropper
• Data-height = "300 ″: la altura del Cropper
• Data-Shape = "Circle": la forma de la directriz de recorte (círculo/cuadrado)
• Data-Step = "imageCropStep": la variable que dicta el paso que el usuario verá (utilizado para restablecer propósitos)
• Data-result = "imageCropResult": la variable que tendrá el URI de datos resultante enlazado a él