使用 canvas 對圖像進行處理

時間 2019-11-16

標籤使用 canvas 圖像進行處理简体版

原文原文鏈接

今晚原本想發「hybrid系列的jssdk文章」，可是被耽擱了，只寫了一半，尚未完成。昨天朋友問js處理圖片的問題，想起以前寫過一篇canvas處理圖片的文章，因而整理髮了出來。下週文章預告：「hybrid系列的jssdk文章」html

html5 canvas圖像轉換成數組

html5的canvas能夠進行圖片處理，圖片是由像素組成的。咱們知道canvas有方法 getImageData，返回的對象中能夠取出，image的data 數組（相似數組的Type Array類型數組，Uint8ClampedArray）。html5

假設canvas寬高是500*400，那麼應該有200000個像素點，而經過 getImageData().data獲取的data數組的 length是800000。web

咱們還知道rgba表示顏色的方法：算法

r=red，0~255canvas
g=green，0~255跨域
b=blue，0~255數組
a=alpha，0~100spa

即紅綠藍三原色和透明值。code

因此這個data數組是每四個數組值表明一個像素點。這樣一來，一個圖像就轉化成了數據表示的數組。以下面的代碼：htm

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
var canvas = document.getElementById('canvas');複製代碼var ctxt = canvas.getContext('2d');複製代碼var img = new Image;複製代碼img.onload = function(){複製代碼ctxt.drawImage(img, 0, 0);複製代碼var data = ctxt.getImageData(0, 0, 480, 480).data;複製代碼console.log(data, data.toString());複製代碼}複製代碼img.src = 'img/pic.jpg';複製代碼

這裏須要注意，圖片src符合同源策略，即不能夠跨域請求。

圖像數組的遍歷

如上面的代碼，咱們能夠看到數組data就是圖片轉換成的數組，那麼遍歷這個數組就能夠取得圖片的像素點內容：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
var data = ctxt.getImageData(0, 0, 480, 480).data;複製代碼for(var i =0,len = data.length; i<len;i+=4){複製代碼var red = data[i],複製代碼green = data[i+1],複製代碼blue = data[i+2],複製代碼alpha = data[i+3];複製代碼}複製代碼

圖片顏色反轉

顏色反轉的算法就是三原色求反，即 255-原色。因此有了下面的方法：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
 
function draw(img){複製代碼ctxt.clearRect(0, 0, 480, 480);複製代碼// console.log(img);複製代碼ctxt.putImageData(img,0,0);複製代碼}複製代碼function invert(){複製代碼var back = ctxt.createImageData(480, 480);複製代碼var arr = back.data;複製代碼for(var i=0,len = data.length;i<len;i+=4){複製代碼var red = data[i],複製代碼green = data[i+1],複製代碼blue = data[i+2],複製代碼alpha = data[i+3];複製代碼arr[i] = 255-red;複製代碼arr[i+1] = 255-green;複製代碼arr[i+2] = 255-blue;複製代碼arr[i+3] = alpha;複製代碼}複製代碼return back;複製代碼}複製代碼//顏色反轉複製代碼draw(invert());複製代碼