Изменение размера изображения на стороне клиента с помощью Flask FileField-Form с использованием JavaScript - PullRequest
Новая
       194

Изменение размера изображения на стороне клиента с помощью Flask FileField-Form с использованием JavaScript

0 голосов
/ 12 июля 2020

Я хочу изменить размер загружаемого пользователем изображения в WTform с помощью FileField. Это нужно делать на стороне клиента. Мне удалось изменить размер изображения, используя следующий javascript, но я не знаю, как заменить исходное изображение новым измененным размером, когда пользователь отправляет форму. 

var fileReader = new FileReader();
var filterType = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

fileReader.onload = function (event) {
  var image = new Image();
  
  image.onload=function(){
      var canvas=document.createElement("canvas");
      var context=canvas.getContext("2d");
      canvas.width=image.width/4;
      canvas.height=image.height/4;
      context.drawImage(image,
          0,
          0,
          image.width,
          image.height,
          0,
          0,
          canvas.width,
          canvas.height
      );
      
      document.getElementById("FILE").value = canvas.toDataURL();
  }
  image.src=event.target.result;
};

var loadImageFile = function () {
  var uploadImage = document.getElementById("FILE");
  
  //check and retuns the length of uploded file.
  if (uploadImage.files.length === 0) { 
    return; 
  }
  
  //Is Used for validate a valid file.
  var uploadFile = document.getElementById("FILE").files[0];
  if (!filterType.test(uploadFile.type)) {
    alert("Please select a valid image."); 
    return;
  }
  
  fileReader.readAsDataURL(uploadFile);
}

Я пробовал перезаписать, используя 

document.getElementById("FILE").value = canvas.toDataURL();

, но это не работает ... есть идеи? Спасибо

...