Decrease the size of a file (image) in PHP [duplicate]

0

I have a page that uploads images. However, there is a maximum size, a maximum number of KBs that, when exceeded, will not allow the upload to finish. I wonder if there is any way to decrease the size of the images (In KB) when they are chosen. When the image is selected, before transferring the file to the folder of my server, I would like the image size to be reduced, because when I exceed a certain size of KBytes, the upload is not finalized.  Thank you for your attention.

    
asked by anonymous 05.08.2016 / 19:56

2 answers

1

It is not possible to manipulate the image that is on the client side, within the context of the question.

Plugin

One option would be to install some plugin in the client browser and then through that plugin would run an image editing software previously installed on the client. This is an option that may be feasible for a small and restricted target audience. For a public environment is unfeasible. For both cases, the cost is high because you need to develop a plugin or you might be able to find a paid solution.

Non-Client Software

In a second option install software on the client only to upload the images. And in this software would communicate with some image editor or within the software itself to have such a resource. So with the first option, you can get it back from scratch or buy ready-made solutions.

Manual process

Another option is for the user to use an image editor software to make the image within the required standard. That is, a manual process. This is the most used because it is simple and with no additional costs.

    
05.08.2016 / 20:09
0

It is possible to manipulate the image on the client side and reduce it before sending it to the server, you use JavaScript with File API + Canvas API (HTML5) and Ajax (Ajax is optional, you can save the data from the generated image to a <input> or <textarea> hidden), as I described in this response link

<script type="text/javascript">
function compressImage(file, MAX_WIDTH, MAX_HEIGHT, format, response) {
    var img = document.createElement("img");

    var reader = new FileReader();    
    reader.onload = function(e) {
        img.src = e.target.result;

        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");

        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;

        ctx.drawImage(img, 0, 0, width, height);

        response(
            canvas.toDataURL("image/" + format).replace(/^data[:]image\/(.*);base64,/, "")
        );
    };
    reader.readAsDataURL(file);
}

function uploadAjax(data, fileName, success, error)
{
    var oReq = new XMLHttpRequest();

    oReq.open("POST", "upload.php?filename=" + fileName, true);
    oReq.onreadystatechange = function() {
        if (oReq.readyState === 4) {
            if (oReq.status === 200) {
                success(oReq.responseText);
            } else {
                error(oReq.status);
            }
        }
    };
    oReq.send(data);
}

function enviar() {
    var filesToUpload = document.getElementById('input').files;

    //Gerar imagem com tamanho normal
    compressImage(filesToUpload[0], 800, 600, "jpeg", function(resource) {
        uploadAjax(resource, filesToUpload[0].name, function(response) {
            if (response === "OK") {
                alert("sucesso");
            } else {
                alert("Ajax: " + response);
            }
        }, function(errStatus) {
            alert("erro: " + errStatus);
        });
    });

    //Gerar imagem com thumb
    compressImage(filesToUpload[0], 150, 150, "jpeg", function(resource) {
        uploadAjax(resource, filesToUpload[0].name.replace(/\.([a-zA-Z0-9]+)$/, "_thumb.$1"), function(response) {
            if (response === "OK") {
                alert("sucesso");
            } else {
                alert("Ajax: " + response);
            }
        }, function(errStatus) {
            alert("erro: " + errStatus);
        });
    });
}
</script>

<p>
    <input type="file" value="" id="input">
    <input type="button" value="Enviar" id="send">
</p>

<script type="text/javascript">
document.getElementById('send').onclick = enviar;
</script>

PHP should be something like ( link ):

<?php
define('PASTA_UPLOAD', '/home/user/projeto/data');

if (isset($_GET['filename']) && $_SERVER['REQUEST_METHOD'] === 'POST') {
    $cl = (int) $_SERVER['CONTENT_LENGTH'];

    $tmpFile = tempnam(sys_get_temp_dir(), '~upload-');

    $file = fopen($tmpFile, 'w');
    $fh   = fopen('php://input', 'r');
    if ($file && $fh) {
        $data = '';
        while (FALSE === feof($fh)) {
            $data .= fgets($fh, 256);
        }
        fwrite($file, base64_decode($data));
    }

    if ($file) {
        fclose($file);
    }

    if ($fh) {
        fclose($fh);
    }

    echo 'OK';
    copy($tmpFile, PASTA_UPLOAD . '/' . $_GET['filename']);
} else {
    echo 'Requisição inválida';
}
    
05.08.2016 / 20:30