jQSlickWrap 實際執行畫面

jQSlickWrap 主要運用到 HTML5 的 canvas 元素，特別是 toDataURL() 這一個函數，所支援的瀏覽器 Mozilla Firefox 3.5+、Google Chrome、Apple Safari 4+、Opera 11+ 目前並不完全支援IE，未來等 IE 10 之後看他是否有改善囉。這一個套件能夠讓不規則形狀的圖片旁邊也能放進文字，讓網頁的空白大量的減少能放進更多有用的資訊。


使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//jQSlickWrap 的主程式瑪
<script src="jquery.slickwrap.js" type="text/javascript"></script>


CSS部分需要設定元素為浮動
.wrapReady {
     float: left;
}

網頁 HTML 的圖片部分
<img src="./myImage.jpg" class="wrapReady" />
<p>輸入很多很多的介紹文字</p>

最後啟動 JavaScript 的程式碼
$(function(){
  $('.wrapReady').slickWrap({
    bgColor: {  //設定圖片的背景顏色
      r: 255,
      g: 0,
      b: 0,
      a: 255
    },
    cutoff: 10, // let there be a tolerance of 10
    resolution: 15 //創建的文字DIV高度
  });
});

作者網站：http://jwf.us/projects/jQSlickWrap/
檔案大小：13.8 KB
檔案下載：https://raw.github.com/jasonwyatt/jQSlickWrap/master/jquery.slickwrap.js
檔案備份：下載