angular7中实现图片上传、图片压缩、图片裁剪功能

file-upload.service.ts

import { Injectable } from '@angular/core';
import { HttpService } from './http.service';
import { ApiService } from './api.service';

@Injectable({
    providedIn: 'root'
})
export class FileUploadService {

    constructor(
        public http: HttpService,
        public api: ApiService
    ) { }

    imgUpload(imgFile: any, cb: any) {
        // 图片上传
        const that = this;

        // 调用文件上传弹框
        imgFile.nativeElement.click();
		
		// // 2. 把获取到的图片转换成base64格式
        imgFile.nativeElement.onchange = function() {
            const filereader = new FileReader(); // 新建一个FileReader对象
            const file = this.files[0]; //  // 获取文件对象

            if (!/image\/\w+/.test(file.type)) {
                alert('看清楚，这个需要图片！');
                return false;
            }

            if (this.files[0]) {
                if (this.files[0].size / 1024 / 1024 > 2) {
                    alert('图片上传大小不要超过2MB, 请重新上传！');
                    return;
                }
            }

            const imgName = file.name; // 获取文件名称
			
			// 截取文件名称后面的文件格式
            const index = imgName.lastIndexOf('.');
            const Base64ImageType = imgName.substring(index + 1, imgName.length);
			
			// 将读取的文件转换成base64格式
            filereader.readAsDataURL(file);

            filereader.onload = () => {
            	// 转换后的文件数据存储在filereader对象的result中
                const result: any = filereader.result;

                // 3. 图片压缩
                const image = new Image(); // 新建一个img标签（不嵌入DOM节点，仅做canvas操作)
                image.src = result; // 让该标签加载base64格式的原图
					
				// 图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
                image.onload = () => {

                    const canvas = document.createElement('canvas'); // 创建一个canvas元素
                    const context = canvas.getContext('2d'); // context相当于画笔，里面有各种可以进行绘图的API
                    
                    // 压缩后图片的宽度，这里设置为缩小一半，例如 imageWidth = image.width / 2；
                    const imageWidth = image.width;
                    const imageHeigth = image.height;
                    let imgData = ''; // 存储压缩后的图片
                    canvas.width = imageWidth; // 设置绘图的宽度
                    canvas.height = imageHeigth; // 设置绘图的高度
                    // 使用drawImage重新设置img标签中的图片大小，实现压缩和图片裁剪
                    context.drawImage(image, 0, 0, imageWidth, imageHeigth, 0, 0, 104, 104);
                    // 使用toDataURL将canvas上的图片转换为base64格式
                    imgData = canvas.toDataURL('image/jpeg');

                    if (imgData) {
                        // ajax数据请求
                        const params = `Base64Image=${imgData}&Base64ImageType=${Base64ImageType}`;
                        that.http.doPost(that.api.uploadBase64Image, params).subscribe((data: any) => {
                            if (data.IsSucceed) {
                                cb(data.Data);
                            } else {
                                alert('上传失败，请重新上传');
                            }
                        });
                    }

                };
            };
        };
    }
}

component.ts

// 头像上传
    imgUpload() {
        this.fileUpload.imgUpload(this.fileUploadImg, (imgUrl: any) => {
            this.knowledgeDetail.avatorImg = imgUrl;
            this.isShowAvator = true;
            console.log(this.knowledgeDetail.avatorImg);
        });
    }

component.html

<div class="avatorImg" (click)="imgUpload()">

    <div *ngIf="isShowAvator">
        ![在这里插入图片描述]()
    </div>
    
    <ng-container *ngIf="!isShowAvator">
        <div class="ant-upload" tabindex="0" role="button">
            <i class="anticon upload-icon anticon-plus ng-star-inserted">
                <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="plus" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>
            </i>
            <div class="ant-upload-text ng-star-inserted">上传图片</div>
        </div>
    </ng-container>
	
	// 1.先通过input标签获取本地图片
    <input style="display: none;" type="file" #fileUploadImg>

</div>