En mi aplicación angular, he realizado la carga y vista previa de imágenes usando,
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;
}
}
}
A partir de ahora todo funciona bien.
Pero aquí la imagen cargada es de un tamaño mucho mayor y, por lo tanto, necesito implementar el recorte automático y el cambio de tamaño automático de la imagen cargada que viene en la vista previa, para que el usuario pueda ver la imagen de manera clara.
Por favor, ayúdame a lograr el resultado del recorte automático y el cambio de tamaño sin usar jquery o cualquier otra biblioteca .
Stackblitz: https://stackblitz.com/edit/angular-a7ytbh
Editar:
Intenté con la forma de javascript https://jsfiddle.net/t3cgw65L/1/ pero aquí solo se necesita la funcionalidad de recorte automático. Si cargamos una imagen, solo se muestra cierta parte. Necesita mostrar la cara si cargamos nuestra imagen .. Necesito subir una foto de perfil con recorte automático y cambiar el tamaño como subir la foto de perfil de skype ..
Actualicé su función de dibujo en 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/
Avísame si es lo que quieres
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras