Compressor de imagens em Javascript
Bem, continuando meus estudos neste que promete ser meu ultimo semestre de faculdade faço esta postagem sobre Javascript. este código aqui consiste num compressor de imagens mais simples que pudemos fazer(claro, não fiz sozinho)., para não ficar enrolados. note cabe tudo no próprio html sem ter mais nenhum arquivo copie e cole que funciona.
<html>
<head>
<meta charset="UTF-8">
<title>Compressão de Imagens</title>
<script>
var canvas;
var imageData;
//Pega a Imagem do input, Redimensiona o Canvas e Desenha a Imagem.
function loadImage() {
var input, file, fr, img;
//Pega o input.
input = document.getElementById('imgfile');
//recebe file image
file = input.files[0];
//cria FileReader, pra ler o arquivo file.
fr = new FileReader();
//onload chama a função createImage
fr.onload = createImage;
fr.readAsDataURL(file);
//Cria a Imagem que vai ser inserida no Canvas.
function createImage() {
img = new Image();
//onload recebe a função imageLoaded
img.onload = imageLoaded;
img.src = fr.result;
}
//Redimensiona o Canvas e insere a Imagem.
function imageLoaded() {
canvas = document.getElementById("canvas")
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
imageData = ctx.getImageData(0, 0, img.width, img.height);
//Informações da Imagem original: Altura, Largura e Tamanho.
document.getElementById("info1").innerHTML = "Altura: "+img.height+", Largura: "+img.width+" | Tamanho: "+imageData.data.length+" bytes";
}
}
function comprimir (){
var imgSemAlfa=[];
var imgFinal=[];
var count = 0;
//Remove o Alfa da Imagem.
for (i = 0; i < imageData.data.length; i++ ) {
if(count !=3 ){
imgSemAlfa.push(imageData.data[i]);
count++
}else{
count = 0;
}
}
var x = 0;
//Inseri o Alfa na Imagem pra ser exibida.
for (var i = 0; i < imgSemAlfa.length; i++) {
if(x == 2){
imgFinal.push(imgSemAlfa[i]);
imgFinal.push(255);
x = 0;
}else{
imgFinal.push(imgSemAlfa[i]);
x++;
}
}
//Redimensiona o outro Canvas e insere a Imagem.
var canvasComprimido = document.getElementById("canvas2");
canvasComprimido.width = canvas.width;
canvasComprimido.height = canvas.height;
var ctxComprimido = canvasComprimido.getContext("2d");
imageData.data.set(imgFinal);
ctxComprimido.putImageData(imageData, 0, 0);
//Informções da Imagem Comprimida: Tamanho e Taxa de Compressão.
document.getElementById("info2").innerHTML = "Tamanho: "+imgSemAlfa.length+" bytes | Taxa de Compressão: "+(imageData.data.length/imgSemAlfa.length)+"%";
}
</script>
</head>
<body>
<input type='file' id='imgfile' onchange="loadImage()" accept="image/*"/>
<br>
<canvas id="canvas" style="border:3px solid #fb1212;"></canvas>
<p id="info1"></p>
<input type="button" value="Comprimir|Descomprimir" onclick="comprimir()">
<br>
<canvas id="canvas2" style="border:3px solid #fb1212;"></canvas>
<p id="info2"></p>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>Compressão de Imagens</title>
<script>
var canvas;
var imageData;
//Pega a Imagem do input, Redimensiona o Canvas e Desenha a Imagem.
function loadImage() {
var input, file, fr, img;
//Pega o input.
input = document.getElementById('imgfile');
//recebe file image
file = input.files[0];
//cria FileReader, pra ler o arquivo file.
fr = new FileReader();
//onload chama a função createImage
fr.onload = createImage;
fr.readAsDataURL(file);
//Cria a Imagem que vai ser inserida no Canvas.
function createImage() {
img = new Image();
//onload recebe a função imageLoaded
img.onload = imageLoaded;
img.src = fr.result;
}
//Redimensiona o Canvas e insere a Imagem.
function imageLoaded() {
canvas = document.getElementById("canvas")
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
imageData = ctx.getImageData(0, 0, img.width, img.height);
//Informações da Imagem original: Altura, Largura e Tamanho.
document.getElementById("info1").innerHTML = "Altura: "+img.height+", Largura: "+img.width+" | Tamanho: "+imageData.data.length+" bytes";
}
}
function comprimir (){
var imgSemAlfa=[];
var imgFinal=[];
var count = 0;
//Remove o Alfa da Imagem.
for (i = 0; i < imageData.data.length; i++ ) {
if(count !=3 ){
imgSemAlfa.push(imageData.data[i]);
count++
}else{
count = 0;
}
}
var x = 0;
//Inseri o Alfa na Imagem pra ser exibida.
for (var i = 0; i < imgSemAlfa.length; i++) {
if(x == 2){
imgFinal.push(imgSemAlfa[i]);
imgFinal.push(255);
x = 0;
}else{
imgFinal.push(imgSemAlfa[i]);
x++;
}
}
//Redimensiona o outro Canvas e insere a Imagem.
var canvasComprimido = document.getElementById("canvas2");
canvasComprimido.width = canvas.width;
canvasComprimido.height = canvas.height;
var ctxComprimido = canvasComprimido.getContext("2d");
imageData.data.set(imgFinal);
ctxComprimido.putImageData(imageData, 0, 0);
//Informções da Imagem Comprimida: Tamanho e Taxa de Compressão.
document.getElementById("info2").innerHTML = "Tamanho: "+imgSemAlfa.length+" bytes | Taxa de Compressão: "+(imageData.data.length/imgSemAlfa.length)+"%";
}
</script>
</head>
<body>
<input type='file' id='imgfile' onchange="loadImage()" accept="image/*"/>
<br>
<canvas id="canvas" style="border:3px solid #fb1212;"></canvas>
<p id="info1"></p>
<input type="button" value="Comprimir|Descomprimir" onclick="comprimir()">
<br>
<canvas id="canvas2" style="border:3px solid #fb1212;"></canvas>
<p id="info2"></p>
</body>
oi Rodrigo achei muito interesante seu codigo com compresso de imagens com js , eu suo novo nesse mundo do javascript vc poderia me ajuda a fazer uma auteração no codigo q inves de
ResponderExcluirso exibi a imagens comprimida ele tbm faça o donwloand dele
des de já agrade por compartilha o codigo :)