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

Question

So I'm trying to resize an image client-side before submitting a form, and then appending it to the form.

Currently I have this:

<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>

Images are added and removed dynamically - so there may be none at all or 20.

I put together this (which resizes images and seems to work correctly):

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);
    }
}

When I submit this - initially it seems to be working correctly. But on the server-side validation the image is the same size as the original, even when cropped from 3000x3000px to 1200x1200px. Almost as if it's still uploading the original.

Do I need to remove the source before appending this new resized image? Am I doing it correctly at the moment? I need to reproduce a normal image selection as I have no control over the server-side handling. Hopefully this is possible!

Answer 1

I noticed this post only now while solving the same problem. It is NOT POSSIBLE to replace the user selected input of type 'file' with a resized one. For security reasons browsers do not allow this. The form is posted using HTTP POST which is synchronous. According to some articles, altered image should be posted asynchronously. All examples use XHR or Ajax for this. Possible solution seems to be like this: 1) Resize the image and convert canvas to dataUrl or blob; 2) Either add a new hidden field to your form or move image upload outside the form; 3) Use XHR or Ajax to post the resized image; 4) Either remove name attribute from the original input of 'file' type (this will prevent its submission) or ignore server-side; 5) On a server decode dataUrl and save the image in your upload folder.