分類: 網頁開發

Adaptive Backgrounds:一個可以依照圖片主題顏色動態調整背景的 jQuery Plugin

這裡介紹 Adaptive Backgrounds 這個 jQuery plugin,它可以依照圖片的主題動態更改背景顏色。

Adaptive Backgrounds 是一個 jQuery 的 plugin,它可以取出一張圖片中最主要的顏色,並將該顏色套用在圖片的上一層網頁元素上,藉此製作出一個跟圖片主題相似的背景。

這個 plugin 是運用 ImageData<canvas> 來達到這個效果的,而由於安全性的因素,這種 JavaScript 只能處理同一個網站的圖片,或是允許 Cross Origin Resource Sharing 的圖片。


在使用時除了這個函式庫本身之外,還要再引入 jQuery,然後在網頁中執行這段 JavaScript:
$(document).ready(function(){
  $.adaptiveBackground.run()
});

這樣它就會尋找網頁中有標注 data-adaptive-background='1' 的圖片,將圖片的主要顏色取出後,套用至該圖片的上一層元素。也就是說如果想要讓 Adaptive Backgrounds 處理圖片的背景,就要在圖片的 HTML 程式碼中加上 data-adaptive-background='1' 這個屬性:

<img src="/image.jpg" data-adaptive-background='1'>

結果會像這樣:

G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

2 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

2 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

3 年 ago