Issue
I have a function that automatically upload an image that users upload.
What I want is that the function automatically crop the image to make it as a square before uploading : if the image is too wide, it crop from the center to create a square; if the image is too small it zoom in to be a square of minimum 300x300px (it's not a problem that the image will be in low quality in this case).
I have no idea how to proceed, is there a tool in angular to do this ?
Here is my code:
Solution
you can use https://www.npmjs.com/package/ngx-image-cropper angular package
for square, you need to use like this
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[resizeToWidth]="300"
[resizeToHeight]="300"
[aspectRatio]="1/1"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
actually which properties you need are these several properties from package
[resizeToWidth]="300" Cropped image will be resized to at most this width (in px)
[resizeToHeight]="300" Cropped image will be resized to at most this height (in px)
[aspectRatio]="1/1" // 1/1 The width/height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...)
in case you don't want to display this component you can make it absolute and hide it py opacity? Actually, I didn't try it but I think it should work for you.
Also please follow the installation steps from the package documentation before using this example.
Answered By - Ashot Aleqsanyan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.