canvas學習與濾鏡實作程式碼

在這個數位產品氾濫的時代裡，拍照已經成為生活不可或缺的一部分，不管是居家，踏青，還是遠途旅行，總是會拍一些美美的照片。但相機直接拍出來的照片往往和我們的心理預期有一定的差距，那麼怎麼減小這種差距呢？答案是美顏P圖，於是各種美顏相機鋪天蓋地而來，P圖已成為隨身技能。

其實所謂的美顏不過是很多濾鏡的配合使用罷了，而濾鏡就是透過一定的演算法來操作圖片像素進而得到一些特殊的影像效果。用過Photoshop的朋友都清楚ps裡面有一大堆的濾鏡，下面我們將會用js的canvas技術去實現幾種濾鏡效果。

最近學習了HTML5 中的重頭戲-- canvas 。利用canvas，前端人員可以輕鬆地、進行影像處理。其API 繁多，這次主要學習常用的API，並完成以下兩個代碼：

• 實現去色濾鏡
• 實現負色(反色)濾鏡

這個HTML 元素是為了客戶端向量圖形而設計的。它自己沒有行為，但卻把一個繪圖API 展現給客戶端JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。

<canvas>標記和SVG 以及VML 之間的一個重要的不同是， <canvas>有一個基於JavaScript 的繪圖API，而SVG 和VML 使用一個XML 文件來描述繪圖。

大多數Canvas 繪圖API 都沒有定義在<canvas>元素本身上，而是定義在透過畫布的getContext()方法獲得的一個繪圖環境物件上。而<canvas>元素本身預設的寬高分別是300px、150px。

 // 處理canvas元素var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70;// 取得指定canvas標籤上的context物件var ctx = c.getContext(2d); ctx.fillStyle = #FF0000; // 顏色ctx.fillRect(0, 0, 150, 75); //形狀

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); // 開始座標ctx.lineTo(200, 100); // 結束座標ctx .stroke(); // 立即繪製

對於ctx.arc()這個接口，5 個參數是: (x,y,r,start,stop) 。其中，x 和y 是圓心座標，r 是半徑。

而start和stop的單位是弧度製。不是長度，也不是°。

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. stroke();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

關於影像處理的API，主要有4 個：

繪製影像： drawImage(img,x,y,width,height)或drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

取得影像資料： getImageData(x,y,width,height)

重寫影像資料： putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

匯出影像： toDataURL([type, encoderOptions])

更詳細的API 與參數說明請看：canvas 影像處理API 參數講解

在此些API 的基礎上，我們就可以在canvas元素中繪製我們的圖片。假設我們圖片是./img/photo.jpg 。

 <script> window.onload = function () { var img = new Image() // 宣告新的Image物件img.src = ./img/photo.jpg // 圖片載入後img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); //根據image大小，指定canvas大小canvas.width = img.width canvas.height = img.height // 繪製圖像ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

如下圖所示，圖片被畫入了canvas：

這裡我們主要藉用getImageData函數，他傳回每個像素的RGBA 值。借助影像處理公式，操作像素進行對應的、數學運算即可。

去色效果相當於就是老舊相機拍出來的黑白照片。人們根據人眼的敏感程度，給出瞭如下公式：

gray = red * 0.3 + green * 0.59 + blue * 0.11

程式碼如下：

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 開始濾鏡處理var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (varvar i = 0; i < imgData.data.length / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // 計算gray // 刷新RGB，注意： // imgData.data[i * 4 + 3]存放的是alpha，不需要改變imgData.data[i * 4] = gray; imgData.data[i * 4 + 1] = gray; imgData.data[i * 4 + 2] = gray; } ctx. putImageData(imgData, 0, 0); // 重寫影像資料} }</script>

效果如下圖所示：

4.2 負色效果

負色效果就是用最大值減去目前值。而getImageData 所得的RGB 中的數值理論最大值是：255。所以，公式如下：

new_val = 255 - val

程式碼如下：

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 開始濾鏡處理var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (varvar i = 0; i < imgData.data.length / 4; ++i) { var red = imgData.data[i * 4], green = imgData.data[i * 4 + 1], blue = imgData.data[i * 4 + 2]; // 刷新RGB，注意： // imgData.data[i * 4 + 3]存放的是alpha，不需要改變imgData.data[i * 4] = 255 - imgData.data[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0 , 0); // 重寫圖像資料} }</script>

效果圖如下：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。