如何使用 Canvas 调整 Angular 中的图像大小？

Question

我正在尝试调整单击此按钮后收到的 png 的大小：

<input #FileInput id="fileControl" type="file" accept='image/*' (change)="addImage(FileInput.files, $event)">

单击按钮后，它调用 addImage 并接收文件。

async addImage(files: any, event: any) {
    var dbKey = this.selectedHour;
    var length = this.detailsArray(this.selectedHour).length;
    if (files.length === 0) return;
    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) { this.message = 'Only images are supported.';
        return;
    }
    var reader = new FileReader();
    for (let j = 0; j < files.length; j++) {
        reader.readAsDataURL(files[j]);
        reader.onload = async (_event) => {
            var hour = this.selectedHour.slice(0, 4);
            var imgURL = reader.result;
            var resizedImage = '';
            await this.resizeImage(imgURL).then((resolve: any) => {
                resizedImage = resolve;
            });
            // keyparse works and give the right key
            let detailKey = this.keyParse(length.toString(), this.selectedHour.slice(0, 4));
            let caption = '';
            var theDict = {
                hour: hour,
                workHours: this.selectedHour,
                detailKey: detailKey,
                imgURL: resizedImage,
                caption: caption,
            };

           let hour = dict.workHours;
           let theArray = this.detailsControl.controls[hour] as FormArray;
           theArray.push(this.fb.group(dict));
        };
    }
...
}

现在我可以将图像添加到表单组中，它会显示图像，但我需要调整它的大小：

resizeImage(imageURL: any): Promise<any> {
    return new Promise((resolve) => {
      var image = new Image();
      var what = '';
      image.onload = function () {
        var image = new Image();
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        if (ctx != null) {
          ctx.drawImage(image, 0, 0, 640, 480);
        }
        image.src;
        var data = canvas.toDataURL('image/png', 0.5);
        what = data;
        console.log('data', data);
      };
      image.src = imageURL;
      resolve(what);
    });
}

不幸的是，这种方法在它要进入的元素中给了我一个断开的链接。 尽管 console.log 打印出类似的 base64 字符串作为工作字符串，但图像不显示。

谁能帮我弄清楚这件事有什么问题？

Answer 1

您的resizeImage function 存在多个问题。

1. 您在图像被加载和调整大小之前解决what问题。 您返回将解析为''的 Promise 。
2. 您的onload回调有第二张image 。 canvas 将绘制这个空图像而不是加载的图像。

resizeImage(imageURL: any): Promise<any> {
    return new Promise((resolve) => {
      var image = new Image();
      image.onload = function () {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        if (ctx != null) {
          ctx.drawImage(image, 0, 0, 640, 480);  // <-- draw the right image!
        }
        var data = canvas.toDataURL('image/png', 0.5);
        resolve(data);   // <-- call it here!
      };
      image.src = imageURL;
    });
}