Часть изображения

Тема в разделе "Другие языки", создана пользователем bunny, 18 мар 2011.

Модераторы: Цукер
  1. bunny

    bunny Постоялец

    Регистр.:
    17 мар 2007
    Сообщения:
    66
    Симпатии:
    4
    Нужно вывести часть из <img>
    например сместив левый верхний угол на 10пкс с высотой и шириной 100пкс
    как?
    И Как затемнить оставшуюся часть изображения?
     
  2. citrus

    citrus Постоялец

    Регистр.:
    5 ноя 2006
    Сообщения:
    58
    Симпатии:
    8
    тебе на каком языке лучше пример дать ?
     
  3. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102
    видимо Javascript
     
  4. citrus

    citrus Постоялец

    Регистр.:
    5 ноя 2006
    Сообщения:
    58
    Симпатии:
    8
    вот код на php, берет картинку 100x100, смещает изображение вверх-влево на 10 пикселей и выводит в броузер. использует библиотеку GD.

    <?php
    $width = 100;
    $height = 100;
    $input_image = "foto1.jpg";
    $size = getimagesize( $input_image );
    $canvas = imagecreatetruecolor( $width, $height );
    $cropped = imagecreatefromjpeg( $input_image );
    $newwidth = 100;
    $newheight = 100;
    $cropLeft = 0;
    $cropHeight = 0;
    imagecopyresized( $canvas, $cropped, -10,-10, $cropLeft, $cropHeight, $size[0], $size[1], $newwidth, $newheight );
    header('Content-type: image/jpeg');
    imagejpeg( $canvas, 'cropped.jpg' );
    imagejpeg( $canvas );
    imagedestroy( $canvas );
    imagedestroy( $cropped );
    ?>
     
  5. bunny

    bunny Постоялец

    Регистр.:
    17 мар 2007
    Сообщения:
    66
    Симпатии:
    4
    вариант с пхп немного не то,
    а вот JS,CSS
     
  6. citrus

    citrus Постоялец

    Регистр.:
    5 ноя 2006
    Сообщения:
    58
    Симпатии:
    8
    foto1.jpg - картинка 100x100 пикселей.

    <html>
    <body>
    <div style="width:100px; height:100px; background-color:#000000; overflow:hidden;"><img style="position:relative; top:-10px; left:-10px;" src=foto1.jpg></div>
    </body>
    </html>
     
    bunny нравится это.
  7. bunny

    bunny Постоялец

    Регистр.:
    17 мар 2007
    Сообщения:
    66
    Симпатии:
    4
    А затемнять как оставшуюся часть?
     
  8. citrus

    citrus Постоялец

    Регистр.:
    5 ноя 2006
    Сообщения:
    58
    Симпатии:
    8
    А что именно затемнять ? Картинка просто сдвигается вверх и влево, пустота бэкграундом зарисовывается.
     
  9. bunny

    bunny Постоялец

    Регистр.:
    17 мар 2007
    Сообщения:
    66
    Симпатии:
    4
    Ну чтобы было виден оригинальный размер и частично еще видна
    Примерно вот так
    [​IMG]
     
  10. citrus

    citrus Постоялец

    Регистр.:
    5 ноя 2006
    Сообщения:
    58
    Симпатии:
    8
    foto.jpg - картинка 400x300
    выделяется область 100x100 с координатами левого верхнего угла left: 150px; top: 130px; (первый див после картинки)
    остальное всё зарисовывается, с соответствующими координатами (следующие четыре дива)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    .apos {position: absolute;}
    .block {overflow-x: hidden; overflow-y: hidden; display: block;}
    .outer {background-color: #000000; filter: alpha(opacity=50); opacity: 0.5;}
    </style>
    </head>
    <body>
    <div class="apos">
    <img width="400" height="300" src="foto.jpg">
    <div style="z-index: 1; left: 150px; top: 130px; width: 100px; height: 100px;" class="block"></div>
    <div style="z-index: 0; left: 0px; top: 0px; width: 150px; height: 300px;" class="apos block outer"></div>
    <div style="z-index: 0; left: 150px; top: 0px; width: 100px; height: 130px;" class="apos block outer"></div>
    <div style="z-index: 0; left: 250px; top: 0px; width: 150px; height: 300px;" class="apos block outer"></div>
    <div style="z-index: 0; left: 150px; top: 230px; width: 100px; height: 70px;" class="apos block outer"></div>
    </div>
    </body>
    </html>
     
    bunny нравится это.