调整客户端图像的大小，并将其与表单数据一起传递给asp MVC控制器

Question

我试图在将图像传递给我的控制器之前调整图像客户端大小(上传的图像将很大，其中许多)。

我已经环顾四周，发现这个正在讨论在各种线程。在采取了一些解决方案并试图将它们应用到我的场景之后，我意识到我需要更多的帮助。

我允许用户向站点添加多个文件，但由于这些文件(图像)的大小，当我试图进行Ajax调用时，我发现我正在获得错误

超过最大请求长度。

所以我决定在将它们传递给服务器之前减少它们在客户端的大小。下面的代码似乎没有效果，我看到这是创建一个新图像，而不是改变正在传递的图像。如何减小传递的图像的大小?

我也对这个问题的替代解决方案持开放态度，我想避免插件，因为它们对于"简单"的图像调整大小似乎有点OTT

下面是我的代码:

myPartialView。cshtml

<input class="imgInput" type="file" name="FileUpload" multiple accept="image/jpeg" />
@Html.HiddenFor(m => m.Rooms[i].RoomID)

myJavascript.js

$("#accordion").on("change", ".imgInput", function (e) {
    var roomID = $(this).siblings("input:hidden").val();
    var images = $(".imgInput");
    // from an input element
    var filesToUpload = images[0].files;
    var file = filesToUpload[0];
    var img = document.createElement("img");
    var reader = new FileReader();
    reader.onload = function (e) { img.src = e.target.result }
    reader.readAsDataURL(file);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var MAX_WIDTH = 800;
    var MAX_HEIGHT = 600;
    var width = img.width;
    var height = img.height;
    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    var dataurl = canvas.toDataURL("image/jpg");
    $("#roomIdentifier").val(roomID);
    var formData = new FormData(jQuery('#takeOn').get(0)) // store form data to pass on to the controller
    var test = JSON.parse(JSON.stringify(jQuery('#takeOn').serializeArray()));
    $.ajax({
        type: "POST",
        url: "/Property/_RoomImage",
        contentType: false,
        data: formData,
        dataType: 'html',
        encode: true,
        async: true,
        processData: false,
        cache: false,
        success: function (data) {
            $("#accordion").html(data);
        },
        error: function (request, status, error) {
            alert("Error: " + request)
            alert("Error: " + status)
            alert("Error: " + error)
        }
    });
    //clear input value
    var input = $(this);
    input.replaceWith(input.val('').clone(true));
    //clear identifier
    $("#roomIdentifier").val('');
});

myControllerForPartialView.cs

[HttpPost]
public ActionResult _RoomImage(TakeOn to, IEnumerable<HttpPostedFileBase> FileUpload)
{
    /*does some stuff*/
    return PartialView("_Rooms", to);
}

Answer 1

一个选项可能是增加该路由的最大请求大小?如果你想在整个应用中增加它，你可以只对那条路由增加它。特别是当图像的数量是任意的;即使缩小它们，最终也可能超过请求的大小。

但是如果你想坚持调整大小，那么是的，你是正确的——写到画布，然后获得dataURL是不相同的图像。事实上，它不再作为图像POST了。如果你走这条路，我将完全忘记文件上传。当将图像输入到文件输入中时，创建一个隐藏输入并将数据URL粘贴到该输入中。现在POST这些隐藏输入的集合(作为字符串)而不是HttpPostedFileBase。在你的路由中，把这些字符串转换回图像然后再保存它们或者你想要做的任何事情