Изменение размера изображения перед загрузкой в ​​HTML 5

Question

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

блоб выглядит следующим образом: данные: изображение/JPEG; base64,/9J/4AAQSkZJRgABAQAAAQAB .....

 var file = e.target.files[0]; 
     canvasResize(file, { 
      width: 300, 
      height: 0, 
      crop: false, 
      quality: 80, 
      //rotate: 90, 
      callback: function (data, width, height) { 
       // How to assign the data blob back to the file? 
       //$(file).attr('src', data); 

      // THEN submit with the smaller photo 
      $('#PhotoForm').ajaxSubmit(options); 
      } 
     }); 

Спасибо!

Answer 1

Если вы остаетесь застрявшим с canvasResize, существует множество других библиотек, управляющих изображениями. Раньше я использовал Pixastic, но имел большие накладные расходы, чем canvasResize. Это better documented.

Answer 2

Я закончил тем, что просто добавил blob в скрытое поле в форме и отправил его. Сохранение того, что в качестве изображения из C# было выполнено с помощью:

 var regex = new Regex(@"data:(?<mime>[\w/]+);(?<encoding>\w+),(?<data>.*)", RegexOptions.Compiled); 
     var match = regex.Match(input.ImageBlob); 
     var mime = match.Groups["mime"].Value; 
     var encoding = match.Groups["encoding"].Value; 
     var data = match.Groups["data"].Value; 
     byte[] imagedata = Convert.FromBase64String(data); 

     Image img = byteArrayToImage(imagedata); 

     img.Save("someimagename.jpg");