Image crop and resize

Question

In my angular application i have made image upload and preview using,

Html:

<input type='file' (change)="readUrl($event)">
<img [src]="url">

Ts:

  readUrl(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (event: ProgressEvent) => {
      this.url = (<FileReader>event.target).result;
    }

  }
}

As of now everything works fine..

But here the uploaded image is very bigger in size and hence i am in the need to implement auto crop and auto resize of the uploaded image that comes in preview, So that user can see the image in clear way..

Kindly help me to achieve the result of auto crop and resize without using jquery or any other libraries..

Stackblitz: https://stackblitz.com/edit/angular-a7ytbh

Edit:

Tried with javascript way https://jsfiddle.net/t3cgw65L/1/ but here only auto crop functionality is needed.. If we upload an image then only certain part is showing.. It needs to display the face if we upload our picture.. I am in need of uploading profile picture with auto crop and resize as like skype profile picture upload..

@imudin07,I need to resize.. In simple the uploaded image preview must be visible well to the user.. It needs to be cropped and resized to show the user in clear manner.. — Maniraj Murugan, Dec 17 '18 at 08:26
@imudin07, Yes we can use css also but i am not sure the way of doing with css.. I thought it can be done in javascript because of upload function (readUrl).. I am expecting a good help from you regarding the auto crop and resize of image.. — Maniraj Murugan, Dec 17 '18 at 08:29
@undefined check this link for a css implementation: https://alligator.io/css/cropping-images-object-fit/ — dRoyson, Dec 17 '18 at 08:32
The uploaded image gets a preview bigger in size.. I am in the need to crop and auto resize the image and show only the part that needs to be displayed.. Hope you got what i mean.. It willbe likeuploading profilepicture in skype.. — Maniraj Murugan, Dec 17 '18 at 08:32
@imudin07, Kindly take this link https://jsfiddle.net/t3cgw65L/1/ for reference.. It was working but it is not getting auto crop and resize.. If we upload then the certain part only visible for all images.. The face of our image not getting viewed if we upload our own image.. — Maniraj Murugan, Dec 17 '18 at 08:44
@undefined you can use the following library : https://foliotek.github.io/Croppie/ — dRoyson, Dec 17 '18 at 08:46
@Royson, I was strictly restricted to use library.. I have achieved in javascript here https://jsfiddle.net/t3cgw65L/1/ but it is not getting auto crop.. — Maniraj Murugan, Dec 17 '18 at 08:49
Possible duplicate of [Crop the image using javascript](https://stackoverflow.com/questions/53810434/crop-the-image-using-javascript) — But those new buttons though.., Dec 17 '18 at 18:36

mudin · Accepted Answer · 2018-12-17T09:09:58.677

2

I updated your drawing function in jsfiddle:

function drawimg(idata) {
  var img = new Image();
  img.onload = function(){
    canvas.width = 300; // defalt fixed size
    canvas.height = this.height*canvas.width/this.width;  // uploaded image aspect ratio
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0,0,canvas.width,canvas.height);
  };
  img.src = idata;
}

https://jsfiddle.net/t3cgw65L/2/

Let me know if it is what you want

edited Dec 17 '18 at 09:09

answered Dec 17 '18 at 09:05

mudin

2,672
2
17
45

1

I never saw any answer better than this one. – wormwlrm Dec 17 '18 at 09:09
1

We have to make a habit for using const/let instead of var ))) – Humoyun Ahmad Dec 17 '18 at 09:09
I am not sure whether i am explaining the question was reached in correct manner.. In your solution i am finding the entire image displaying which i have already made in the given stackblitz in question.. But my requirement needs to be like, if i upload my picture that has 500px in height and 500px in width then i need to resize it with displaying the face alone with auto crop and auto resize.I hope you got it that i am uploading image for profile picture then it automatically crop the face area alone and displaying it.The display area is like jsfiddle.net/t3cgw65L/1 is like this only not full – Maniraj Murugan Dec 17 '18 at 09:43
1

It is very unclear what you are asking. Auto crop is too general and what size/ratio do you want to crop? can you add some uploaded and cropped image? – mudin Dec 17 '18 at 23:44
or do you want the script to detect face from image? – mudin Dec 17 '18 at 23:48
@imudin07, I want to crop all the image in same size despite of original image size.. Eg: This is the original image https://mdn.mozillademos.org/files/5397/rhino.jpg whereas the cropped image is https://jsfiddle.net/8jwq3cs7/ .. Where only face of rhino was cropped and also the image was resized from original.. This is what i want.. Here the image was static so the it was cropped with manual inputs whereas i am in the need of dynamically crop the uploaded image.. – Maniraj Murugan Dec 18 '18 at 04:09
auto crop is not possible without user input or face/object tracking – mudin Dec 18 '18 at 04:57

Image crop and resize

1 Answers1

Linked