Как я могу изменить изображение с другим соотношением сторон? - PullRequest
Новая
       1

Как я могу изменить изображение с другим соотношением сторон?

0 голосов
/ 05 июня 2011

У меня есть следующий HTML-код: 

<img id="Card00" src="images/words/back.png" onclick="imageClicked(0,0);">

И следующий код Javascript: 

function ShowImage(id, row, column)
{
    var imagePath = 'images/words/' + id + '.png';
    var imgId = '#Card' + row + '' + column;

    $(imgId).attr('src', imagePath);
    var width = $(imgId).attr('width');
    var height = $(imgId).attr('height');

    if (width > height)
        $(imgId).attr('width', 200);
    else
        $(imgId).attr('height', 200);
}

imageClicked только звонки ShowImage.

Back.png - это 200х200.Я хочу изменить изображение back.png на другое.Этот другой (id + .png) больше, чем 200x200, поэтому мне нужно изменить его размер для функции ShowImage.

Но я не могу этого сделать, потому что я не могу получить его новую ширину и высоту вэтот фрагмент кода: 

var width = $(imgId).attr('width');
var height = $(imgId).attr('height');

Моя цель состоит в том, чтобы заменить back.png изображение другим, сохраняя аспектное радио.

И есть еще одна проблема: сначала я вижу увеличенное изображение,а затем, иногда, он получает 200x200.Я сказал иногда, потому что иногда я получаю его ширину или высоту.

Любой совет?

Ответы [ 2 ]

1 голос
/ 05 июня 2011

Лучше всего сначала загрузить изображение в память, а затем, когда оно загрузится, получить реальную высоту и ширину, использовать эту информацию - URL, высоту и ширину - для определения соответствующих размеров.Обратите внимание, что это не является надежной защитой, поскольку кеширование может испортить его.

Обратите внимание, что вы можете обобщить приведенное ниже, чтобы включить максимальные размеры в саму функцию, но я думаю, что она довольно легко адаптируется: 

// Example: replaceImage($("img#someID"), "http://example.com/logo.png");

var MAX_HEIGHT = 80;
var MAX_WIDTH = 80;

function keepAspectRatio(temp, $target, url) {
  // Get height and width once loaded
  var realHeight = temp.height;
  var realWidth = temp.width;

  // Get how much to divide by (1 if image fits in dimensions)
  // Get rid of ", 1" if you just want everything to be either
  // MAX_HEIGHT tall or MAX_WIDTH wide
  var factor = Math.max(realHeight/MAX_HEIGHT, realWidth/MAX_WIDTH, 1);
  realHeight /= factor;
  realWidth /= factor;

  // Set the target image's source, height and width
  $target.attr("src", url).css({height: realHeight, width: realWidth});
}

function replaceImage($target, url) {
  $("<img>").load(function() {
    keepAspectRatio(this, $target, url);
  }).attr("src", url);
}

Пример jsFiddle

РЕДАКТИРОВАТЬ

Поменялись местами attr и load согласно комментарию ниже.Я не собираюсь сходить с ума от оптимизации за ее пределами, поскольку то, что мы действительно сделали бы, если бы хотели, чтобы все было идеально, - это предварительно загрузить все, получить его реальные размеры и использовать эту информацию каждый раз, когда мы меняем исходное изображение.

0 голосов
/ 05 июня 2011

Вы пробовали: 

var width = $(imgId).clientWidth;
var height = $(imgId).clientHeight;
...