如何使用canvas處理圖像?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司-云計算及IDC服務(wù)提供商,涵蓋公有云、IDC機房租用、香港機房服務(wù)器托管、等保安全、私有云建設(shè)等企業(yè)級互聯(lián)網(wǎng)基礎(chǔ)服務(wù),聯(lián)系熱線:18980820575canvas 的圖像處理能力通過 ImageData 對象來處理像素數(shù)據(jù)。主要的 API 如下:
createImageData():創(chuàng)建一個空白的 ImageData 對象
getImageData():獲取畫布像素數(shù)據(jù),每一個像素點有 4 個值 —— rgba
putImageData():將像素數(shù)據(jù)寫入畫布
imageData = { width: Number, height: Number, data: Uint8ClampedArray }
width 是 canvas 畫布的寬或者說 x 軸的像素數(shù)量;height 是畫布的高或者說 y 軸的像素數(shù)量;data 是畫布的像素數(shù)據(jù)數(shù)組,總長度 w * h * 4,每 4 個值(rgba)代表一個像素。
對圖片的處理
下面,我們通過幾個例子來看下 canvas 基礎(chǔ)的圖片處理能力。
原圖效果:
const cvs = document.getElementById("canvas"); const ctx = cvs.getContext("2d"); const img = new Image(); img.src="圖片 URL"; img.onload = function () { ctx.drawImage(img, 0, 0, w, h); }
底片/負片效果
算法:將 255 與像素點的 rgb 的差,作為當前值。
function negative(x) { let y = 255 - x; return y; }
效果圖:
const imageData = ctx.getImageData(0, 0, w, h); const { data } = imageData; let l = data.length; for(let i = 0; i < l; i+=4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; data[i] = negative(r); data[i + 1] = negative(g); data[i + 2] = negative(b); } ctx.putImageData(imageData, 0, 0);
單色效果
單色效果就是保留當前像素的 rgb 3個值中的一個,去除其他色值。
for(let i = 0; i < l; i+=4) { // 去除了 r 、g 的值 data[i] = 0; data[i + 1] = 0; }
效果圖:
灰度圖
灰度圖:每個像素只有一個色值的圖像。0 到 255 的色值,顏色由黑變白。
for(let i = 0; i < l; i+=4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; const gray = grayFn(r, g, b); data[i] = gray; data[i + 1] = gray; data[i + 2] = gray; }
算法1——平均法:
const gray = (r + g + b) / 3;
效果圖:
算法2——人眼感知:根據(jù)人眼對紅綠藍三色的感知程度:綠 > 紅 > 藍,給定權(quán)重劃分
const gray = r * 0.3 + g * 0.59 + b * 0.11
效果圖:
除此以外,還有:
取較大值或最小值。
const grayMax = Math.max(r, g, b); // 值偏大,較亮 const grayMin = Math.min(r, g, b); // 值偏小,較暗
取單一通道,即 rgb 3個值中的一個。
二值圖
算法:確定一個色值,比較當前的 rgb 值,大于這個值顯示黑色,否則顯示白色。
for(let i = 0; i < l; i+=4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; const gray = gray1(r, g, b); const binary = gray > 126 ? 255 : 0; data[i] = binary; data[i + 1] = binary; data[i + 2] = binary; }
效果圖:
高斯模糊
高斯模糊是“模糊”算法中的一種,每個像素的值都是周圍相鄰像素值的加權(quán)平均。原始像素的值有較大的高斯分布值(有較大的權(quán)重),相鄰像素隨著距離原始像素越來越遠,權(quán)重也越來越小。
一階公式:
(使用一階公式是因為一階公式的算法比較簡單)
const radius = 5; // 模糊半徑 const weightMatrix = generateWeightMatrix(radius); // 權(quán)重矩陣 for(let y = 0; y < h; y++) { for(let x = 0; x < w; x++) { let [r, g, b] = [0, 0, 0]; let sum = 0; let k = (y * w + x) * 4; for(let i = -radius; i <= radius; i++) { let x1 = x + i; if(x1 >= 0 && x1 < w) { let j = (y * w + x1) * 4; r += data[j] * weightMatrix[i + radius]; g += data[j + 1] * weightMatrix[i + radius]; b += data[j + 2] * weightMatrix[i + radius]; sum += weightMatrix[i + radius]; } } data[k] = r / sum; data[k + 1] = g / sum; data[k + 2] = b / sum; } } for(let x = 0; x < w; x++) { for(let y = 0; y < h; y++) { let [r, g, b] = [0, 0, 0]; let sum = 0; let k = (y * w + x) * 4; for(let i = -radius; i <= radius; i++) { let y1 = y + i; if(y1 >= 0 && y1 < h) { let j = (y1 * w + x) * 4; r += data[j] * weightMatrix[i + radius]; g += data[j + 1] * weightMatrix[i + radius]; b += data[j + 2] * weightMatrix[i + radius]; sum += weightMatrix[i + radius]; } } data[k] = r / sum; data[k + 1] = g / sum; data[k + 2] = b / sum; } } function generateWeightMatrix(radius = 1, sigma) { // sigma 正態(tài)分布的標準偏差 const a = 1 / (Math.sqrt(2 * Math.PI) * sigma); const b = - 1 / (2 * Math.pow(sigma, 2)); let weight, weightSum = 0, weightMatrix = []; for (let i = -radius; i <= radius; i++){ weight = a * Math.exp(b * Math.pow(i, 2)); weightMatrix.push(weight); weightSum += weight; } return weightMatrix.map(item => item / weightSum); // 歸一處理 }
效果圖:
其他效果
這里再簡單介紹下其他的圖像效果處理,因為例子簡單重復,所以不再給出代碼和效果圖。
亮度調(diào)整:將 rgb 值,分別加上一個給定值。
透明化處理:改變 rgba 值中的 a 值。
對比度增強:將 rgb 值分別乘以 2,然后再減去一個給定值。
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,的支持。
本文題目:如何使用canvas處理圖像-創(chuàng)新互聯(lián)
網(wǎng)站路徑:http://jinyejixie.com/article20/gipjo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導航、手機網(wǎng)站建設(shè)、標簽優(yōu)化、關(guān)鍵詞優(yōu)化、App設(shè)計、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容