如何从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 
    }); 
});