Author: | mikechamberlain |
---|---|
Views Total: | 631 views |
Official Page: | Go to website |
Last Update: | June 4, 2017 |
License: | MIT |
Preview:

Description:
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()