Já achei diversas explicações sobre, mas nenhuma conclusiva. É possível determinar o tamanho (em bytes) de uma imagem após ela ser carregada e utilizando Javascript? Aparentemente a segurança dos navegadores impediria-nos de puxar essa informação via XMLHttpRequest dando erro na cross domain request, existe uma maneira de transpassar essa limitação?
-
Se a imagem não estiver no seu domínio é pra dar "problema" de cross domain request mesmo. Se não fosse assim, teríamos sérios problemas de segurança - mas note que alguns servidores permitem a requisição inter-domínios em alguns casos. Se a imagem estiver no mesmo domínio então é tranquilo acessar a imagem. Espero que, para esse caso, você obtenha uma resposta boa aqui ;) – Garoto de Programa 16/07/14 às 14:20
Recuperar dados de imagens no disco local:
Para navegadores que suportem HTML5/CSS3, é possível de acordo com o código a seguir:
HTML:
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
Javascript:
// var url = window.URL || window.webkitURL; // alternate use
function readImage(file) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~(file.size/1024) +'KB';
$('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
};
image.onerror= function() {
alert('Invalid file type: '+ file.type);
};
};
}
$("#choose").change(function (e) {
if(this.disabled) return alert('File upload not supported!');
var F = this.files;
if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
A linha s = ~~(file.size/1024) +'KB';
lhe dá o tamanho em bytes.
Veja esse link para um demo.
Usei como referência essa resposta do stackoverflow em inglês.
Recuperar dados de imagem carregada a partir de uma URL:
A seguir é mostrado um exemplo simples que mostra propriedades de uma imagem recuperada de uma URL, sem mostrar o tamanho:
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
Essa resposta também é retirada de um link do stackoverflow em inglês.
Segundo esse link do stackoverflow em inglês, não é possível recuperar o tamanho de uma imagem na página, via javascript, apenas via server side. Veja que a resposta foi marcada como correta.
-
Esse método só é possível localmente, eu precisava de uma maneira de calcular o peso com a imagem já carregada na página, ou a partir da url da mesma. – perguntador2000 16/07/14 às 14:59
-
-
Veja que não é possível calcular o tamanho localmente. Caso isso tenha respondido a sua pergunta, por favor, a marque como tal "ticando" o check verde a esquerda da questão. Por favor, de um upvote na questão caso já não o tenha feito. Obrigado :) – EduardoFernandes 17/07/14 às 4:34