![]() When set to true, the cropper will emit an image each time the position or size of the cropper is changed. Entering a number between 0 and 100 will determine the quality of the output image. This only applies when using jpeg or webp as output format. Resulting image will still be square, use border-radius: 100% on resulting image to show it as round. Make sure to create a new object each time you wish to overwrite the cropper's position and wait for the cropperReady event to have fired. Create a new object of type CropperPosition and assign it to this input. ![]() To be able to overwrite the cropper coordinates, you can use this input. When the resizeToWidth or resizeToHeight is set, enabling this option will make sure smaller images are not scaled up Step size can then be changed by using the numpad when the cropper is focused The initial step size in pixels when moving the cropper using the keyboard. The cropper cannot be made bigger than this number of pixels in height (in px) The cropper cannot be made bigger than this number of pixels in width (in px) The cropper cannot be made smaller than this number of pixels in height (relative to original image's size) (in px) (will be ignored if maintainAspectRatio is set) The cropper cannot be made smaller than this number of pixels in width (relative to original image's size) (in px) Set Cropper Height and disable resize (in px) Set Cropper Width and disable resize (in px) When set to true, padding will be added around the image to make it fit to the aspect ratioĬropped image will be resized to at most this width (in px)Ĭropped image will be resized to at most this height (in px) Keep width and height of cropped image equal according to the aspectRatio Output format (png, jpeg, webp, bmp, ico) (not all browsers support all types, png is always supported, others are optional) If requesting an image from a different domain make sure Cross-Origin Resource Sharing (CORS) is allowed or the image will fail to load.Īlternative text for uploaded image for accessibility compliance. If you don't want to use a file input or a base64 you can set an URL to get the image from. If you don't want to use a file input, you can set a base64 image directly and it will be loaded into the cropper The file you want to change (set to null to reset the cropper) The change event from your file input (set to null to reset the cropper) Either the imageChangedEvent, imageBase64 or imageFile should be set to load an image into the cropper. That event is then passed to the image cropper through imageChangedEvent which will load the image into the cropper.Įverytime you release the mouse, the imageCropped event will be triggered with the cropped image as a Base64 string in its payload. When you choose a file from the file input, it will trigger fileChangeEvent. Example usageĪdd the ImageCropperModule to the imports of the module which will be using the Image Cropper. Only Angular 13+ is supported since image cropper version 6.0.0. Returns the Croppr instance.Npm install ngx-image-cropper -save Upgrade instructionsįor a list of breaking changes and update instructions, go to releases. setValue(data: Array, constrain?: boolean, mode?: string) ![]() If constrain is false, crop region isn't limited by options. ![]() origin is an optional argument that specifies the origin point (in ratio) to resize from in the format of. Resizes the crop region to the specified size. resizeTo(width: number, height: number, origin?: Array, constrain?: boolean, mode?: string) Note: If constrain is false, crop region isn't limited by options. Moves the crop region to the specified coordinates. moveTo(x: number, y: number, constrain?: boolean, mode?: string) Returns the Croppr instance and media node. setVideo(src: string, callback?: function)Ĭhanges the video src. setImage(src: string, callback?: function)Ĭhanges the image src. getValue ( ) // data = destroy()ĭestroys the Croppr instance and restores the original img element. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |