《canvas》之第8章 像素操作
生活随笔
收集整理的這篇文章主要介紹了
《canvas》之第8章 像素操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
《canvas》之第8章 像素操作
- 第8章 像素操作
- 8.1 像素操作簡介
- 8.1.1 getImageData()方法
- 8.1.2 putImageData()方法
- 8.1.3 getImageData()和putImageData()方法
- 8.2 反轉效果
- 8.3 黑白效果
- 8.4 亮度效果
- 8.5 復古效果
- 8.6 紅色蒙版
- 8.7 透明處理
- 8.8 createImageData()方法
第8章 像素操作
8.1 像素操作簡介
getImageData()和putImageData()方法進行圖片像素操作。
8.1.1 getImageData()方法
獲取圖片像素數據。
var imgData = cxt.getImageData(x, y, width, height); var data = imgData.data;imagData，canvasPixelArray對象。
data，數組，[r1, g1, b1, a1, …]。
8.1.2 putImageData()方法
在canvas中顯示圖片。
cxt.putImageData(image, x, y);8.1.3 getImageData()和putImageData()方法
getImageData()和putImageData()不受坐標系變換的影響。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");//cxt.save();cxt.translate(50, 50);cxt.fillStyle = "green"cxt.fillRect(0, 0, 50, 200);cxt.rotate(-30 * Math.PI / 180)cxt.fillStyle = "blue"cxt.fillRect(0, 0, 50, 200);//cxt.restorecxt.strokeStyle = "red"cxt.strokeRect(50, 50, 50, 50);var data = cxt.getImageData(50, 50, 50, 50);cxt.putImageData(data, 200, 100);}</script> </head> <body><canvas id="canvas" width="400" height="300" style="border:1px dashed gray;"></canvas> </body> </html>8.2 反轉效果
顏色反轉，像素取相反值。
for(var i=0; i<data.length; i+=4) {data[i+0] = 255-data[i+0];data[i+1] = 255-data[i+1];data[i+2] = 255-data[i+2]; } <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍歷每個像素for (var i = 0; i < data.length; i += 4) {data[i + 0] = 255 - data[i + 0];data[i + 1] = 255 - data[i + 1];data[i + 2] = 255 - data[i + 2];}//在指定位置輸出圖片cxt.putImageData(imgData, 140, 10);}}</script> </head> <body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas> </body> </html>- 數據裁剪
8.3 黑白效果
灰度圖（average），彩色圖片轉換成黑白圖片。
for(var i=0; i<data.length; i+=4) {var average = (data[i+0]+data[i+1]+data[i+2]) / 3;data[i+0] = average;data[i+1] = average;data[i+2] = average; } <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍歷每個像素for (var i = 0; i < data.length; i += 4) {var average = (data[i+0]+data[i+1]+data[i+2]) / 3;data[i+0] = average;data[i+1] = average;data[i+2] = average;}//在指定位置輸出圖片cxt.putImageData(imgData, 140, 10);}}</script> </head> <body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas> </body> </html>- 加權平均
8.4 亮度效果
圖片變得更亮或更暗，加減值。
var a = -50; for(var i=0; i<data.length; i+=4) {data[i+0] += a;data[i+1] += a;data[i+2] += a; } <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍歷每個像素for (var i = 0; i < data.length; i += 4) {var a = 50;data[i + 0] += a;data[i + 1] += a;data[i + 2] += a;}//在指定位置輸出圖片cxt.putImageData(imgData, 140, 10);}}</script> </head> <body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas> </body> </html>8.5 復古效果
sepia，古舊效果，加權平均。
for(var i=0; i<data.length; i+=4) {var r = data[i+0];var g = data[i+1];var b = data[i+2];data[i+0] = r*0.39+g*0.76+b*0.18;data[i+1] = r*0.35+g*0.68+b*0.16;data[i+2] = r*0.27+g*0.53+b*0.13; } <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍歷每個像素for (var i = 0; i < data.length; i += 4) {var r = data[i + 0];var g = data[i + 1];var b = data[i + 2];data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18;data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16;data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13;}//在指定位置輸出圖片cxt.putImageData(imgData, 140, 10);}}</script> </head> <body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas> </body> </html>8.6 紅色蒙版
圖片偏紅的效果。r取rgb平均值，g，b取0。
for(var i=0; i<data.length; i+=4) {var r = data[i+0];var g = data[i+1];var b = data[i+2];var average = (r+g+b)/3;data[i+0] = average;data[i+1] = 0;data[i+2] = 0; } <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍歷每個像素for (var i = 0; i < data.length; i += 4) {var r = data[i + 0];var g = data[i + 1];var b = data[i + 2];var average = (r + g + b) / 3;data[i + 0] = average;data[i + 1] = 0;data[i + 2] = 0;}//在指定位置輸出圖片cxt.putImageData(imgData, 140, 10);}}</script> </head> <body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas> </body> </html>8.7 透明處理
透明度乘以n。
var n = 0.3; for(var i=0; i<data.length; i+=4) {data[i+3] *= n; }n取值范圍0.0~1.0。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍歷每個像素for (var i = 0; i < data.length; i += 4) {data[i + 3] = data[i + 3] * 0.3;}//在指定位置輸出圖片cxt.putImageData(imgData, 140, 10);}}</script> </head> <body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas> </body> </html>8.8 createImageData()方法
創建區域進行像素操作。
- createImageData(sw, sh)
- createImageData(imageData)
總結
以上是生活随笔為你收集整理的《canvas》之第8章 像素操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html设置文本的下划线效果,CSS3
- 下一篇： SQL Server 使用ORDER B