Extract Photo From Screenshot – magic-crop

magic-crop is an amazing JavaScript library which makes use of canvas API to extract and crop a photo for a screenshot you provide.

How to use it:

Link to the main JavaScript file ‘magicCrop.js’:

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

Create an empty ‘img’ tag to place the original screenshot image.

<img id="original"/>

Create an empty element to place the cropped image.

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

The example 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';
}

Extract a photo from the image ‘guardian.png’:

runDemo()