как масштабировать изображение с помощью jquery - PullRequest
Новая
       43

как масштабировать изображение с помощью jquery

0 голосов
/ 13 августа 2011

Каков наилучший и самый быстрый способ масштабирования / изменения размера изображения, которое вставляется в файл PHP, который вызывается через AJAX с использованием jQuery?

Поэтому я пытаюсь убедиться, что изображение не обходитсяширина 600 пикселей и высота 410 пикселей, но я не хочу, чтобы изображение максимально увеличивало эти размеры и выглядело странно, оно должно отображаться так, как оно есть, но только в меньшем масштабе.

Также еслиесть способ, которым я могу сделать это с уже существующим Flash-скриптом, который был бы великолепен, но я не припоминаю ни одного хорошего, который был бы таким же простым, как тот, который Google использовал в сервисе Picasaweb.заранее

Ответы [ 3 ]

3 голосов
/ 13 августа 2011

Вот некоторые jQuery, которые работают: 

var max_size = 200;
$("img").each(function(i) {
  if ($(this).height() > $(this).width()) {
    var h = max_size;
    var w = Math.ceil($(this).width() / $(this).height() * max_size);
  } else {
    var w = max_size;
    var h = Math.ceil($(this).height() / $(this).width() * max_size);
  }
  $(this).css({ height: h, width: w });
});

Проверьте это в действии здесь: http://jsfiddle.net/QgDEk/

Оригинальный размер изображения огромен, но этот скрипт изменяет его размер.

Вот учебник .

2 голосов
/ 13 августа 2011

Свойства naturalWidth и naturalHeight DOM HTMLImageElement возвращают реальные размеры исходного изображения. 

if (imageElement.naturalWidth > imageElement.naturalHeight)
    imageElement.style.width = '600px';
else
    imageElement.style.height = '410px';

Обратите внимание, как в примерах код изменения размера помещается в обработчик load для изображения, так что он изменяет размер только тогда, когда доступна информация о размерах. В противном случае naturalWidth и naturalHeight равны нулю, что вызывает проблемы. Если вас смущает то, что изображение начинается с большого размера, затем сжимается, скрываете изображение по умолчанию, а затем отображаете его после изменения размера:

Нет необходимости ни в jQuery, ни во Flash;)

1 голос
/ 13 августа 2011

Вот пример с поддержкой максимальной ширины и высоты. 

// Set max width and height
var maxHeight = 50,
    maxWidth = 40;

// Create new image
myImage = new Image();
myImage.src = 'http://dummyimage.com/600x400/000/fff';

// On load of image
myImage.onload = function() {

    var width = myImage.width,
        height = myImage.height,
        ratio = Math.min(maxWidth / width, maxHeight / height);

    newWidth = parseInt(ratio * width);
    newHeight = parseInt(ratio * height);

    $('body').append('<p>Original: ' + width + ' x ' + height + '</p>');
    $('body').append('<p>Max: ' + maxWidth + ' x ' + maxHeight + '</p>');
    $('body').append('<p>Resized: ' + newWidth + ' x ' + newHeight + '</p>');

    // Add new image
    $('body').append($('<img>', {
        src: 'http://dummyimage.com/' + newWidth + 'x' + newHeight + '/000/fff',
        width: newWidth,
        height: newHeight,
        alt: "Test Image",
        title: "Test Image"
    }));
};
...