正确的方法来调整图像大小并附加到HTML表单？

Question

所以我在提交表单之前尝试调整客户端图像的大小，然后将其附加到表单中。

目前我有这个：

<form method="post" action="abc.php">
    <input id="image-1" type="file" name="image-1" onchange="resizeImage('image-1')">
    <input id="image-2" type="file" name="image-2" onchange="resizeImage('image-2')">
    <input type="submit" value="Submit">
</form>

动态添加和删除图像 - 因此可能根本没有或20。

我把它放在一起（调整图像大小并且似乎正常工作）：

function resizeImage(inputID) {
    //Read in file
    var file = event.target.files[0];

    //Ensure it's an image
    if (file.type.match(/image.*/)) {
        // Load the image
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {

                // Resize the image
                var canvas = document.createElement('canvas'),
                    max_size = 1200,
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);

                document.getElementById(inputID).src = canvas.toDataURL('image/png');
            };
            image.src = readerEvent.target.result;
        };
        reader.readAsDataURL(file);
    }
}

当我提交这个 - 最初它似乎正常工作。 但在服务器端验证时，即使从3000x3000px裁剪为1200x1200px，图像也与原始图像大小相同。 几乎就像它还在上传原版。

在添加此新调整大小的图像之前是否需要删除源？ 我现在正确地做到了吗？ 我需要重现正常的图像选择，因为我无法控制服务器端处理。 希望这是可能的！

Answer 1

我在解决同样的问题时才注意到这篇文章。 用调整大小的文件替换用户选择的'file'类型的输入是不可能的。 出于安全考虑，浏览器不允许这样做。 表单使用HTTP POST发布，这是同步的。 根据一些文章，改变的图像应该异步发布。 所有示例都使用XHR或Ajax。 可能的解决方案似乎是这样的：1）调整图像大小并将画布转换为dataUrl或blob; 2）在表单中添加新的隐藏字段或在表单外移动图像上传; 3）使用XHR或Ajax发布已调整大小的图像; 4）从'file'类型的原始输入中删除name属性（这将阻止其提交）或忽略服务器端; 5）在服务器上解码dataUrl并将图像保存在上传文件夹中。