时间戳

首页 > 解决方案 > 图像裁剪和调整大小

javascript - 图像裁剪和调整大小

问题描述

在我的角度应用程序中，我使用了图像上传和预览，

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个人资料图片上传一样。

标签： javascripthtmlangulartypescriptcanvas

解决方案

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

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

推荐阅读