8

Tenho um upload de imagens e para tratar as imagens já usei (ImageWorkShop e Imagine), porém o problema não são as bibliotecas, é a quantidade absurda de memória que é usada em algumas situações.

Imagens testadas:

Imagem 01 (1920x1080 1,27MB JPG); 
Imagem 02 (4134x2362 132KB PNG);

Tenho o seguinte código teste para upload (library ImageWorkShop está comentada):

<?php

require 'vendor/autoload.php';

use PHPImageWorkshop\Core\Exception\ImageWorkshopLayerException;
use PHPImageWorkshop\Core\ImageWorkshopLayer;
use PHPImageWorkshop\Exception\ImageWorkshopException;
use PHPImageWorkshop\ImageWorkshop;
use Imagine\Image\Box;

if (isset($_FILES['imagem'])) {
    echo "Uso de memoria no inicio:".memory_get_usage(true)." bytes <br>";
    $file = $_FILES['imagem'];

    //$imagem = ImageWorkshop::initFromPath($file['tmp_name']);
    //$imagem->save( realpath(dirname(__FILE__)) . DIRECTORY_SEPARATOR .'images', sha1(uniqid(rand(), true)) . '.' . explode('/', $file['type'])[1], true, null, 70);
    //$imagemThumb = $imagem;
    //$imagemThumb->resizeInPixel(470, 350, true);
    //$imagemThumb->save(realpath(dirname(__FILE__)) . DIRECTORY_SEPARATOR . 'images', sha1(uniqid(rand() , true)) . '_t.' . explode('/', $file['type'])[1], true, null, 70);

    $imagine = new Imagine\Gd\Imagine();

    $savePath = realpath(dirname(__FILE__)) . DIRECTORY_SEPARATOR . 'images' . DIRECTORY_SEPARATOR;
    $extension = explode('/', $file['type'])[1];
    $name = sha1(uniqid(rand(), true));
    $options = [];

    switch($extension) {
        case 'png':
            $options['png_compression_level'] = 9;
            break;
        case 'jpg':
        case 'jpeg':
            $options['jpeg_quality'] = 70;
            break;
    }

    $imagine->open($file['tmp_name'])->save($savePath.$name. '.' .$extension, $options)->resize(new Box(470, 350))->save($savePath.$name . '_t' . '.' .$extension, $options);

    echo "Uso de memoria no final:".memory_get_usage(true)." bytes <br>";
    echo "O Pico de memoria:".memory_get_peak_usage(true)." bytes<br>";
}
?>

<html>
<body>
    <form enctype="multipart/form-data" method="POST">
        <input type="file" name="imagem" >
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Resultado de memória "Imagem 01":

Uso de memoria no inicio:262144 bytes (0.25 MB)
Uso de memoria no final:12320768 bytes (11.75 MB)
O Pico de memoria:13107200 bytes (12.5 MB)

Resultado de memória "Imagem 02":

Uso de memoria no inicio:262144 bytes (0.25 MB)
Uso de memoria no final:30670848 bytes (29.25 MB)
O Pico de memoria:90963968 bytes (86.75 MB)

OBS: De uma library para outra não muda muito o consumo, são relativamente parecidos...

Gostaria de saber quais são os motivos de consumir essa quantidade de memória absurdamente alto e o que eu poderia fazer para diminuir esse consumo?

3
  • Se possível, você poderia formular um exemplo @GuilhermeNascimento ? 8/05/2015 às 18:35
  • @GuilhermeNascimento O que tenho medo é, que em testes acontece isso... e mais para frente serão muitas... muitas requisições que podem vir ao mesmo tempo e acabar estourando para o cliente... :/ não sei se realmente aconteceria, mas quero me precaver dessa situação... 8/05/2015 às 18:38
  • @GuilhermeNascimento ótimo :) gostaria de ver um exemplo, quando você tiver um tempinho... quero analisar certinho e tentar implementar aqui 8/05/2015 às 18:45

1 Resposta 1

9

O consumo é alto mesmo pois além da leitura da imagem na memória ela é "decodificada" e estes dados decodificados também ficam na memória, podemos dizer que é quase impossível reduzir o pico do uso de memoria, mas ao final do processo provavelmente deve haver um método "destruct" nestas classes que você utilizou que deve facilitar.

Note que a partir do PHP5.3 passou a usar Coletor de Lixo, portanto ele mesmo administra o uso, você não vai conseguir forçar liberar a memoria, mas consegue facilitar a vida do Coletor de Lixo setando NULL em algumas variáveis não usadas por exemplo. Quando tiver tempo talvez eu tente formular uma resposta mais detalhada.

Nota: Uma experiencia pessoal, o GD ao carregar as imagens consumia muita memoria e imagens com EXIF (mesmo sem mudança de qualidade ou tamanho) causavam um consumo de memória muito maior que o normal, o que muitas vezes excedia a memoria, causando o seguinte erro:

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 14032 bytes) in /var/www/project/thumb.php on line 10

O que eu recomendo é fazer a compactação ou gerar os tipos diferentes de tamanhos no front-end usando / (e talvez um fallback com ).

Usando HTML5 para compactar

O navegador terá que ter suporte há:

  • Ajax (e hoje quem não tem?)
  • File API (api do javascript para manipulador dados/blob, etc)
  • Canvas

Nota: Editei o código, pois o window.atob falhava ao converter o base64

Um exemplo seria algo como (não testei o comportamento com dados "binários") desta resposta do SOen:

Nota: O exemplo a seguir faz o upload e gera uma "miniatura" da imagem original

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

O PHP deve ser algo como (https://pt.stackoverflow.com/a/50982/3635):

<?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';
}

Realmente não tive tempo de testar o código, mas acredito que funcione como o esperado

8
  • Hoje, já uso ajax para o envio do arquivo, realmente no exemplo não utilizei pois queria apenas demonstrar o estouro de memória... assim que possível vou utilizar seu código e testar, obrigado. Aguardo seu exemplo com File API também :) 8/05/2015 às 20:27
  • @RafaelWithoeft adicionado exemplo com blob e melhorado o PHP
    – Reptile
    9/05/2015 às 17:30
  • Obrigado, ainda essa semana implemento a sua sugestão e aviso do resultado aceitando sua resposta 11/05/2015 às 12:33
  • Olá Guilherme, estou fazendo alguns testes aqui, porém estou com algumas dúvidas/problemas, você pode me ajudar? 14/05/2015 às 11:21
  • @RafaelWithoeft Tem como você criar uma sala de bate-papo aqui na questão, acho que aparece um link pra ti.
    – Reptile
    14/05/2015 às 16:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .