图像裁剪和调整大小

时间:2018-12-17 08:13:14

标签: javascript html angular typescript canvas

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

进行了图像上传和预览

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;
    }

  }
}

到目前为止,一切正常。.

但是在这里,上传的图片的尺寸非常大,因此我需要对预览中上传的图片进行自动裁剪和自动调整大小,以便用户可以看到该图片清楚地..

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

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

编辑:

尝试使用JavaScript方法https://jsfiddle.net/t3cgw65L/1/,但此处仅需要自动裁剪功能。.如果我们上传图片,则仅显示特定部分。.如果我们上传图片,则需要显示面部。需要通过自动裁剪和调整大小来上传个人资料图片,就像skype个人资料图片上传一样。

1 个答案:

答案 0 :(得分:3)

我在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/

让我知道这是否是你想要的