[英]Image crop and resize
在我的角度应用程序中,我使用了图像上传和预览,
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个人资料图片上传调整大小..
我在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/
如果这是你想要的,请告诉我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.