1

我需要知道如何将弯曲的图像发送到我的后端，因为它发送的是没有裁剪的原始图像，我无法整合它。

我使用这个库：https ://github.com/cstefanache/angular2-img-cropper

我想我必须看看如何获​​取数据变量，但我不知道如何

这是我的 HTML 代码：

<div class="card-body">
                <h4 class="card-title">Fotografia del usuario</h4>
                <h6 class="card-subtitle">{{usuario.nombre}}</h6>

                <img-cropper [image]="data" [settings]="cropperSettings" (change)="seleccionImagen($event.target.files[0])"></img-cropper><br>
                <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">

                <!-- <img class="img-fluid" [src]="usuario.img | imagen" alt="">
                <input class="btn-top" (change)="seleccionImagen($event.target.files[0])" type="file" name="" id=""> -->

                <button type="button" (click)="cambiarImagen()" [disabled]="!imagenSubir" mat-raised-button color="primary" class="btn btn-success btn-top">Actualizar Foto</button>

            </div>

[![屏幕 2][2]][2]

这是我的 component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { UsuarioService } from '../../services/usuario/usuario.service';
import { Usuario } from '../../models/usuario.model';
import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css'],
  declarations: [ImageCropperComponent]

})
  export class ProfileComponent implements OnInit {

usuario: Usuario;
imagenSubir: File;


data: any;
cropperSettings: CropperSettings


constructor(
 public _usuarioService: UsuarioService) {

this.cropperSettings = new CropperSettings();
this.cropperSettings.width = 100;
this.cropperSettings.height = 100;
this.cropperSettings.croppedWidth = 100;
this.cropperSettings.croppedHeight = 100;
this.cropperSettings.canvasWidth = 400;
this.cropperSettings.canvasHeight = 300;

this.data = {};

}

 ngOnInit() {
 this.usuario = this._usuarioService.usuario;
}

 guardar(usuario: Usuario) {
   this.usuario.nombre = usuario.nombre;
   if ( !this.usuario.google) {
   this.usuario.email = usuario.email;
 }

 this._usuarioService.actualizarUsuario( this.usuario )
                  .subscribe(resp => {
                    console.log(resp);
                  });
 }

 seleccionImagen( archivo: File ) {
   if ( !archivo ) {
    this.imagenSubir = null;
    return;
 }
  this.imagenSubir = archivo;

}

 cambiarImagen() {
  this._usuarioService.cambiarImagen( this.imagenSubir, this.usuario._id );

}

}
4

0 回答 0