图像裁剪和调整大小 [英] Image crop and resize

问题描述

在我的角度应用程序中，我使用

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..

请帮助我实现自动裁剪和调整大小的结果，而无需使用 jquery或任何其他库.

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

尝试使用javascript方法 https://jsfiddle.net/t3cgw65L/1/但在这里仅需要自动裁剪功能..如果我们上传图像，则仅显示特定部分..如果我们上传图片，则需要显示面部..我需要使用自动裁剪功能上传个人资料图片并调整大小，如Skype个人资料图片上传..

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..

推荐答案

我在jsfiddle中更新了绘图功能:

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

这篇关于图像裁剪和调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！