angular - 使用带有 ng-file-upload 的cropper

Question

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

Answer 1

保存您从 this.cropper.getCroppedCanvas().toBlob() 获得的 blob通过将其附加到状态。

将保存的 blob 传递给 File save() 中的构造函数函数通过将其推送到第一个参数 fileBits

在 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>

节点 Controller

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
        });
    }
});