Biblioteca de recorte de imágenes móviles-AlloyCrop. js

Vista prévia

Descripción

AlloyCrop. js es una pequeña biblioteca de JavaScript que proporciona funcionalidad de recorte de imágenes amigable con el usuario y táctil para sus aplicaciones web móviles.

Instalación

npm install alloycrop

Funcionamiento

Cargue el CSS3 < a href = "https://alloyteam.github.io/AlloyTouch/transformjs/" target = "_ blank" rel = "noopener noreferrer" > transformar biblioteca transform. js y la biblioteca de gestos Multi-Touch < a href = "https://github.com/AlloyTeam/AlloyFinger" > AlloyFinger en el documento.

<script src="transform.js"></script>
<script src="alloy-finger.js"></script>

Descargue y cargue el AlloyCrop. js en el documento.

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

Inserte una imagen oculta que desee recortar en el documento.

<img src="crop.png" style="display: none;">

Cree los botones de recorte de la siguiente manera:

<button class="btn" id="crop_btn">Crop Rect</button>
<button class="btn" id="crop_circle_btn">Crop Circle</button>

Cree un contenedor de resultados para mostrar la imagen recortada.

<div id="crop_result" style="text-align: center; padding-top: 30px; height: 230px; line-height: 300px;"></div>

El ejemplo de JavaScript para activar el Alloycrop. js:

; (function () {


var crop_btn = document.querySelector("#crop_btn");


var crop_result = document.querySelector("#crop_result");


var crop_circle_btn = document.querySelector("#crop_circle_btn");



function showToolPanel() {




crop_btn.style.display = "inline-block";




crop_result.style.display = "block";




crop_circle_btn.style.display = "inline-block";


}



function hideToolPanel() {




crop_btn.style.display = "none";




crop_result.style.display = "none";




crop_circle_btn.style.display = "none";




crop_result.innerHTML = "";


}



new AlloyFinger(crop_btn, {




tap: function () {






hideToolPanel();






new AlloyCrop({








image_src: "./asset/test.png",








width: 200,








height: 100,








output: 1.5,








ok: function (base64, canvas) {










crop_result.appendChild(canvas);










crop_result.querySelector("canvas").style.borderRadius = "0%";










showToolPanel();








},








cancel: function () {










showToolPanel();








}






});





}


});



new AlloyFinger(crop_circle_btn, {




tap: function () {






hideToolPanel();






new AlloyCrop({








image_src: "./asset/test.png",








circle: true,








width: 200,








height: 200,








output: 1,








ok: function (base64, canvas) {










crop_result.appendChild(canvas);










crop_result.querySelector("canvas").style.borderRadius = "50%";










showToolPanel();








},








cancel: function () {










showToolPanel();








}








});






}


});

})();

Registro de cambios

v1.0.4 (10/07/2018)

• actualizar