Превратите HTML-элемент изображения в изображение base64, применяя встроенную ширину и высоту - PullRequest
Новая
       17

Превратите HTML-элемент изображения в изображение base64, применяя встроенную ширину и высоту

0 голосов
/ 18 мая 2018

Я использую ng2-img-cropper (https://www.npmjs.com/package/ng2-img-cropper).. Он обеспечивает настройки, так что когда файл выбирается из входных данных, он применяет URL base64 к тегу изображения в HTML, в то время как принимает 'cropperSettings', например,как определенную ширину и высоту.

Однако у меня есть требование, когда мне нужно сделать два изображения вместо одного: большое изображение и маленькое изображение. Большое изображение будет 500x500, в то время как маленькоеизображение будет размером 200x200. Я создал два параметра 'cropperSettings', чтобы значения ширины и высоты HTML-кода отображали оба размера. Однако атрибут src для обоих одинаков. В этом случае они оба имеют размер 500x500.

Можно ли с помощью javascript получить элемент html img (у которого base64 является атрибутом src) и превратить его в изображение base64, но с использованием встроенных высоты и ширины, в отличие от высоты и ширины изображения src? (В этом случае3-й тег изображения ниже - Использование меньших настроек высоты и ширины)

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);

1 Ответ

0 голосов
/ 18 мая 2018

Как сказано в документации (которую вы должны читать, находясь в фокусе, а не просто читать на лету), вы можете обрабатывать загрузку файла самостоятельно.

Это означает, что вы можете загрузить файл, создать 2 изображения base64 и привязать их к соответствующим кадрам (или сделать с ним что угодно.

Но я не понимаю вашу проблемупотому что после загрузки изображения вы можете просто использовать тот же источник и изменить его размер для вашего удобства.
Обрезчик создаст новое изображение, поэтому он не изменит источник base64.

...