Skip to main content
2 de 2
adicionou 665 caracteres ao conteúdo
Aline
  • 1,7mil
  • 9
  • 21
<input type="file" id="inp-select-img" multiple="multiple" />
<div id="div-conteudo">
    <div id="div-imgs">
    </div>
</div>


    var _imgCarregando = new Image();
    var _arrayUrls = new Array();

    $(document).ready(function () {
        $("#inp-select-img").change(function (data) {
            $("#inp-select-img").html("");
            var countLocal = _arrayUrls.length;
            var indiceControle = _arrayUrls.length;
            $.each(data.target.files, function (indice, obj) {
                _arrayUrls.push({ "indice": countLocal, "url": obj, "type": obj.type });
                countLocal += 1;
            });
            carregarArquivo(_arrayUrls[indiceControle]);
        });
    });

    function carregarArquivo(obj) {
        if (obj) {
            if (obj.type.match('image.*')) {
                var url = window.URL.createObjectURL(obj.url);
                _imgCarregando.onload = function () {
                    var canvas = document.createElement("canvas");
                    canvas.height = 150;
                    canvas.width = this.width * canvas.height / this.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                    $("#div-imgs").append("<img height='150' class='img-editar' id=" + obj.indice + " src=''/>");
                    var arqFinal = canvas.toDataURL(obj.type, 1);
                    $("#" + obj.indice).attr("src", arqFinal);
                    window.URL.revokeObjectURL(url);
                    $('html, body').prop("scrollTop", $("#div-imgs").height());
                    carregarArquivo($.grep(_arrayUrls, function (objAbrir) { return objAbrir.indice == obj.indice + 1; })[0]);
                };
                _imgCarregando.src = url;
            }
        } else
            _imgCarregando = new Image();
    }

As imagens são carregadas uma a uma pra não dar estouro de memória na renderização. Existem outras formas de se renderizar uma thumb de uma imagem selecionada, como FileReader pra leitura, por exemplo, e renderização reduzida da propria imagem, entretanto, isso consume uma memória bastante considerável. Pensando no carregamento de várias imagens e nem tanto controle de tamanho do arquivo. A diferença do createObjectURL é que ele 'cria uma url' baseada no seu documento com os dados do arquivo e a chamada do revokeObjectURL logo a remove do seu relacionamento com a página e da sua necessidade de existência. Tive problema ainda com memória no FF, depois parei de ver, mas fiz um timeout qndo o navegador é FF pra continuar o carregamento e dar um tempinho de liberação da renderização.

Aline
  • 1,7mil
  • 9
  • 21