Extraer foto de la captura de pantalla-Magic-Crop

Vista prévia

Descripción

Magic-Crop es una increíble biblioteca de JavaScript que hace uso de canvas API para extraer y recortar una foto para una captura de pantalla que usted proporciona.

Funcionamiento

Enlace al archivo JavaScript principal ' magicCrop. js ':

<script src="src/magicCrop.js"></script>

Cree una etiqueta ' IMG ' vacía para colocar la imagen de la captura de pantalla original.

<img id="original"/>

Cree un elemento vacío para colocar la imagen recortada.

<div id="cropTarget"></div>

El ejemplo de JavaScript.

var demoUrl = 'test/images/guardian.png';


document.getElementById('original').src = demoUrl;


var magicCrop = new MagicCrop();

function runDemo() {


// load the url into a new image object and wait for it to load


var imageElem = new Image();


imageElem.src = demoUrl;


imageElem.onload = function () {




doCrop(imageElem);


}
}

function doCrop(imageElem) {


// calculate the cropping bounds


var imageData = magicCrop.getImageData(imageElem);


var bound = magicCrop.calcCroppingBounds(imageData.data.buffer, imageData.width, imageData.height);



// perform the crop


var croppedCanvas = magicCrop.cropToCanvas(imageElem, bound);



// render the cropped image back to the page


var croppedImage = new Image();


croppedImage.src = croppedCanvas.toDataURL('image/png');


document.getElementById('cropTarget').appendChild(croppedImage);


document.getElementById('cropButton').style.display = 'none';
}

Extraer una foto de la imagen ' Guardian. png ':

runDemo()