HTML5 Canvas像素處理使用接口介紹_HTML5教程
推薦：淺談three.js中的needsUpdate的應用three.js里的很多對象都有一個needsUpdate屬性，文檔中很少有寫（不過three.js的文檔本來就沒多少，很多問題還得靠github上的issues），網上各式各樣的教程中也不太會寫這個，因為對于簡單的入門程序而言，是用不到這個屬性的
內容概要：本文通過簡單的代碼實例，以及略猥瑣的圖片demo，展示了canvas在圖像像素數據操作方面的常用接口。至于如何利用這幾個接口實現更復雜的效果，則會在后續(xù)章節(jié)里繼續(xù)講述。一、canvas圖片填充； 2、設置/獲取canvas圖片數據； 3、創(chuàng)建canvas圖片數據；4、關于imageData.data的一點補充； 5、寫在后面
一、canvas圖片填充
復制代碼 代碼如下:m.hl5o.cn
/**
* @description
* @param {Number} x 圖像起始繪制點距離canvas最左側的距離
* @param {Number} y 圖像起始繪制點距離canvas最頂部的距離
* @param {Number} width 最終圖像在canvas上繪制出來的寬度
* @param {Number} height 最終圖像在canvas上繪制出來的高度
*/
context.drawImage(image, x, y, width, height)
demo_01如下：
<canvas id="draw_image_canvas" style="background:#ccc;"></canvas>
復制代碼 代碼如下:m.hl5o.cn
function $(id) { return document.getElementById(id); }
function getImage(url, callback){
var img = document.createElement('img');
img.onload = function(){
callback && callback(this);
};
img.src = url;
document.body.appendChild(img);
}
function drawImage(){
var url = 'xiangjishi.png';
var canvas = $('draw_image_canvas');
var context = canvas.getContext('2d');
getImage(url, function(img){
canvas.width = img.width;
canvas.height = img.height;
var offsetX = 20;
var offsetY = 20;
var drawWidth = img.width/4;
var drawHeight = img.height/4;
context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
});
}
drawImage();
demo說明：加載xiangjishi.png，加載完成后，從相對于畫布左上角坐標(0, 0)處開始，將xiangjishi.png繪制在畫布上，效果如下：
看到這里，可能對于 context.drawImage(image, x, y, width, height) 里四個參數的含義理解還不是特別清楚，可以簡單把幾個參數修改下看看效果：
復制代碼 代碼如下:m.hl5o.cn
var offsetX = 20;
var offsetY = 20;
var drawWidth = img.width/2;
var drawHeight = img.height/2;
context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
修改后的demo效果如下，結合上面API的說明，應該不難理解四個參數所代表的含義
復制代碼 代碼如下:m.hl5o.cn
context.drawImage(image, x, y, width, height)
二、獲取/設置canvas圖片數據
復制代碼 代碼如下:m.hl5o.cn
/**
* @description 獲取canvas特定區(qū)域的像素點信息
* @param {Number} x 獲取信息的起始點距離canvas最左側的距離
* @param {Number} y 獲取信息的起始距離canvas最頂部的距離
* @param {Number} width 獲取的寬度
* @param {Number} height 最終的高度
*/
context.getImageData(x, y, width, height)
該方法返回一個ImageData對象，該對象主要有三個屬性：
imageData.width：每行有多少個元素
imageData.height：每列有多少個元素
imageData.data：一維數組，存儲了從canvas中獲取的每個像素的RGBA值。該數組為每個像素點保存了四個值——紅、綠、藍和alpha透明度。每個值都在0～255之間。因此，canvas上的每個像素在這個數組中就變成了四個整數值。數組的填充順序從左到右，從上到下。
復制代碼 代碼如下:m.hl5o.cn
/**
* @description 用特定的imageData設置canvas特定區(qū)域的像素信息
* @param {Number} x 從canvas的x點處開始設置
* @param {Number} y 從canvas的y點處開始設置
* @param {Number} width 獲取的寬度
* @param {Number} height 最終的高度
*/
context.putImageData(imageData, x, y)
下面結合demo_2來說明getImageData()的用法以及各自參數的對應的含義
DEMO_02 源代碼如下，在demo_01的基礎上稍事修改：
復制代碼 代碼如下:m.hl5o.cn
<canvas id="draw_image_canvas" style="background:#ccc;"></canvas>
<canvas id="get_image_canvas" style="background:#ccc;"></canvas>
復制代碼 代碼如下:m.hl5o.cn
function getAndSetImageData(){
var url = 'xiangjishi.png';
getImage(url, function(img){
$('draw_image_canvas').width = img.width;
$('draw_image_canvas').height = img.height;
var context = $('draw_image_canvas').getContext('2d');
context.drawImage(img, 0, 0, img.width, img.height);
//獲取像素信息
var offsetX = img.width/2;
var offsetY = img.height/2;
var getImgWidth = img.width/2;
var getImgHeight = img.height/2;
var imgageData = context.getImageData(offsetX, offsetY, getImgWidth, getImgHeight);
//設置像素信息，此處先忽略具體代碼，知道是把上面獲取的像素信息原封不動放到另一canvas里即可
var startX = 0;
var startY = 0;
var ct = $('get_image_canvas').getContext('2d');
$('get_image_canvas').width = img.width;
$('get_image_canvas').height = img.height;
ct.putImageData(imgageData, startX, startY);
});
}
demo_2 展示效果如下：
到這里，基本能夠清除getImageData方法四個參數對應的含義。putImageData參數的理解也不難，demo_2的代碼略加修改后看下效果就知道了
復制代碼 代碼如下:m.hl5o.cn
function getAndSetImageData(){
var url = 'xiangjishi.png';
getImage(url, function(img){
$('draw_image_canvas').width = img.width;
$('draw_image_canvas').height = img.height;
var context = $('draw_image_canvas').getContext('2d');
context.drawImage(img, 0, 0, img.width, img.height);
//獲取像素信息
var offsetX = img.width/2;
var offsetY = img.height/2;
var getImgWidth = img.width/2;
var getImgHeight = img.height/2;
var imgageData = context.getImageData(offsetX, offsetY, getImgWidth, getImgHeight);
//設置像素信息
var startX = img.width/2; //這里原先為0
var startY = img.width/2; //這里原先為0
var ct = $('get_image_canvas').getContext('2d');
$('get_image_canvas').width = img.width;
$('get_image_canvas').height = img.height;
ct.putImageData(imgageData, startX, startY);
});
}
demo_3展示效果如下，可是試著把幾個參數自己改一下試下，可能會有更好的理解：
三、創(chuàng)建canvas圖片數據
復制代碼 代碼如下:m.hl5o.cn
/**
* @description 預先創(chuàng)建一組圖像數據，并綁定在canvas對象上
* @param {Number} width 創(chuàng)建的寬度
* @param {Number} height 創(chuàng)建的高度
*/
context.createImageData(width, height)
接口比較簡單，創(chuàng)建的數據可以像用getImageData獲取到的數據那樣進行同樣的處理，這里僅需要注意的是：這組圖像數據不一定會反映canvas的當前狀態(tài)。
四、關于imageData的一點補充
再《HTML5高級程序設計》以及很多文章里面，都把imageData.data當作一個數組來講，但其實：
復制代碼 代碼如下:m.hl5o.cn
imageData.data返回的并不是真正的數組，而是一個類數組的對象，可以將imageData.data的類型打印出來
console.log(Object.prototype.toString.call(imgageData.data)); //輸出：[object Uint8ClampedArray]
然后再將imageData.data的具體內容打印出來，內容較長，僅截取最前面以及最后面的一段，可以看出：
imageData.data其實是一個對象，其索引從0開始，一直到width*height*4-1。
為什么不直接用數組存放？因為數組的長度有個上限，假設為limitLength，超過limitLength的元素，均以鍵值的方式存儲，如 data[limitLength + 100] 其實是 data['limitLength + 100 + '']（limitLength具體值記不得了，有興趣的童鞋可以查下）
至于最后面的byteLength、byteOffset、buffer屬性，未深究，此處不展開以防誤導讀者。
五、寫在后面
水平有限，如有疏誤，敬請指出
分享：基于HTML5超酷攝像頭（HTML5 webcam）拍照功能實現代碼基于HTML5實現的超酷攝像頭（HTML5 webcam）拍照功能,需要了解的朋友可以參考下
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標簽的定義與規(guī)定：body的介紹
- 關于HTML5的安全問題開發(fā)人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5 Canvas畫圖教程(2)—畫直線與設置線條的樣式如顏色/端點/交匯點
- css3 transform 3d 使用css3創(chuàng)建動態(tài)3d立方體(html5實踐)
- html5拖曳操作 HTML5實現網頁元素的拖放操作
- Html5游戲開發(fā)之乒乓Ping Pong游戲示例(二)
- HTML5中實現拖放效果無須借助javascript
- html5 跨文檔消息傳輸示例探討
- html5中地理位置定位api接口開發(fā)應用小結
- HTML5本地存儲之Database Storage應用介紹
- Bootstrap 學習分享
- html5 Canvas畫圖教程(8)—canvas里畫曲線之bezierCurveTo方法
- 相關鏈接：
- 教程說明：
HTML5教程-HTML5 Canvas像素處理使用接口介紹
。