将裁剪器与 ng-file-upload 一起使用

Question

我正在使用 ng-file-upload 来预览和上传图片。在我上传图片之前，我想让用户裁剪图片。我尝试使用 ng-img-crop，但它没有我想要的功能（纵横比自定义），但cropper 有（https://github.com/fengyuanchen/cropper/）。我现在唯一的问题是如何使用裁剪器裁剪图像的预览。图像 src 最终成为一个 blob，即“blob:XYZ”。有没有人以这种方式成功使用cropper？有可能吗？

Answer 1

1. 通过将您从this.cropper.getCroppedCanvas().toBlob() 获得的 blob 附加到状态来保存它。
2. 将保存的 blob 传递给 save() 函数中的 File 构造函数，方法是将其推送到第一个参数 fileBits
3. 在multer 的帮助下处理后端上传

组件

import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { default as Cropper } from 'cropperjs';
import { FileItem, FileUploader } from 'ng2-file-upload';
import { UserService } from '../services/user.service';
import { User } from '../models/core';

@Component({
  selector: 'app-image-cropper',
  templateUrl: './image-cropper.component.html',
  styleUrls: ['./image-cropper.component.scss']
})
export class ImageCropperComponent implements OnInit, AfterViewInit, OnDestroy {


  @ViewChild('imageElement', {static: false})
  public imageElement: ElementRef;

  @Input()
  public imageSource: string;

  public imageBlob: Blob;
  public uploader: FileUploader;
  private cropper: Cropper;

  public constructor(private userService: UserService) {}

  public ngAfterViewInit() {
    this.cropper = new Cropper(this.imageElement.nativeElement, {
      zoomable: false,
      scalable: false,
      responsive: true,
      autoCropArea: 1,
      aspectRatio: 1,
      viewMode: 1,
      crop: (event) => {
        this.cropper.getCroppedCanvas().toBlob((blob) => {
          this.imageBlob = blob;
          console.log('Crop saved as a Blob');
        });
      }
    });
  }

  public save() {
    const date: number = new Date().getTime();
    // Put the blob into the fileBits array of the File constructor
    const file = new File([this.imageBlob], 'photo', {type: 'image/png', lastModified: date});
    const fileItem = new FileItem(this.uploader, file, {});
    this.uploader.queue.push(fileItem);
    fileItem.upload();
  }

  ngOnInit() {
    this.userService.user$.subscribe((user: User) => {
      this.uploader = new FileUploader({url: '/api/profile/' + user.username + '/avatar', itemAlias: 'photo'});
      this.uploader.onAfterAddingFile = (file) => {
        file.withCredentials = false;
      };
      this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
        console.log(response);
      };
    });
  }

  ngOnDestroy(): void {
    this.imageBlob = undefined;
    this.imageSource = '';
  }

}

组件模板

<div class="modal-content">
  <div class="modal-header">
    <p class="modal-title font-weight-bold" id="crop-modal-title"><i></i>Crop</p>
    <button type="button" class="close" data-dismiss="modal"
            (click)="activeModal.close('Close click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

    <div class="img-container">
      <img #imageElement [src]="imageSource" crossorigin>
    </div>
    <button type="button" class="button button-primary"
            (click)="save()">
    </button>
  </div>
</div>

节点控制器

import { Request, Response, Router } from 'express';
import * as util from 'util';
import * as fs from 'fs';
import * as multer from 'multer';

Router.post('/profile/:username/avatar/', upload.single('photo'), async (req: Request, resp: Response) => {
    try {
        console.log(req.file);
        // Do something with the uploaded file here
        const fsUnlinkPromisified = (util as any).promisify(fs.unlink);
        await fsUnlinkPromisified(req.file.path);
    } catch (error) {
        console.log(error);
        return resp.send({
            msg: 'Upload failed',
            status: 400
        });
    }
});