我有一个 ASP.NET MVC 项目,并且正在使用 Cropbox.js:jQuery 图像裁剪插件 - http://www.jqueryrain.com/demo/jquery-crop-image-plugin/裁剪用户的图像,但我找不到如何将裁剪后的图像发送到 Controller 。
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>
我尝试在 Controller 中使用以下内容,但由于我正在请求该文件,我不确定它是否可以工作:
HttpPostedFileBase file = Request.Files["Portrait"];
也许可以将 img 文件从 javascript 存储到模型中?
最佳答案
我的 friend 通过添加以下内容解决了这个问题:
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;
})
然后在 View 表单中使用不可见的输入:
<input type="hidden" id="avatarData" name="avatarData" value="">
现在我可以在 Controller 中捕获它:
var file = Request.Form["avatarData"];
我会得到:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA..."
要使用此字符串,有一个非常有用的问题和答案 - MVC Convert Base64 String to Image, but ... System.FormatException
关于javascript - 如何将 JavaScript 值从 View 传递到 Controller ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26151195/