Javascript Image Resize - PullRequest
Новая
       20

Javascript Image Resize

43 голосов
/ 04 октября 2008

Кто-нибудь знает, как пропорционально изменить размер изображения с помощью JavaScript?

Я пытался изменить DOM, добавляя атрибуты height и width на лету, но, похоже, не работал в IE6.

Ответы [ 13 ]

65 голосов
/ 04 октября 2008

Для пропорционального изменения изображения, просто измените только одно из свойств css ширины / высоты, оставьте для другого установленное значение auto. 

image.style.width = '50%'
image.style.height = 'auto'

Это гарантирует, что его соотношение сторон остается неизменным.

Имейте в виду, что браузеры имеют тенденцию сосать при правильном изменении размеров изображений - вы, вероятно, обнаружите, что ваше измененное изображение выглядит ужасно.

18 голосов
/ 04 октября 2008

хорошо, это решено, вот мой окончательный код 

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}

Спасибо, ребята

6 голосов
/ 04 октября 2008

Вместо изменения атрибутов высоты и ширины изображения, попробуйте изменить высоту и ширину CSS. 

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

Одна распространенная «ошибка» заключается в том, что стили высоты и ширины - это строки, содержащие единицу, например «px» в приведенном выше примере.

Редактировать - я думаю, что установка высоты и ширины напрямую вместо использования style.height и style.width должна работать. Это также имело бы преимущество того, что уже имеет исходные размеры. Можете ли вы опубликовать немного своего кода? Вы уверены, что находитесь в стандартном режиме, а не в режиме причуд?

Это должно работать: 

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
5 голосов
/ 20 октября 2013

Я ответил на этот вопрос здесь: Как изменить размер изображения пропорционально / с сохранением соотношения сторон? . Я копирую это здесь, потому что я действительно думаю, что это очень надежный метод:) 

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }
4 голосов
/ 04 октября 2008

Попробовал следующий код, нормально работал на IE6 на WinXP Pro SP3. 

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

Также хорошо в FF3 и Opera 9.26.

3 голосов
/ 18 декабря 2012

Пример: как изменить размер в процентах 

<head>
    <script type="text/javascript">
        var CreateNewImage = function (url, value) {
            var img = new Image;
            img.src = url;
            img.width = img.width * (1 + (value / 100));
            img.height = img.height * (1 + (value / 100));

            var container = document.getElementById ("container");
            container.appendChild (img);
        }
    </script>
</head>
<body>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 40);">Zoom +40%</button>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 60);">Zoom +50%</button>
    <div id="container"></div>
</body>
2 голосов
/ 28 марта 2014

Это работает для всех случаев. 

function resizeImg(imgId) {
    var img = document.getElementById(imgId);
    var $img = $(img);
    var maxWidth = 110;
    var maxHeight = 100;
    var width = img.width;
    var height = img.height;
    var aspectW = width / maxWidth;
    var aspectH = height / maxHeight;

    if (aspectW > 1 || aspectH > 1) {
        if (aspectW > aspectH) {
            $img.width(maxWidth);
            $img.height(height / aspectW);
        }
        else {
            $img.height(maxHeight);
            $img.width(width / aspectH);
        }
    }
}
2 голосов
/ 16 марта 2012

Вам не нужно делать это с Javascript. Вы можете просто создать класс CSS и применить его к своему тегу. 

.preview_image{
        width: 300px;
    height: auto;
    border: 0px;
}
1 голос
/ 19 января 2012

Попробуйте это .. 

<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>

<h2>Norwegian Mountain Trip</h2>
<img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>

</body>
</html>

В текстовом поле укажите размер по желанию в формате 50 * 60. Нажмите отправить. Вы получите изображение с измененным размером. Укажите путь к изображению вместо точек в теге изображения.

1 голос
/ 09 марта 2010

Использовать JQuery 

var scale=0.5;

minWidth=50;
minHeight=100;

if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight)
{
    $("#id img").width($("#id img").width()*scale);
    $("#id img").height($("#id img").height()*scale);
}
Страница:
...