1/29/2024 0 Comments Cropit zoom to fitWith NailThumb jQuery plugin create thumbnails easily from high-res images, without any distortion, with one line of code. With the Cropper.js, you can select a specific area of an image, and then upload the coordinates data to server-side to crop the image, or crop the image on browser-side directly. Also this plugin includes eye catching user interface which is quite differ from tradition image cropping plugins.Ĭropper is one of the simple and easy to use jQuery image crop plugin which comes with live preview and some handy features. It works in all major browsers including mobile, and you can plug it straight into Bootstrap and any other framework. Image Crop is a premium plugin which makes cropping easy through canvas. ![]() This plugin is licensed under MIT License. You can also zoom in or zoom out the photo by the buttons on right side. Smartcrop.js implements an algorithm to find good crops for images.Ĭropimg is another nifty jQuery image crop plugin which catches image inside the box and moves it. Smartcrop.js is a JavaScript library implementing content aware image cropping. Croppie is lightweight and supports almost every browser including iOS and Android. Croppic supports almost every browser including Internet Explorer 10.Ĭroppie is a fast, easy to use image cropping plugin with tons of configuration options. You can easily use Croppic by uploading an image and once image is uploaded, you can crop the image as per your desire with image zoom in and out functionality. CroppicĬroppic is an excellent image cropping jQuery plugin that serve you better than any other image cropping plugin. We have included both premium and free plugins in the list, if you are not satisfied with the features of free plugins, you have option to go with premium ones as such plugins provides more features and options for setting up the feature. CallbackĬalled when user selects a file in the select file input.Ĭalled when FileReader encounters an error while loading the image file.Ĭalled when image the zoom slider is enabled.Ĭalled when image the zoom slider is disabled.This article consists 20 Amazing jQuery Image Crop and Resize Plugins which will enable you to use cropping and resizing functionality for your websites and help you to deliver user friendly atmosphere to your visitors. When set to 'reject', onImageError would be called when ezcrop loads an image that is smaller than the container.,When set to 'allow', images smaller than the container can be zoomed down to its original size, overiding minZoom option.,When set to 'stretch', the minimum zoom of small images would follow minZoom option.įollowing callbacks can be used to interact with ezcrop. When set to true, you can freely move the image instead of being bound to the container borders. ![]() if set to 1.5, the image can be zoomed to 150% of its original size.ĭetermines the zoom when an image is loaded.,When set to 'min', image is zoomed to the smallest when loaded.,When set to 'image'`, image is zoomed to 100% when loaded. at least one of its edges must not go smaller than the preview area.ĭetermines how big the image can be zoomed. both width and height must not go smaller than the preview area.,If set to 'fit', the image can shrink further to fit the preview area, i.e. This options decides the minimal zoom level of the image.,If set to 'fill', the image has to fill the preview area, i.e. ![]() When set to true, you can load an image by dragging it from local file browser onto the preview area. The ratio between the desired image size to export and the preview size.,For example, if the preview size is 300px * 200px, and exportZoom = 2, then,the exported image size will be 600px * 400px.,This also affects the maximum zoom level, since the exported image cannot be zoomed to larger than its original size. Width of background image border in pixels.,The four array elements specify the width of background image width on the top, right, bottom, left side respectively.,The background image beyond the width will be hidden.,If specified as a number, border with uniform width on all sides will be applied. Whether or not to display the background image beyond the preview area. If set, it will override the CSS property. Range input element that controls image zoom. The HTML element that displays image preview.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |