Как создать эскиз из http-ответа?

Question

На моей странице html у меня есть ссылка, которая приводит к нестационарному изображению (рисуется в соответствии с параметрами запроса url).

Как мне создать миниатюру этого изображения?

Когда пользователь нажимает на миниатюру, открывается новая страница с большим изображением (или на той же странице не имеет значения).

Возможно ли регулировать уменьшенное изображение, которое нужно обрезать или уменьшить?

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

<A HREF="paperboy.gif"><IMG SRC="pb1.gif"></A> 

Answer 1

Вот быстрый маленький JQuery плагин, который я просто взбитыми для этого .. имейте в виду, что это не правильный эскиз - это еще исходное изображение просто масштабируется.

Это не будет работать в более старых версиях IE.

Изменение размера обрезки zoom, top и left.

http://jsfiddle.net/fyg042m4/1/

HTML

<a class="thumbify" href="http://www.wallpaperup.com/uploads/wallpapers/2014/10/21/489485/b807c2282ab0a491bd5c5c1051c6d312.jpg"></a> 

JQ Плагин

(function($) { 
    $.fn.thumbify = function(opts) { 
     var url = this.attr('href'); 
     var $thumb = $('<div class="thumbnail"></div>'); 

     $thumb.css({ 
      'background': 'url('+url+')', 
      'width': opts.width+'px', 
      'height': opts.height+'px', 
      'background-size': (opts.width * opts.zoom)+'px ' + (opts.height * opts.zoom)+'px', 
      'background-repeat': 'no-repeat', 
      'background-position': opts.left +'px ' + opts.top +'px' 
     }); 

     this.append($thumb); 
    }; 
}(jQuery)); 

JS

jQuery(function($) { 
    $('.thumbify').thumbify({ 
     width: '150', 
     height: '100', 
     zoom: 2.5, 
     top: -50, 
     left: -40 
    }); 
});