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不是同一个图像。事实上，它不再是作为图像发布的。如果你走这条路，我会完全忘记文件上传。将图像输入文件输入后，创建隐藏输入并将数据URL粘贴到该输入中。现在POST一组隐藏的输入（作为字符串）而不是HttpPostedFileBase。在你的路线中，取出这些字符串并将其转换回图像，然后再保存它们或者你想要做的任何事情。

调整图像客户端的大小，并将其传递给带有表单数据的asp mvc控制器

1 个答案: