Автоматическое уменьшение картинки

celerons · 24 Мар 2008

также можно использовать этот код

var s=document.getelementById('images_id').width

if (s>450){document.GetElementById('img').width = '100';}

Думаю, пример понятен. Также можно обращаться document.links[0] . Язык javaScript.

Выше написаный скрипт можен например зделать в функцие и вызывать по нажатию на какуюто кнопочку, а вообще мой тебе совет, учи AJAX. Через него такие реквесты можно посылать, красотища.

Tretiy · 25 Мар 2008

Да вы что? Человек только html знает, а вы ему такие классы. Что он с ними будет делать? Скорее javascript, а как по мне, то вообще задавать жестко размер картинки, если она большая. А пока работает так, понимать, что это не очень хорошо и учить php. Больше нет нормального выхода.

celerons · 25 Мар 2008

Уважаемый Tretiy. Если человек чего-то не знает, ето не значит, что он не может етого узнать. Я думаю, любой, даже начинающий пользователь, может подружится с поисковиком.

Black#FFFFFF · 26 Мар 2008

"+" яваскриптового подхода - можно вытворять что угодно с картинками в клиенте, без нагрузки на сервер, задавая миллион правил и тысячи изменений в зависимости от действий пользователя

Тут есть свои "-" по поводу юзабилити джаваскрипта:
1. Если картинку можно со стороны сервера сжать и положить в папку, а потом вытягивать маленькую картинку раз за разом - это предпочтительнее, на мой взгляд, чем "подсказывать" браузеру о ее размере (высота - ширина) в этот раз. И по объему в мб такая картинка уже меньше.
2. Кроссбраузерность. Версии браузеров и прочее.
3. Отсутствие поддержки яваскрипта клиентом вообще.

А по примеру выше - во первых синтаксис неправильный на яваскрипте.
Во вторых можно немного более общий вариант написать
Пример хтмл я - с комментариями и яваскрипта который умеет "налету" масштабировать картинки по заданным размерам - а так же примеры как же "ограничить" картинку с помощью html css и прочего (кому интересно) :

Код:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru"/>
  <title>Пример чего можно сделать с помощью яваскрипта - как "уменьшать" картинки "налету"</title>
<script type="text/javascript">
//<![CDATA[
/*
Black#FFFFFF aka Lammer
я не буду учитывать всех аспектов кроссбраузерности, это просто пример, пример который
будет корректно работать под ie6.0 - 7.0, firefox 2.0, остальное оставляю на ваше усмотрение
корректировка была сделана в сторону - Читабельности кода а не проиводительности
писалось с коленки - приветствую доработку)
авторские права - форумчанам
функции занимаются масштабированием рисунков без их искажений
v 0.001
*/

nameNR = 'nR'; /*задаем в тэге img name равное значению этой переменной (в любом количестве тэгов) и эти картинки не будут изменены в размерах */
/*setAllImagesWidthHeight принимает ограничения для  ВСЕХ рисунков по ширине высоте на странице */
function setAllImagesWidthHeight(width,height){
     var imgs = document.getElementsByTagName('img');
     if(imgs&&imgs.length){
         for(var i=0;i<imgs.length;i++)
         {
            if(imgs[i].name != nameNR&&imgs[i].width&&imgs[i].height&&(imgs[i].width>width||imgs[i].height>height)){
                resizeImage(imgs[i],width,height);
            }

         }

     }
}
/*устанавливает ширину и высоту для заданного рисунка через его свойства */

function setCurrentImageWidthHeight(id,width,height){
        var imgs = document.getElementById(id);
        if(imgs&&imgs.width&&imgs.height&&(imgs.width>width||imgs.height>height)){
            makeCache(imgs);
            resizeImage(imgs,width,height);

        }

}
function resizeImage(imgs,width,height)
{
            if(imgs.width>width){
                imgs.height  = Math.floor((width/imgs.width) * imgs.height);
                imgs.width   = width;

                    if(imgs.height>height){
                          imgs.width   = Math.floor((height/imgs.height) * imgs.width);
                          imgs.height  = height;
                    }

            }
            if(imgs.height>height){
                 imgs.width   = Math.floor((height/imgs.height) * imgs.width);
                 imgs.height  = height;

                    if(imgs.width>width){
                            imgs.height  = Math.floor((width/imgs.width) * imgs.height);
                            imgs.width   = width;
                    }


           }


}
/* не обращаем внимание - эта функция и массив занимаются просто "возвращением элементов в первозданную среду - возвращают первоначальный width и height*/

