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