6

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:

Div 851x315

Caso 1.1:

Redimensionar uma imagem de dimensões 1080x1920 para apresentação nesta div.

Imagem:

Imagem 1080x1920

Caso 1.2:

Redimensionar uma imagem de dimensões 1920x1080 para apresentação nesta div.

Imagem:

Imagem 1920x1080

Caso 2

Este caso utiliza a Div de dimensões 500x450

Div:

Div 500x450

Caso 2.1:

Redimensionar uma imagem de dimensões 1080x1920 para apresentação nesta div.

Imagem:

Imagem 1080x1920

Caso 2.2:

Redimensionar uma imagem de dimensões 1920x1080 para apresentação nesta div.

Imagem:

Imagem 1920x1080

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:

inserir a descrição da imagem aqui

Agora, a mesma imagem aplicada à div:

Onça na 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.

inserir a descrição da imagem aqui

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. :)

0

1 Resposta 1

6

Considerei para a resposta que a imagem deve preencher todo o espaço.

O código apresentado verifica somente a proporção da imagem original. Modifiquei o código para verificar as proporções da imagem e da <div> e recalcular as posições de "corte" de .drawImage().

O exemplo abaixo coloca a imagem em elementos <div> de diversos tamanhos.

(function(){
  var image = new Image();
  image.addEventListener('load', function(){
    var divs = document.querySelectorAll('div')
    // tamanho original
    , oWidth = this.width
    , oHeight = this.height;
    for (var i = 0; i < divs.length; i++) {
      var canvas = document.createElement('canvas')
      ,   ctx = canvas.getContext('2d')
      // coordenadas origem (source)
      ,   sx = 0
      ,   sy = 0
      ,   sWidth = oWidth
      ,   sHeight = oHeight
      // tamanho destino
      ,   dWidth = divs[i].offsetWidth
      ,   dHeight = divs[i].offsetHeight
      // tamanho ideal
      ,   iWidth = Math.round(sHeight / dHeight * dWidth)
      ,   iHeight = Math.round(sWidth / dWidth * dHeight);
      if (sWidth > iWidth) { // cortar na largura
        sx = parseInt((sWidth - iWidth) / 2);
        sWidth = iWidth;
      } else if (sHeight > iHeight) { // cortar na altura
        sy = parseInt((sHeight - iHeight) / 2);
        sHeight = iHeight;
      }
      canvas.width = dWidth;
      canvas.height = dHeight;
      ctx.drawImage(this, sx, sy, sWidth, sHeight, 0, 0, dWidth, dHeight);
      divs[i].appendChild(canvas);
    }
  }, false);
  image.src = 'https://i.stack.imgur.com/bY8Iy.png';
})();
div {
	margin: 5px;
	display: inline-block;
}
<div style="width: 200px; height: 300px;"></div>
<div style="width: 100px; height: 300px;"></div>
<div style="width: 315px; height: 200px;"></div>

1

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 .