jQuery Mu Image Resize 縮圖裁切外掛

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

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

圖片好好的為什麼要進行縮圖及裁切？如果圖片本身的尺寸跟網頁想呈現的圖片尺寸不同，我們就會想縮放這張圖片，而通常縮放後若原圖比例跟網站需要的縮圖比例不同，就會造成比例失真的問題：

因此我們需要對圖片作縮放及裁切，讓它可以依照正確的比例及尺寸顯示於畫面上。

在後端or前端進行縮圖

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

前端縮圖的限制

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

試玩jQuery Mu Image Resize外掛

這是我第一個放上Github的小程式，使用方式很簡單，只要將js檔加進來，加上以下script就行了：
[code lang=”javascript”]
$(function(){
// img_class 是要套用縮放裁切效果的圖片class名，width及height就是想期望它要變成的size。
$(‘.img_class’).muImageResize({width: 150, height:200});
});
[/code]

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

到 Github 下載jQuery Mu Image Resize

標籤：jQuery外掛, 網站設計

分類：JavaScript技巧, 網站設計

本文作者是Audi Lu