No Description Available
0
Slick marquee slider - manage HTML marquee with slick javascript library.
onex
This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.
Tesseract js demo scan text over the image by just doing small amounts of code.
Cropperjs is a feature-rich pure javascript library for cropping image. using this you can able to able to provide image cropping to the client-side.
window.addEventListener('DOMContentLoaded', function () { var image = document.querySelector('#image1'); var minAspectRatio = 0.5; var maxAspectRatio = 1.5; var cropper = new Cropper(image, { ready: function () { var cropper = this.cropper; var containerData = cropper.getContainerData(); var cropBoxData = cropper.getCropBoxData(); var aspectRatio = cropBoxData.width / cropBoxData.height; var newCropBoxWidth; if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) { newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2); cropper.setCropBoxData({ left: (containerData.width - newCropBoxWidth) / 2, width: newCropBoxWidth }); } }, cropmove: function () { var cropper = this.cropper; var cropBoxData = cropper.getCropBoxData(); var aspectRatio = cropBoxData.width / cropBoxData.height; if (aspectRatio < minAspectRatio) { cropper.setCropBoxData({ width: cropBoxData.height * minAspectRatio }); } else if (aspectRatio > maxAspectRatio) { cropper.setCropBoxData({ width: cropBoxData.height * maxAspectRatio }); } }, }); }); window.addEventListener('DOMContentLoaded', function () { var image = document.querySelector('#image2'); var result = document.querySelector('#result'); var cropper = new Cropper(image, { ready: function () { var image = new Image(); image.src = cropper.getCroppedCanvas().toDataURL('image/jpeg'); result.appendChild(image); }, }); });
<div class="container"> <h1>Cropper with a range of aspect ratio</h1> <div> <img id="image1" src="https://www.adminspress.com/demos/images/s1.jpg" alt="Picture"> </div> </div> <div class="container"> <h1>Cropper with Cross Origingin Images</h1> <div> <img id="image2" src="http://www.nmfnewsonline.com/upload/news/lifestyle/Nmf2adb21_02_01_slide_nature.jpg" alt="Picture"> </div> <div id="result"></div> </div>