Cache = new Array();

function makeCache(elem)
{
Cache[elem.id]        = new Array();
Cache[elem.id].width  = elem.width;
Cache[elem.id].height = elem.height;

}
function releazeCache(elem)
{
elem.width  = Cache[elem.id].width;
elem.height = Cache[elem.id].height;
}
//]]>
</script>
</head>

<body>
      <center><em>Работает в IE 7.0 (теоретически 6.0), Mozilla Firefox 2.0, OPERA 9.0)
      Наведите на первые два рисунка мышкой - они итак были уменьшены с помощью яваскрипта от своих оригинальных размеров. С помощью общей функции (Смотрите Код) - но их можно уменьшать еще и по свойствам! (немного знания яваскрипта и вашей фантазии - путь я указал)) Наведите на последний. Он не был уменьшен и не будет уменьшаться. </em>
      </center><br clear="both">
      <table>
        <tr>
            <td>
                  <img id='img1' src="post-13-12065216973143.jpg" onmouseover="setCurrentImageWidthHeight(this.id,150,125)" onmouseout="releazeCache(this)" title="Наведите на Меня мышкой!"/>
            </td>
            <td>
                  <img id='img2' src="b5768d97e4f6.jpg" onmouseover="setCurrentImageWidthHeight(this.id,150,150)" onmouseout="releazeCache(this)" title="Наведите на Меня мышкой!"/>
            </td>
      </tr>
      <tr>
            <td colspan="2">
                  <img id='img3' name='nR' id='img3' src="post-13-12065216973143.jpg" title="А на меня бестолку!"/>
            </td>
      </tr>
      <tr>
            <td colspan="2">
                А вот  пример как сделать это html (ну уж совсем без масштабирования - жестоко! - чистым html - указываем в параметре тэга img width и height соответственно):
                <br clear="both">
                <img  id='img5' name='nR' width="200" height="200" src="post-13-12065216973143.jpg" title="А меня жестоко согнули html ем!"/>

            </td>
      </tr>
      <tr>
            <td colspan="2">
                А этот  пример как сделать это css (в ИЕ 6.0 не будет работать, требует поддержки max-width, max-height):
                <br clear="both">
                <style>
                 .cssim{
                     max-width: 200px;
                     max-height: 200px;
                 }

                </style>
                <img  name='nR' width="200" height="200" src="post-13-12065216973143.jpg" title="А меня контролирует css!" class="cssim"/>

            </td>
      </tr>

      </table>
      <script type='text/javascript'>
      //<![CDATA[
      /* Замечание - примините функцию тогда и только тогда, когда уверены, что все рисунки уже загрузились, например - в конце документа, или же по событию window.onload*/
      window.onload = setAllImagesWidthHeight(200,200);
      //]]>
      </script>
      <noscript>
        К сожалению ваш браузер не поддерживает яваскрипт, либо яваскрипт запрещен в настройках. Разрешите его пожалуйста для верного отображения примера.
      </noscript>
</body>

</html>

Пример можно посмотреть здесь:
Для просмотра ссылки Войди или Зарегистрируйся
В примере на сайте так же добавлено поле, в котором можно задать ширину картинки и применить ее к картинке без перезагрузки страницы.

Вообще не знаю насколько оправдан подход Аякс + Ресайз картинок

Где и зачем сие нужно?)

ortega3000 · 26 Мар 2008

Самый простой способ - указывать ширину картинки в процентах от контейнера. Например:

HTML:

<html><body>
<table width="150">
<tr>
<td>
<img src="01-05.jpg" width="100%">
</td>
</tr>
</table>
</body></html>

