Web Majster - triki i rozwiązania: Image

czwartek, 14 lutego 2013

Zaślepka dla nie załadowanych obrazków w jQuery

Witam,
pokażę jeden ze sposobów na wstawienie zaślepki obrazków, które nie zostały wczytane:

$(window).load(function() {
  var w, h, w1, h1;
  $('img').each(function() {
    if (!this.complete
        || typeof this.naturalWidth == "undefined"
        || this.naturalWidth == 0) {
      w = 100;
      h = 100;
      w1 = parseInt($(this).attr('width'), 10);
      h1 = parseInt($(this).attr('height'), 10);
      if (w1 && h1) {
        w = w1;
        h = h1;
      }
      this.src = 'http://placehold.it/'+w+'/'+h;
    }
  });
});

Ten sposób działa w normalnych przeglądarkach.

wtorek, 8 lutego 2011

Renderowanie obrazków w Kohana 3

Aby pokazać obrazek w locie (np. miniaturka, ze znakiem wodnym), w PHP tworzymy obrazek, podajemy typ mime oraz wysyłamy do przeglądarki:

header('Content-type: image/jpeg');

$img = imagecreatefromjpeg('plik.jpeg');

imagejpeg($img);

imagedestroy($img);

W Kohana wygląda to tak:

W kontrolerze np. obrazek.php dodajemy akcję action_render(). Podobnie, jak w czystym PHP, musimy utworzyć obrazek z pliku, podać typ wysyłanych danych, wysłać je w nagłówkach oraz zwrócić wyrenderowany obrazek:

<?php defined('SYSPATH') or die('No direct script access.');

class Controller_Obrazek extends Controller {

public function action_render(){

$this->request->headers['Content-type']='image/jpeg';

$this->request->send_headers();

$img=Image::factory('media/images/obraz.jpg');

$this->request->response=$img->render('jpg');

}

Wywołujemy następująco:

<?php echo Html::image('obrazek/render'); ?>

W ten sposób można również ukryć ścieżkę do zdjęć.

Oczywiście można przekazać do akcji dowolny obrazek:

<?php echo Html::image('obrazek/render/' . $nazwa_pliku); ?>