This project follows the all-contributors specification. Thanks goes to these wonderful people ( emoji key): This project was originally part of organisation because I (Valentin) was working at Ricardo.Īfter leaving this company, they gracefully accepted to transfer the project to me. This project is maintained by Valentin Hervieu. croppedAreaPixels: coordinates and dimensions of the cropped area in pixels.croppedArea: coordinates and dimensions of the cropped area in percentage of the media dimension. This callback is the one you should use to save the cropped area of the media. OnCropComplete(croppedArea, croppedAreaPixels) The nonce to add to the style tag when the styles are auto injected. Used to set the value of the video ref object in the parent component. Used to set the value of the image ref object in the parent component.Ĭalled when the component mounts, if present. Ĭalled when the component mounts, if present. Example with sass/scss "~react-easy-crop/react-easy-crop". When disabled you need to import the css file into your application manually (style file is available in react-easy-crop/react-easy-crop.css). Whether to auto inject styles using a style tag in the document head on component mount. Useful setting in case of zoom ) => booleanĬan be used to cancel a touch request by returning false.Ĭan be used to cancel a zoom with wheel request by returning false. Unlike traditional cropping methods that subtract from your selected print. Whether the position of the media should be restricted to the boundaries of the cropper. Eas圜rop ensures the selected crop area will be printed on any print size you choose. The properties you want to apply to the media tag ( or depending on your media) If you have CSS specificity issues, you should probably use the disableAutomaticStylesInjection prop. Classes passed via the classes prop are merged with the defaults. Import Cropper from 'react-easy-crop' const Demo = ( ) => Ĭustom class names to be used with the Cropper. Crop an avatar and download the result By Manish Boro.Create an image gallery with live cropping By Coding With Adam.Supports any videos format supported in HTML5.Supports any images format (JPEG, PNG, even GIF) as url or base 64 string.Provides crop dimensions as pixels and percentages.Supports drag, zoom and rotate interactions.Example with crop saved/loaded to/from local storage.Example with round crop area and no grid.Example with image selected by the user (+ auto-rotation for phone pictures).Example with server-side cropping using sharp.Example with output of the cropped image.A React component to crop images/videos with easy interactions
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |