Как интегрировать и отправить изображение кадрирования в этот код (angular2-img-cropper)? - PullRequest
Новая
       19

Как интегрировать и отправить изображение кадрирования в этот код (angular2-img-cropper)?

1 голос
/ 13 марта 2019

Мне нужно знать, как отправить кривое изображение на мой сервер, потому что оно отправляет исходное изображение без кадрирования, и мне не удается его интегрировать.

Я использую эту библиотеку: 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]

это мой компонент.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 );

}

}
...