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