将 HTML 图像元素转换为 base64 图像，同时采用内联宽度和高度

Question

我正在使用ng2-img-cropper(https://www.npmjs.com/package/ng2-img-cropper)。它提供的设置使得当从输入中选择文件时，它将base64 url应用于HTML中的图像标签，同时采用"cropperSettings"，例如定义的宽度和高度。

但是，我有一个要求，我需要生成两个图像而不是一个。大图像和小图像。大图像为 500x500，而小图像为 200x200。我创建了两个"裁剪器设置"，以便HTML内联宽度和高度显示两种大小。但是，两者的 src 属性仍然相同。在本例中，它们都是 500x500。

javascript 是否可以抓取一个 html img 元素(将 base64 作为 src 属性)并将其转换为 base64 图像，但使用内联高度和宽度，而不是 src 图像的高度和宽度？(在本例中，下面的第三个图像标记 - 使用较小的高度和宽度设置)

.HTML

<img-cropper #cropper [image]="data1" [settings]="cropperSettings1"></img-cropper>
<img id="largeImage" [src]="data1.image" [width]="cropperSettings1.croppedWidth" [height]="cropperSettings1.croppedHeight">
<img id="thumbnailImage" [src]="data1.image" [width]="cropperSettings2.croppedWidth" [height]="cropperSettings2.croppedHeight">

裁剪器设置

// This is for the large image (500x500)
this.cropperSettings1 = new CropperSettings();
this.cropperSettings1.width = 200;
this.cropperSettings1.height = 200;
this.cropperSettings1.croppedWidth = 500;
this.cropperSettings1.croppedHeight = 500;
this.cropperSettings1.canvasWidth = 500;
this.cropperSettings1.canvasHeight = 500;
this.cropperSettings1.minWidth = 500;
this.cropperSettings1.minHeight = 500;
this.cropperSettings1.rounded = false;
this.cropperSettings1.cropperDrawSettings.strokeColor = 'rgba(255,255,255,1)';
this.cropperSettings1.cropperDrawSettings.strokeWidth = 2;
this.cropperSettings1.noFileInput = true;
this.cropperSettings1.keepAspect = true;
this.data1 = {};
// This is for the small image
this.cropperSettings2 = new CropperSettings();
this.cropperSettings2.croppedWidth = 200;
this.cropperSettings2.croppedHeight = 200;

检测到文件时触发的函数

var image: any = new Image();
var file: File = event.target.files[0];
var myReader: FileReader = new FileReader();
var that = this;
myReader.onloadend = (loadEvent: any) => {
image.src = loadEvent.target.result;
that.cropper.setImage(image);
};
myReader.readAsDataURL(file);

Answer 1

正如文档中所说(您应该在专注时阅读，而不仅仅是即时阅读)，您可以自己处理文件上传。

这意味着您可以上传文件，创建 2 个 base64 图像，并将它们影响到相应的裁剪器(或对它做任何您想做的事情。

但我不明白你的问题，因为一旦上传了图像，您就可以简单地使用相同的来源并根据自己的方便调整图片大小。
裁剪器将创建一个新图像，因此它不会更改 base64 源。