如何使用 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);
    });
}

不幸的是，这种方法在它要进入的元素中给了我一个损坏的 link。尽管 console.log 打印出与工作字符串相似的 base64 字符串，但图像没有显示。

任何人都可以帮我弄清楚这件事有什么问题吗？

Answer 1

您的 resizeImage 函数存在多个问题。

您在加载图像和调整大小之前解决了 what。您 return 一个将解析为 ''.
您 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;
    });
}

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

How Can I Resize an Image In Angular Using the Canvas?

javascript

image

typescript

angular