0

我正在使用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);
4

1 回答 1

0

正如文档中所说（您应该集中精力阅读，而不是只是动态阅读），您可以自己处理文件上传。

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

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

于 2018-05-18T10:44:10.253 回答