在這個(gè)數(shù)碼產(chǎn)品泛濫的時(shí)代里，拍照已經(jīng)成為生活不可或缺的一部分，不管是居家，踏青，還是遠(yuǎn)途旅行，總會(huì)拍一些美美的照片。但相機(jī)直接拍出來的照片往往和我們的心理預(yù)期有一定的差距，那么怎么減小這種差距呢？答案是美顏P圖，于是各種美顏相機(jī)鋪天蓋地而來，P圖已經(jīng)成為一門隨身技能。
其實(shí)所謂的美顏不過是很多濾鏡的配合使用罷了，而濾鏡就是通過一定的算法來操作圖片像素進(jìn)而得到一些特殊的圖像效果。用過Photoshop的朋友都清楚ps中有一大堆的濾鏡，下面我們將會(huì)用js的canvas技術(shù)去實(shí)現(xiàn)幾種濾鏡效果。
最近學(xué)習(xí)了 HTML5 中的重頭戲-- canvas 。利用 canvas，前端人員可以很輕松地、進(jìn)行圖像處理。其 API 繁多，這次主要學(xué)習(xí)常用的 API，并且完成以下兩個(gè)代碼：
1 了解 canvas？
1.1 什么是 canvas？
這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
1.2 canvas 和 svg、vml 的區(qū)別？
<canvas> 標(biāo)記和 SVG 以及 VML 之間的一個(gè)重要的不同是， <canvas> 有一個(gè)基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個(gè) XML 文檔來描述繪圖。
2 canvas 繪圖學(xué)習(xí)
大多數(shù) Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上。而 <canvas> 元素本身默認(rèn)的寬高分別是 300px、150px。
2.1 canvas 繪制矩形
// 處理canvas元素var c = document.querySelector("#my-canvas");c.width = 150;c.height = 70;// 獲取 指定canvas標(biāo)簽 上的context對(duì)象var ctx = c.getContext("2d");ctx.fillStyle = "#FF0000"; // 顏色ctx.fillRect(0, 0, 150, 75); // 形狀2.2 canvas 繪制路徑
var c = document.querySelector("#my-canvas");var ctx = c.getContext("2d");ctx.moveTo(0, 0); // 開始坐標(biāo)ctx.lineTo(200, 100); // 結(jié)束坐標(biāo)ctx.stroke(); // 立即繪制2.3 canvas 繪制圓形
對(duì)于 ctx.arc() 這個(gè)接口，5 個(gè)參數(shù)是: (x,y,r,start,stop) 。其中，x 和 y 是圓心坐標(biāo)，r 是半徑。
而 start 和 stop 的單位是 弧度制 。不是長(zhǎng)度，也不是 °。
var c = document.querySelector("#my-canvas");var ctx = c.getContext("2d");ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx.stroke();2.4 canvas 繪制文字
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.font = "30px Arial";ctx.fillText("Hello World", 10, 50);3 canvas 圖像處理學(xué)習(xí)
3.1 常用 API 接口
關(guān)于圖像處理的 API，主要有 4 個(gè)：
繪制圖像： drawImage(img,x,y,width,height) 或 drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
獲取圖像數(shù)據(jù)： getImageData(x,y,width,height)
重寫圖像數(shù)據(jù)： putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])
導(dǎo)出圖像： toDataURL([type, encoderOptions])
更詳細(xì)的 API 和參數(shù)說明請(qǐng)看： canvas 圖像處理 API 參數(shù)講解
3.2 繪制圖像
在此些 API 的基礎(chǔ)上，我們就可以在 canvas 元素中繪制我們的圖片。假設(shè)我們圖片是 ./img/photo.jpg 。
<script> window.onload = function () { var img = new Image() // 聲明新的Image對(duì)象 img.src = "./img/photo.jpg" // 圖片加載后 img.onload = function () { var canvas = document.querySelector("#my-canvas"); var ctx = canvas.getContext("2d"); // 根據(jù)image大小，指定canvas大小 canvas.width = img.width canvas.height = img.height // 繪制圖像 ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>如下圖所示，圖片被畫入了 canvas：
4 實(shí)現(xiàn)濾鏡
這里我們主要借用 getImageData 函數(shù)，他返回每個(gè)像素的 RGBA 值。借助圖像處理公式，操作像素進(jìn)行相應(yīng)的、數(shù)學(xué)運(yùn)算即可。
4.1 去色效果
去色效果相當(dāng)于就是老舊相機(jī)拍出來的黑白照片。人們根據(jù)人眼的敏感程度，給出了如下公式：
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 (var 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; // 計(jì)算gray // 刷新RGB，注意： // imgData.data[i * 4 + 3]存放的是alpha，不需要改動(dòng) imgData.data[i * 4] = gray; imgData.data[i * 4 + 1] = gray; imgData.data[i * 4 + 2] = gray; } ctx.putImageData(imgData, 0, 0); // 重寫圖像數(shù)據(jù) } }</script>效果如下圖所示：
4.2 負(fù)色效果
負(fù)色效果就是用最大值減去當(dāng)前值。而 getImageData 獲得的 RGB 中的數(shù)值理論最大值是：255。所以，公式如下：
new_val = 255 - val
代碼如下：
4.2 負(fù)色效果<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 (var 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，不需要改動(dòng) 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); // 重寫圖像數(shù)據(jù) } }</script>效果圖如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
