Problema
Redimensionamento de imagem com JavaScript
Possível solução
Utilizar o elemento canvas para redesenhar a imagem, redimensioná-la e depois renderizar a imagem novamente.
Abaixo serão citados 2 casos de uso meramente ilustrativos, pois os tamanhos das imagens não serão fixos como esses, sendo utilizados somente para ilustrar a orientação (retrato/paisagem) da imagem.
Caso 1
Este caso utiliza a Div de dimensões 851x315
Div:
Caso 1.1:
Redimensionar uma imagem de dimensões 1080x1920 para apresentação nesta div.
Imagem:
Caso 1.2:
Redimensionar uma imagem de dimensões 1920x1080 para apresentação nesta div.
Imagem:
Caso 2
Este caso utiliza a Div de dimensões 500x450
Div:
Caso 2.1:
Redimensionar uma imagem de dimensões 1080x1920 para apresentação nesta div.
Imagem:
Caso 2.2:
Redimensionar uma imagem de dimensões 1920x1080 para apresentação nesta div.
Imagem:
Lógica utilizada:
O redimensionamento não deve ser feito com intuito de modelar a imagem para caber na div, mas sim mantendo a proporcionalidade de suas dimensões, até que uma destas se iguale à uma das dimensões da div.
O bloco de código abaixo é auto explicativo:
if (alturaImagem <= larguraImagem) {
proporcao = alturaDiv / alturaImagem;
novaLarguraImagem = larguraImagem * proporcao;
novaAlturaImagem = alturaDiv;
} else {
proporcao = larguraDiv / larguraImagem;
novaLarguraImagem = larguraDiv;
novaAlturaImagem = alturaImagem * proporcao;
}
O problema de utilizar este código e um elemento canvas para redimensionar a imagem é que, logo após o processo, há uma queda grande da qualidade da imagem, dependendo da sua resolução.
Se for uma imagem de dimensões próximas à da div, quase não haverá queda na qualidade da mesma, mas se a diferença for muito grande (exemplo: redimensionar uma imagem de dimensões 7680x4320 para uma div de dimensões 851x315) a qualidade da imagem cai demais e isso fica bem aparente.
Após fazer várias pesquisas sobre isto, encontrei um post no SOen, que ensina a fazer o redimensionamento, utilizando um método chamado step-down, que ao meu entender significa redução passo-a-passo (me corrijam se não for isso), há uma fórmula pra calcular o número de passos que será usado, como explicado no post linkado.
Meu código:
var file, img, width, height, ratio, nWidth, nHeight;
var _URL = (window.URL) ? window.URL : window.webkitURL;
if ((file = e.target.files[0])) {
img = new Image();
img.src = _URL.createObjectURL(file);
img.onload = function () {
width = this.width;
height = this.height;
// Criação do primeiro elemento canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// Altura e largura da div
tWidth = $("div#mp-change-bg").width();
tHeight = $("div#mp-change-bg").height();
// Criação do segundo elemento canvas, que será manipulado off-screen
var oc = document.createElement("canvas");
var octx = oc.getContext("2d");
oc.width = width * 0.5;
oc.height = height * 0.5;
// 1º passo
octx.drawImage(this, 0, 0, oc.width, oc.height);
// 2º passo
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
// Definição das novas dimensões da imagem
if (height <= width) {
ratio = tHeight / height;
canvas.width = width * ratio;
canvas.height = tHeight;
} else {
ratio = tWidth / width;
canvas.width = tWidth;
canvas.height = height * ratio;
}
// 3º e último passo
ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, canvas.width, canvas.height);
$("img#mp-image-bg").attr("src", canvas.toDataURL("image/png")).css("display", "block");
};
}
Fiz o código praticamente baseado na resposta que foi dada no post do SOen, e este é funcional para o Caso 2 citado no início do post.
A imagem abaixo é a original:
Agora, a mesma imagem aplicada à div:
Como podem ver, estou utilizando um plugin para reposicionar a imagem na div, com drag and drop. Independente da orientação da imagem usada, ela é redimensionada corretamente, com exceção do Caso 1, também citado no início do post.
Utilizando a mesma imagem da onça, olhem o resultado.
A imagem ao invés de redimensionada, foi esticada totalmente. O problema pode ter a ver com o número de passos à utilizar, até porque através do cálculo, o resultado encontrado é 0, ou seja, não é pra utilizar passo nenhum, mas mesmo omitindo os passos e redimensionando direto, o resultado é o mesmo.
Peço desculpas se o post ficou muito extenso, mas tentei ser o mais claro possível expondo meu problema.
Qualquer dúvida, ou se faltou algo, peçam nos comentários. :)