使用JavaScript 獲取圖像的平均顏色
確定圖像的平均顏色對於各種應用程式都很有價值,但它可能特別具有挑戰性
JavaScript 實現
幸運的是,隨著HTML5 的進步,JavaScript 開發人員可以利用
<code class="javascript">function getAverageRGB(imgEl) { var blockSize = 5, // only visit every 5 pixels defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = {r:0,g:0,b:0}, count = 0; if (!context) { return defaultRGB; } height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; context.drawImage(imgEl, 0, 0); try { data = context.getImageData(0, 0, width, height); } catch(e) { /* security error, img on diff domain */ return defaultRGB; } length = data.data.length; while ( (i += blockSize * 4) < length ) { ++count; rgb.r += data.data[i]; rgb.g += data.data[i+1]; rgb.b += data.data[i+2]; } // ~~ used to floor values rgb.r = ~~(rgb.r/count); rgb.g = ~~(rgb.g/count); rgb.b = ~~(rgb.b/count); return rgb; }</code>
用法
要取得影像的平均顏色,請呼叫 getAverageRGB 函數,將影像元素傳遞為參數。此函數傳回一個具有紅色、綠色和藍色分量平均值的物件。
限制
此技術僅限於駐留在同一網域上的圖像,並且僅具有 HTML5 canvas 元素的瀏覽器支援。對於舊版的 Internet Explorer,請考慮合併 excanvas 程式庫以啟用部分功能。
以上是如何使用 JavaScript 計算圖像的平均顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!