代码之家 › 专栏 › 技术社区 › Maniraj Murugan

图像裁剪和调整大小

canvas typescript angular html javascript

1

Maniraj Murugan · 技术社区 · 7 年前

在Angular应用程序中,我使用

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 回复 | 直到 7 年前

1

3

mudin mike.bronner 7 年前

我在jfiddle中更新了您的绘图功能:

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/

如果这是你想要的,请告诉我