如何从HTTP回复图像创建缩略图

how to create thumbnail from http reply image?

本文关键字：创建 略图 图像 回复 HTTP      更新时间：2023-09-26

在我的html页面我有一个链接，导致一个非静态图像(根据url查询参数绘制)。

如何创建此图像的缩略图?

当用户点击缩略图时，将打开一个带有大图的新页面(或者在同一页面中，无关紧要)。

是否可以控制缩略图裁剪或缩小?

我看到了这个例子，但这假设我有静态和本地存储的图像。没有?

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

这是我刚刚做的一个快速的jQuery插件。请记住，这不是一个适当的缩略图-它仍然是原始图像只是缩放。

旧版本的IE无法使用

改变zoom, top和left来改变裁剪的大小。

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

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

金桥插件 

(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
    });
});
相关文章：