Как изменить размер изображения, чтобы новое свойство src было сгенерировано с новой шириной и высотой? - PullRequest
Новая
       38

Как изменить размер изображения, чтобы новое свойство src было сгенерировано с новой шириной и высотой?

1 голос
/ 07 июня 2019

Я работаю над сайтом Angular, над селектором изображений (чтобы создать миниатюру с заданным размером).Я использую ввод файла для пользователя, чтобы загрузить его файл, затем я улавливаю событие, делаю некоторую проверку (формат и размер) и обрабатываю его изменение размера.Но в настоящее время это вообще не работает.

Я действительно обещаю, что преобразую цель FileInput в изображение base64, а затем использую его для создания объекта Image (), чтобы получить доступ к ширине изображенияи высота.

Я изменяю свойства img.width и img.height и создаю обратно FileInput с моим img.src.

Я не могу этого сделать, однако хочу, чтобыЯ использую ngx-image-cropper, и мне действительно нужно вставить изображение с измененным размером в обрезку.(ngx-image-cropper accepts FileEvent or Base64 img url)

// Proceed to the image resizing
  resizeImg(img) {
    if (img.width && img.height) {
      if (img.height > img.width && img.height > 280) {
        const coef = 280 / img.height;
        img.width = img.width * coef;
        img.height = img.height * coef;
      } else if (img.width > img.height && img.width > 280) {
        const coef = 280 / img.width;
        img.height = img.height * coef;
        img.width = img.width * coef;
      }
    }
    console.log(img.width);
    console.log(img.height);
    return img;
  }

  // Creates back the FileInput
  imageToFileInput(src, filename, imgType) {
    return fetch(src)
      .then(function(res) {
        return res.arrayBuffer();
      })
      .then(function(buf) {
        return new File([buf], filename, { type: imgType });
      });
  }

  // Promise that creates an Image() object with file's base64 url
  createImg(url) {
    return new Promise(function(res, rej) {
      const img = new Image();

      img.onload = function() {
        res(img);
      };
      img.src = url;
    });
  }

  // Promise that generate the image file's base64 url
  retrieveBase64Url(file) {
    return new Promise(function(res, rej) {
      const reader = new FileReader();

      reader.onload = function() {
        res(reader.result);
      };
      reader.readAsDataURL(file);
    });
  }

  // Manages format/size errors then add file to cropper
  fileProcess(fileInput: any) {
    const file = fileInput.target.files[0];

    this.preview = false;
    if (
      file &&
      file.type !== 'image/png' &&
      file.type !== 'image/jpg' &&
      file.type !== 'image/jpeg'
    ) {
      // Format error gesture
      this.sizeError = false;
      this.formatError = true;
    } else if (file && file.size / 1000000 > this.maxSize) {
      // Size error gesture
      this.formatError = false;
      this.sizeError = true;
    } else {
      this.fileName = file.name;

      // Process to image resizing, apply it to file and then push it to the cropper
      this.retrieveBase64Url(file).then(url => {
        this.createImg(url).then(img => {
          const resized_img = this.resizeImg(img);
          this.imageToFileInput(resized_img.src, 'resized.png', 'image/png').then(result => {
            this.imageChangedEvent = { target: { files: [result] } };
            this.formatError = false;
            this.sizeError = false;
          });
        });
      });
    }
  }

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

...