Изменение размера изображения Javascript
Кто-нибудь знает, как пропорционально изменять размер изображений с помощью JavaScript?
Я пытался изменить DOM, добавляя атрибуты height и width на лету, но, похоже, не работал в IE6.
Я просто изменяю размер одного из измерений, а другое измерение автоматически изменяется пропорционально :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 13
Вместо изменения атрибутов высоты и ширины изображения попробуйте изменить высоту и ширину 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;
Чтобы изменить изображение пропорционально, просто измените только одно из свойств css ширины / высоты, а для другого оставьте значение auto.
image.style.width = '50%'
image.style.height = 'auto'
Это гарантирует, что его соотношение сторон останется прежним.
Имейте в виду, что браузеры склонны к сосать при изменении размера изображений - вы, вероятно, обнаружите, что ваше изображение с измененным размером выглядит ужасно.
возможно, добавьте рекламное объявление об изменении размера изображения перед загрузкой на сервер
Пробовал следующий код, работал нормально в 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.
хорошо, это решено, вот мой последний код
if ($(this).width() > $(this).height()) {
$(this).css('width',MaxPreviewDimension+'px');
$(this).css('height','auto');
} else {
$(this).css('height',MaxPreviewDimension+'px');
$(this).css('width','auto');
}
Спасибо ребята
Между прочим, если вы не установили высоту изображения (атрибут height или через CSS), вам не нужно явно устанавливать height: auto - он установлен по умолчанию
нет, когда я изменяю ширину, не устанавливая высоту автоматически, это не удалось в IE6
Странно, я уверен, что делал это раньше, и это работает. В любом случае, я верю вам на слово :) Вы можете применить эту height: auto в таблице стилей, хотя
Я попробовал это на IE6 Win XP SP3, изображение 297px x 169px и изменил ширину до 100px, но высота осталась прежней, но, вероятно, JQuery добавит его автоматически, я постараюсь выяснить.
Насколько я понимаю, в jQuery $ () является конструктором класса. Это означает, что этот код всегда будет создавать четыре обертки для «this», тогда как одна будет делать, если вы сохраните ее в переменной. У меня даже может возникнуть соблазн сохранить $ (this) в переменной уровня класса в вашем конструкторе.
Джоэл, вы правы, но эти блочные коды являются частью цикла, поэтому $ (this) здесь относится к самому изображению как к объекту
var target = $(this); if (target.width() > target.height()) target.css({ "width": MaxPreviewDimension + "px", "height": "auto" }); else target.css({ "height": MaxPreviewDimension + "px", "width": auto })
function resize_image(image, w, h) {
if (typeof(image) != 'object') image = document.getElementById(image);
if (w == null || w == undefined)
w = (h / image.clientHeight) * image.clientWidth;
if (h == null || h == undefined)
h = (w / image.clientWidth) * image.clientHeight;
image.style['height'] = h + 'px';
image.style['width'] = w + 'px';
return;
}
просто передайте ему либо элемент img DOM, либо идентификатор элемента изображения, а также новые ширину и высоту.
или вы можете передать его либо только ширину, либо только высоту (если только высоту, то передайте ширину как null или undefined), и он изменит размер, сохраняя соотношение сторон
Использовать 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);
}
Попробуй это..
<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. Нажмите "Отправить". Вы получите изображение с измененным размером. Укажите путь к изображению вместо точек в теге изображения.
Вам не обязательно делать это с помощью Javascript. Вы можете просто создать класс CSS и применить его к своему тегу.
.preview_image{
width: 300px;
height: auto;
border: 0px;
}
Пример: как изменить размер в процентах
<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>
для изменения размера изображения в javascript:
$(window).load(function() {
mitad();doble();
});
function mitad(){
imag0.width=imag0.width/2;
imag0.height=imag0.height/2;
}
function doble(){
imag0.width=imag0.width*2;
imag0.height=imag0.height*2;}
imag0 - это имя изображения:
<img src = "xxx.jpg" name = "imag0">
Спасибо, это код, который я мог понять и использовать. Одна странная вещь, которую я обнаружил, заключается в том, что изменение ширины было единственным, что мне нужно было сделать, чтобы уменьшить масштаб изображения (если бы я затем изменил высоту, это фактически сгладило бы / исказило изображение).
У меня ответил этот вопрос здесь: Как пропорционально изменить размер изображения / сохранить соотношение сторон?. Я копирую его сюда, потому что считаю это очень надежным методом :)
/**
* 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 };
}
Это работает во всех случаях.
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);
}
}
}
Вот мое решение для заполнения обложки (похоже на background-size: cover, но поддерживает старый браузер IE)
<div class = "imgContainer" style = "height:100px; width:500px; overflow:hidden; background-color: black">
<img src = "http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id = "imgCat">
</div>
<script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
$(window).load(function() {
var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();
if (window.console) {
console.info($("#imgCat").height());
console.info(heightRate);
console.info(widthRate);
console.info(heightRate > widthRate);
}
if (heightRate <= widthRate) {
$("#imgCat").height($("#imgCat").parent(".imgContainer").height());
} else {
$("#imgCat").width($("#imgCat").parent(".imgContainer").width());
}
});
</script>
Для тех, кто хочет изменить размер перед загрузкой: stackoverflow.com/questions/2434458/…