Как изменить размер изображения с javascript в реагирующей дропзоне перед загрузкой их на сервер - PullRequest
Новая
       43

Как изменить размер изображения с javascript в реагирующей дропзоне перед загрузкой их на сервер

0 голосов
/ 06 марта 2020

В настоящее время я использую Reaction-Dropzone ^ 4.2.1 с реагировать-изображение-файл-resizer. Проблема в том, что после того, как я изменил размеры изображений, зона пропуска стала пустой, а файл, отправленный на сервер, все еще слишком велик. this. 

Utils.resizeImageUpload=(image, func) => {
  Resizer.imageFileResizer(
    image,
    50,
    50,
    'PNG',
    50,
    0,
    uri => {
      func(image, Utils.dataURLtoFile(uri, image.name));
    },
    'base64'
  );
}

Utils.dataURLtoFile = (dataurl, filename) => {

  let arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), 
    n = bstr.length, 
    u8arr = new Uint8Array(n);

  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, {type:mime});
}

Просьба игнорировать значение width = 50, height = 50. Я просто пытаюсь отладить. Код dataURLtoFile копируется из другого стекового потока для преобразования в javascript Файловый объект.

Теперь мой вопрос: когда я отлаживаю resizedImg, он успешен при меньших размерах, но дропзона каким-то образом теряет предварительный просмотр. Я думаю, причина в том, что input.value [0] удаляется и заменяется на resizedImg. Как это исправить?

Во-вторых, почему файл, отправляемый обратно на сервер, остается исходным изображением?

...