В этом случае картинка будет смасштабирована до такого размера, чтобы ее ширина составляла 100% от ширины того контейнера, в котором она расположена. Т.е. 150 пикселей. Если картинка более 150 пикс, то она уменьшится. Если же больше - то увеличится. Можете поэкспериментировать с кодом, чтобы убедиться.

XJIOP · 27 Мар 2008

PHP:

<?php
# Constants
define(IMAGE_BASE, '/var/www/blablabla/');
define(MAX_WIDTH, 150);
define(MAX_HEIGHT, 150);
define(DEF_QUALITY, 100);

# Get image location
$image_file = str_replace('..', '', $_SERVER['QUERY_STRING']);
$image_path = IMAGE_BASE . "/$image_file";

# Load image
$img = null;
$ext = strtolower(end(explode('.', $image_path)));
if ($ext == 'jpg' || $ext == 'jpeg') {
    $img = @imagecreatefromjpeg($image_path);
} else if ($ext == 'png') {
    $img = @imagecreatefrompng($image_path);
# Only if your version of GD includes GIF support
} else if ($ext == 'gif') {
    $img = @imagecreatefromgif($image_path);
}

# If an image was successfully loaded, test the image for size
if ($img) {

    # Get image size and scale ratio
    $width = imagesx($img);
    $height = imagesy($img);
    $scale = min(MAX_WIDTH/$width, MAX_HEIGHT/$height);

    # If the image is larger than the max shrink it
    if ($scale < 1) {
        $new_width = floor($scale*$width);
        $new_height = floor($scale*$height);

        # Create a new temporary image
        $tmp_img = imagecreatetruecolor($new_width, $new_height);

        # Copy and resize old image into new image
        imagecopyresized($tmp_img, $img, 0, 0, 0, 0,
                         $new_width, $new_height, $width, $height);
        imagedestroy($img);
        $img = $tmp_img;
    }
}

# Create error image if necessary
if (!$img) {
    $img = imagecreate(MAX_WIDTH, MAX_HEIGHT);
    imagecolorallocate($img,0,0,0);
    $c = imagecolorallocate($img,70,70,70);
    imageline($img,0,0,MAX_WIDTH,MAX_HEIGHT,$c2);
    imageline($img,MAX_WIDTH,0,0,MAX_HEIGHT,$c2);
}

# Display the image
header("Content-type: image/jpeg");
imagejpeg($img, null, DEF_QUALITY);
?>

UnixLike · 27 Мар 2008

Это если через GD, что для новичка в РНР весьма не простая штука.
На самом деле, я бы реализовал это через программу ImageMagick. На любом приличном хосте она имеется.
В ImageMagick всё то, о чём Вы говорите, сделать можно одной строчкой:

convert input.jpg -resize 450 output.jpg

Dez1 · 27 Мар 2008

удалено

Cornelius · 15 Апр 2008

У меня тоже такая проблема. В интернет магазине нужно сделать ресайз картинок. Т. е. я заливаю картинку с произвольным разрешением. Картинка используется трех размеров: превью в категории, картинка в описании данного товара и картинка при нажатии кнопки Увеличение (реальный размер). Так вот, хотелось бы, чтобы в превью картинка выводилась в формате 95*80. Если ее родное разрешение не пропорциональное, то добавлять белый фон до нужного размера.

Я извиняюсь, может эта проблема уже здесь раскрыта, но у меня не хватает постов для просмотра.
Заранее спасибо

Shabba · 27 Май 2008

можно сделать скрипт, который с помощью gd будет делать картинку нужного размера и например сохранять ее в файловой системе и если уже есть на диске то не использовать gd а отдавать с диска

примерно так..

Автоматическое уменьшение картинки

celerons

Создатель

Tretiy

Постоялец

celerons

Создатель

Black#FFFFFF

Постоялец

ortega3000

Создатель

XJIOP

Создатель

UnixLike

Писатель

Dez1

Создатель

Cornelius

Прохожие

Shabba

Создатель