jQuery Mu Image Resize 縮圖裁切外掛


作者: | 2012/05/07 14:28:15 | 留言


jquery mu image resize

為網站內的圖片產生縮圖,已經是非常普及的應用了,不過這通常是透過後端程式來處理,動用到的也是Server的資源。不過某些情況下,我們希望在前端將縮圖的問題處理掉,而今天要介紹的jQuery Plugin – Mu Image Resize 就是為此而生的。

為何需要縮圖裁切(resize with crop)?

圖片好好的為什麼要進行縮圖及裁切?如果圖片本身的尺寸跟網頁想呈現的圖片尺寸不同,我們就會想縮放這張圖片,而通常縮放後若原圖比例跟網站需要的縮圖比例不同,就會造成比例失真的問題:
image resize failed
因此我們需要對圖片作縮放及裁切,讓它可以依照正確的比例及尺寸顯示於畫面上。

在後端or前端進行縮圖

在後端進行縮圖的情況,可能是內容由我們自己產生,圖片的所有權是我們的,因此可以這樣處理。但若內容是由第三方網站產生的,圖片根本不在我們家,這時候若要由後端縮圖,就必須要把內容整個抓回我們的Server,再進行縮圖處理。
如果我們並不打算把內容整個打包回家,而是直接在畫面上顯示,這時若要作縮圖,就只能透過前端 javascript 的協助了。

前端縮圖的限制

後端縮圖通常是「真的」將圖片縮小及裁切成另一張圖片,其中也許有進行檔案讀寫的動作。但前端限制很多,不能進行檔案I/O,縮放圖片的大小也許還行,但要裁切圖片,就必須要使用其他的技巧。因此,在這個Plugin中,我是使用 CSS 的 Clip 屬性來作裁切效果。

試玩jQuery Mu Image Resize外掛

這是我第一個放上Github的小程式,使用方式很簡單,只要將js檔加進來,加上以下script就行了:


$(function(){
// img_class 是要套用縮放裁切效果的圖片class名,width及height就是想期望它要變成的size。
$('.img_class').muImageResize({width: 150, height:200});
});

就這樣,這裡有Demo可以看看,有任何問題再麻煩回報了。 🙂

到 Github 下載jQuery Mu Image Resize


標籤:,

分類:,

本文作者是Audi Lu

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料