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

Question

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

但是，我有一个要求，我需要生成两张图像而不是一张。一张大图和一张小图。大图为 500x500，小图为 200x200。我创建了两个“cropperSettings”，以便 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

正如documentation 中所说的（您应该集中精力阅读，而不是只是即时阅读），您可以自行处理文件上传。

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

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