溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了canvas如何通過像素處理實(shí)現(xiàn)反色、黑白等美顏效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
getImageData：獲取一張圖片的像素?cái)?shù)據(jù)
cxt.getImageData( x, y, width, height )
x：圖片所在的x坐標(biāo)
y: 圖片所在的y坐標(biāo)
width,height 要獲取的像素區(qū)域
返回值是一個(gè)對象，對象包括一個(gè)data屬性， 寬度，高度. data屬性是一個(gè)巨大的數(shù)組，數(shù)組中存儲(chǔ)的是這張圖片的所有像素信息，每四個(gè)一組組成一個(gè)像素點(diǎn)的信息，如：
[r1,g1,b1,a1, r2,g2,b2,a2...]， r( 紅色) g( 綠色) b( 藍(lán)色 ) a( 透明度 )
putImageData：輸出像素圖片
putImageData( 像素對象, x, y )
注意：getImageData會(huì)產(chǎn)生跨域問題，所以你的程序要放在web服務(wù)器下，我這里是放在phpstudy下面.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='utf-8' />
5 <style>
6 #canvas {
7 border: 1px dashed #aaa;
8 }
9 </style>
10 <script>
11 window.onload = function () {
12 var oCanvas = document.querySelector("#canvas"),
13 oGc = oCanvas.getContext('2d');
14
15 var oImg = new Image();
16 oImg.src = '';
17 oImg.onload = function () {
18 oGc.drawImage(oImg, 10, 10);
19 var imgData = oGc.getImageData(10, 10, 200, 200);
20 console.log( imgData );
21 }
22 }
23 </script>
24 </head>
25 <body>
26 <canvas id="canvas" width="500" height="400"></canvas>
27 </body>
28 </html>
我這張圖片的尺寸是200 x 200.
一：反色效果
算法：把每一個(gè)像素的r, g, b顏色取反就行，也就是( 255 - 原來的值 )
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='utf-8' />
5 <style>
6 #canvas {
7 border: 1px dashed #aaa;
8 }
9 </style>
10 <script>
11 window.onload = function () {
12 var oCanvas = document.querySelector("#canvas"),
13 oGc = oCanvas.getContext('2d');
14
15 var oImg = new Image();
16 oImg.src = '';
17 oImg.onload = function () {
18 oGc.drawImage(oImg, 10, 10);
19 var imgData = oGc.getImageData(10, 10, 200, 200),
20 data = imgData.data;
21 for( var i = 0; i < data.length; i += 4 ) {
22 data[i] = 255 - data[i];
23 data[i+1] = 255 - data[i+1];
24 data[i+2] = 255 - data[i+2];
25 }
26 //處理完之后，再次輸出
27 oGc.putImageData( imgData, 220, 10 );
28 }
29 }
30 </script>
31 </head>
32 <body>
33 <canvas id="canvas" width="500" height="400"></canvas>
34 </body>
35 </html>
二、黑白效果（灰度圖）
將彩色圖片轉(zhuǎn)換成黑白圖片，原理：求r(data[i]), g(data[i+1]), b(data[i+2])三個(gè)通道的平均值，然后把這個(gè)平均值賦值給r, g, b
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='utf-8' />
5 <style>
6 #canvas {
7 border: 1px dashed #aaa;
8 }
9 </style>
10 <script>
11 window.onload = function () {
12 var oCanvas = document.querySelector("#canvas"),
13 oGc = oCanvas.getContext('2d');
14
15 var oImg = new Image();
16 oImg.src = '';
17 oImg.onload = function () {
18 oGc.drawImage(oImg, 10, 10);
19 var imgData = oGc.getImageData(10, 10, 200, 200),
20 data = imgData.data, avg = 0;
21 for( var i = 0; i < data.length; i += 4 ) {
22 avg = ( data[i] + data[i+1] + data[i+2] ) / 3;
23 data[i] = avg;
24 data[i+1] = avg;
25 data[i+2] = avg;
26 }
27 //處理完之后，再次輸出
28 oGc.putImageData( imgData, 220, 10 );
29 }
30 }
31 </script>
32 </head>
33 <body>
34 <canvas id="canvas" width="500" height="400"></canvas>
35 </body>
36 </html>
也可以分配rgb的灰度比例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='utf-8' />
5 <style>
6 #canvas {
7 border: 1px dashed #aaa;
8 }
9 </style>
10 <script>
11 window.onload = function () {
12 var oCanvas = document.querySelector("#canvas"),
13 oGc = oCanvas.getContext('2d');
14
15 var oImg = new Image();
16 oImg.src = '';
17 oImg.onload = function () {
18 oGc.drawImage(oImg, 10, 10);
19 var imgData = oGc.getImageData(10, 10, 200, 200),
20 data = imgData.data, avg = 0;
21 for( var i = 0; i < data.length; i += 4 ) {
22 avg = data[i] * 0.3 + data[i+1] * 0.3 + data[i+2] * 0.4;
23 data[i] = avg;
24 data[i+1] = avg;
25 data[i+2] = avg;
26 }
27 //處理完之后，再次輸出
28 oGc.putImageData( imgData, 220, 10 );
29 }
30 }
31 </script>
32 </head>
33 <body>
34 <canvas id="canvas" width="500" height="400"></canvas>
35 </body>
36 </html>
三、調(diào)節(jié)亮度的強(qiáng)弱
在r、g、b、通道上加上一正值就是變亮，加上負(fù)值就是變暗
1 var oImg = new Image();
2 oImg.src = '';
3 oImg.onload = function () {
4 oGc.drawImage(oImg, 10, 10);
5 var imgData = oGc.getImageData(10, 10, 200, 200),
6 data = imgData.data, avg = 0;
7 for( var i = 0; i < data.length; i += 4 ) {
8 data[i] += 30;
9 data[i+1] += 50;
10 data[i+2] += 50;
11 }
12 //處理完之后，再次輸出
13 oGc.putImageData( imgData, 220, 10 );
14 }
變暗：
data[i] -= 30;
data[i+1] -= 50;
data[i+2] -= 50;
四、復(fù)古效果
將r, g, b按比例混合相加。
1 var oImg = new Image();
2 oImg.src = '';
3 oImg.onload = function () {
4 oGc.drawImage(oImg, 10, 10);
5 var imgData = oGc.getImageData(10, 10, 200, 200),
6 data = imgData.data, avg = 0;
7 for( var i = 0; i < data.length; i += 4 ) {
8 r = data[i];
9 g = data[i+1];
10 b = data[i+2];
11 data[i] = r * 0.3 + g * 0.4 + b * 0.3;
12 data[i+1] = r * 0.2 + g * 0.6 + b * 0.2;
13 data[i+2] = r * 0.4 + g * 0.3 + b * 0.3;
14 }
15 //處理完之后，再次輸出
16 oGc.putImageData( imgData, 220, 10 );
17 }
五、藍(lán)色蒙版
藍(lán)色 蒙版就是讓圖片偏藍(lán)色，將藍(lán)色通道賦值為 r, g, b三原色的平均值，把綠色，紅色通道設(shè)置為0，其他蒙版效果，只要設(shè)置對應(yīng)的通道平均值，關(guān)閉其他通道即可.
1 var oImg = new Image();
2 oImg.src = '';
3 oImg.onload = function () {
4 oGc.drawImage(oImg, 10, 10);
5 var imgData = oGc.getImageData(10, 10, 200, 200),
6 data = imgData.data, avg = 0;
7 for( var i = 0; i < data.length; i += 4 ) {
8 avg = ( data[i] + data[i+1] + data[i+2] / 3 );
9 data[i] = 0;
10 data[i+1] = 0;
11 data[i+2] = avg;
12 }
13 //處理完之后，再次輸出
14 oGc.putImageData( imgData, 220, 10 );
15 }
六、透明度
這個(gè)很簡單，只要把透明度乘以一個(gè)0~1之間的值即可。跟css的opacity一樣
1 var oImg = new Image();
2 oImg.src = '';
3 oImg.onload = function () {
4 oGc.drawImage(oImg, 10, 10);
5 var imgData = oGc.getImageData(10, 10, 200, 200),
6 data = imgData.data, avg = 0;
7 for( var i = 0; i < data.length; i += 4 ) {
8 data[i+3] *= 0.2;
9 }
10 //處理完之后，再次輸出
11 oGc.putImageData( imgData, 220, 10 );
12 }
七、createImageData：根據(jù)圖片或者某個(gè)寬度與高度創(chuàng)建一個(gè)像素區(qū)域
cxt.createImageData( w, h )
cxt.createImageData( imgData )
w, h:創(chuàng)建區(qū)域的寬度與高度
imgData: 創(chuàng)建的區(qū)域與這個(gè)像素區(qū)域的寬度和高度相同，imgData就是通過getImageData獲取到圖片像素的 返回值
1，根據(jù)一個(gè)圖片的寬度與高度，創(chuàng)建一個(gè)透明的紅色像素區(qū)域
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='utf-8' />
5 <style>
6 #canvas {
7 border: 1px dashed #aaa;
8 }
9 </style>
10 <script>
11 window.onload = function () {
12 var oCanvas = document.querySelector("#canvas"),
13 oGc = oCanvas.getContext('2d');
14
15 var oImg = new Image();
16 oImg.src = '';
17 oImg.onload = function () {
18 oGc.drawImage(oImg, 10, 10);
19 var imgData = oGc.getImageData(10, 10, 200, 200),
20 data = imgData.data,
21 imgData2 = oGc.createImageData( imgData ),
22 data2 = imgData2.data;
23 for( var i = 0; i < imgData2.width * imgData2.height * 4; i += 4 ) {
24 data2[i] = 255;
25 data2[i+1] = 0;
26 data2[i+2] = 0;
27 data2[i+3] = 30;
28 }
29 //處理完之后，再次輸出
30 oGc.putImageData( imgData2, 220, 10 );
31 }
32 }
33 </script>
34 </head>
35 <body>
36 <canvas id="canvas" width="500" height="400"></canvas>
37 </body>
38 </html>
2，自定一個(gè)200 x 200的藍(lán)色透明像素區(qū)域
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset='utf-8' />
5 <style>
6 #canvas {
7 border: 1px dashed #aaa;
8 }
9 </style>
10 <script>
11 window.onload = function () {
12 var oCanvas = document.querySelector("#canvas"),
13 oGc = oCanvas.getContext('2d');
14
15 var imgData = oGc.createImageData( 200, 200 ),
16 data = imgData.data;
17 for( var i = 0; i < imgData.width * imgData.height * 4 ; i += 4 ){
18 data[i] = 0;
19 data[i+1] = 0;
20 data[i+2] = 255;
21 data[i+3] = 100;
22 }
23 oGc.putImageData( imgData, 10, 10 );
24 }
25 </script>
26 </head>
27 <body>
28 <canvas id="canvas" width="500" height="400"></canvas>
29 </body>
30 </html>
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“canvas如何通過像素處理實(shí)現(xiàn)反色、黑白等美顏效果”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
