можноли определить размер картинки JS

353

01 августа 2007 года

840 / / 04.01.2007

Вижу 2,5 варианта. :-)
1) окно подгоняется под размер картинки после того как картинка в нем загрузилась, соответственно будут известны размеры изображения
2) определять размер серверным скриптом и передавать в js
3) можно попробовать создать объект Image и установить у него поле src на картинку и когда она будет загружена будут известны размеры. Правда не уверен, что данный метод может работать.

1 спам

312

01 августа 2007 года

392 / / 26.11.2006

Цитата:

1) окно подгоняется под размер картинки после того как картинка в нем загрузилась, соответственно будут известны размеры изображения

неподходит так мне нужно изменять окно, а не избражение

Цитата:

2) определять размер серверным скриптом и передавать в js

ну до такого я и сам додумался. собственно говоря мне придется использовать этот метод.
мне просто хотелось что бы все було в одной JS фуекции, но рас так нельзя значит нельзя:(

01 августа 2007 года

mfender

3.5K / / 15.06.2005

Я дико извиняюсь, но есть вопрос: просвятите, пожалуйста, как средствами JavaScript узнать размер изображения? Я, видимо, многое пропустил...

353

01 августа 2007 года

840 / / 04.01.2007

Цитата: mfender

Так:

Код:

<img src="1.png" &#111;&#110;load="alert(this.width+'x'+this.height);" />

Или так:

Код:

<script><!-- //

var img = new Image();

img.onload = function() { alert(this.width+'x'+this.height); };

img.src = "1.png";

//--></script>

01 августа 2007 года

mfender

3.5K / / 15.06.2005

А разиве размер не определяется параметрами тэга img width и height ???

353

01 августа 2007 года

840 / / 04.01.2007

Цитата: mfender

А разиве размер не определяется параметрами тэга img width и height ???

Странный вопрос.
Определяется. Именно они и использованны в примерах. Но если в тэге эти параметры не указаны, то в этих параметрах будет оригинальный размер изображения, что нам и нужно.

312

01 августа 2007 года

392 / / 26.11.2006

Свернуть исходник

Код:

var img = new Image();

img.src = "1.png";

img.onload = winOpen(this.src,this.width,this.height,'title');

function winOpen(url,widthPic,heightPic,title){

 // формируем окно с картинкой

 option = 'toolbar=no,directories=no,menubar=no,status=no,scrollbars=no,width='+widthPic+',height='+heightPic+',top=150,left=200,location=no,resizable=no';

 WinImage = window.open('win_image.htm','win',option);

 WinImage.document.write('<html>\n<head>\n <title>'+title+'</title>\n</head>\n');

 WinImage.document.write('<body leftmargin="0" topmargin="0" style="padding:0;margin:0">\n');

 WinImage.document.write('<img src="'+url+'" width="'+widthPic+'" height="'+heightPic+'">\n</body>\n</html>');

}

01 августа 2007 года

mfender

3.5K / / 15.06.2005

Да, посмотрел в DOM-инспекторе. Действительно, есть параметры Width и Height, а также сlientWidth и сlientHeight, и ещё scrollWidht и scrollHeight.

Thanks, буду знать!

353

01 августа 2007 года

840 / / 04.01.2007

Цитата: dead_star

Свернуть исходник

Код:

var img = new Image();

img.src = "1.png";

img.onload = winOpen(this.src,this.width,this.height,'title');

function winOpen(url,widthPic,heightPic,title){

 // формируем окно с картинкой

 option = 'toolbar=no,directories=no,menubar=no,status=no,scrollbars=no,width='+widthPic+',height='+heightPic+',top=150,left=200,location=no,resizable=no';

 WinImage = window.open('win_image.htm','win',option);

 WinImage.document.write('<html>\n<head>\n <title>'+title+'</title>\n</head>\n');

 WinImage.document.write('<body leftmargin="0" topmargin="0" style="padding:0;margin:0">\n');

 WinImage.document.write('<img src="'+url+'" width="'+widthPic+'" height="'+heightPic+'">\n</body>\n</html>');

}

Да, только:

Код:

var img = new Image();

img.onload = function() { winOpen(this.src,this.width,this.height,'title'); };

img.src = "1.png";

312

02 августа 2007 года

392 / / 26.11.2006

Цитата: Nixus

Да, только:

var img = new Image();
img.onload = function() { winOpen(this.src,this.width,this.height,'title'); };
img.src = "1.png";

спасибо за помощь. очень выручил

-1 спам

312

02 августа 2007 года

392 / / 26.11.2006

если кому интересно полный код программы:

Свернуть исходник

Код:

<img src="images/map_min.png" &#111;&#110;Click="createImage('images/map.png','Карта проезда')">

..

..

<script language="javascript">

function createImage(url,title){

 var img = new Image();

 img.onload = function(){ winOpen(this.src,this.width,this.height,title); };

 img.src = url;

}

function winOpen(url,width_img,height_img,title){

 var top = 0;

 var left = 0;

 var scrinHeight = 0;

 var scrinWidth = 0;

 var title_img = '';

 // определяем размер экрана

 if (self.screen){

  scrinWidth = screen.width

  scrinHeight = screen.height

 } else if (self.java){

  var jkit = java.awt.Toolkit.getDefaultToolkit();

  var scrsize = jkit.getScreenSize();

  scrinWidth = scrsize.width;

  scrinHeight = scrsize.height;

 }

 // проверяем размер экрана меньше чем картинка

 // если да то пропорционально ее уменьшаем

 if (scrinWidth > 0 && scrinHeight > 0){

  if (scrinWidth < width_img){

   procent = scrinWidth/(widthPic/100);

   height_img = (height_img/100)*procent;

   height_img = (height_img/100)*98;

   width_img = (scrinWidth/100)*98;

   left = (scrinWidth - width_img)/2;

   left = left-(left/2);

   top = '30';

  } else {

   left = (scrinWidth - width_img)/2;

   top = '150';

  }

 } else {

  alert('Неудалось определить экранное разрешение');

  left = '250';

  top = '150';

 }

 // проверка на наличие title

 if ((title == '') || (title == undefined)){

  title = 'image';

 } else {

  title_img = ' title="'+title+'"';

 }

 // формируем окно с картинкой

 option = 'toolbar=no,directories=no,menubar=no,status=no,scrollbars=no,width='+width_img+',height='+height_img+',top='+top+',left='+left+',location=no,resizable=no';

 WinImage = window.open('win_image.htm','win',option);

 WinImage.document.write('<html>\n<head>\n <title>'+title+'</title>\n</head>\n');

 WinImage.document.write('<body leftmargin="0" topmargin="0" style="padding:0;margin:0">\n');

 WinImage.document.write('<img src="'+url+'"'+title_img+'>\n</body>\n</html>');

}

</script>

код работает автономно, правдо не очень быстро
отдельное спасибо Nixus