Как передать значение JavaScript из View в Controller?

Question

У меня есть проект ASP.NET MVC, и я использую Cropbox.js: jQuery Image Crop Plugin - http://www.jqueryrain.com/demo/jquery-crop-image-plugin/, чтобы обрезать изображение пользователя, но я не могу найти, как получить обрезанное изображение на контроллер.

JavaScript выглядит следующим образом:

<script type="text/javascript"> 
    window.onload = function() { 
     var options = 
     { 
      imageBox: '.imageBox', 
      thumbBox: '.thumbBox', 
      spinner: '.spinner', 
      imgSrc: 'avatar.png' 
     } 
     var cropper; 
     document.querySelector('#file').addEventListener('change', function() { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       options.imgSrc = e.target.result; 
       cropper = new cropbox(options); 
      } 
      reader.readAsDataURL(this.files[0]); 
      this.files = []; 
     }) 
     document.querySelector('#btnCrop').addEventListener('click', function() { 
      var img = cropper.getAvatar() 
      document.querySelector('.cropped').innerHTML += '<img id="Portrait" src="' + img + '">'; 
     }) 
     document.querySelector('#btnZoomIn').addEventListener('click', function() { 
      cropper.zoomIn(); 
     }) 
     document.querySelector('#btnZoomOut').addEventListener('click', function() { 
      cropper.zoomOut(); 
     }) 
    }; 
</script> 

Я пытался использовать следующее в контроллере, но так I'm запроса файла, I'm не уверен, что это может даже работать:

HttpPostedFileBase file = Request.Files["Portrait"]; 

Возможно, можно будет сохранить img-файл с javascript в модель?

Answer 1

Мой друг решил, добавив следующее:

document.getElementById('avatarData').value = img; 

В этой части сценария:

document.querySelector('#btnCrop').addEventListener('click', function() { 
     var img = cropper.getAvatar()     
     document.querySelector('.cropped').innerHTML += '<img src="' + img + '">';    
     //new added 
     document.getElementById('avatarData').value = img; 
    }) 

Затем используется Неизменный вход в Вид:

<input type="hidden" id="avatarData" name="avatarData" value=""> 

Теперь я могу поймать его в контроллер:

var file = Request.Form["avatarData"]; 

И я буду получать:

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA..." 

Для работы с этой строкой, есть очень полезный вопрос & ответ - MVC Convert Base64 String to Image, but ... System.FormatException

Answer 2

Я не знаю Crop плагин JQuery изображения, но я думаю, что вам нужно сделать что-то вроде этого:

Получить байт на изображение, в преобразовывать их в base64, а затем отправить их к действию ViewController с помощью Ajax После.

Answer 3

i что вы можете использовать AjaxForm или HtmlForm и нажимать на любое действие. Затем используйте FormCollection и следите за своими значениями. Например, в моем генераторе Captcha я переопределить некоторые действия для фильтра:

public class CaptchaValidator : ActionFilterAttribute 
    { 
     public override void OnActionExecuting(ActionExecutingContext filterContext) 
     { 
      RegisterViewModel model = filterContext.ActionParameters["model"] as RegisterViewModel; 
      if (filterContext.HttpContext.Session["Captcha"] == null || filterContext.HttpContext.Session["Captcha"].ToString() != model.Captcha) 
      { 
       filterContext.ActionParameters["captchaValid"] = false; 
      } 
      else 
      { 
       filterContext.ActionParameters["captchaValid"] = true; 
      } 
      base.OnActionExecuting(filterContext); 
     } 
    } 

и использовать в контроллере:

[CaptchaValidator] 
public async Task<ActionResult> Register(RegisterViewModel model, bool captchaValid) 

Я думаю, что вы можете здесь изменения bool captchaValid к вашему byte[].

Я надеюсь, что это может помочь вам :-)