溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下怎么用HTML5組件Canvas實現圖像灰度化的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
新建一個html頁面，在body標簽之間加入
復制代碼
代碼如下：
<canvas id =“ myCanvas”>灰色濾鏡</ canvas>
添加一段最簡單的JavaScript腳本
復制代碼
代碼如下：
<pre name =“ code” class =“ javascript”> window.onload = function（）{
var canvas = document.getElementById（“ myCanvas”）;
<span style =“ white-space：pre”> </ span> // TODO：在這里做些事
}
從Canvas對象獲取重新定位對象某些上下文的代碼如下：
復制代碼
代碼如下：
var context = canvas.getContext（“ 2d”）;
在html頁面中加入一幅圖像的html代碼如下
復制代碼
代碼如下：
<img id =“ imageSource” src =“ hanjiaren.jpg” alt =“畫布源” />
從html img對象中獲取圖像對象的javascript代碼如下：
復制代碼
代碼如下：
var image = document.getElementById（“ imageSource”）;
將得到的圖像描繪在畫布對象中的代碼如下：
復制代碼
代碼如下：
context.drawImage（image，0，0）;
從Canvas對象中獲取圖像編碼數據的代碼如下：
復制代碼
代碼如下：
var canvasData = context.getImageData（0，0，canvas.width，canvas.height）;
讀取數值與實現灰度計算的代碼如下：
復制代碼
代碼如下：
for（var x = 0; x <canvasData.width; x ++）{
for（var y = 0; y <canvasData.height; y ++）{
//數組中像素的索引
var idx =（x + y * canvasData .width）* 4;
var r = canvasData.data [idx + 0];
var g = canvasData.data [idx + 1];
var b = canvasData.data [idx + 2];
//計算灰度值
var gray = .299 * r + .587 * g + .114 * b;
//分配灰度值
canvasData.data [idx + 0] =灰色；//紅色通道
canvasData.data [idx + 1] =灰色；//綠色通道
canvasData.data [idx + 2] =灰色；//藍色頻道
canvasData.data [idx + 3] = 255; // Alpha通道
//添加黑色邊框
if（x <8 || y <8 || x>（canvasData.width-8）|| y>（canvasData.height-8））
{
canvasData.data [idx + 0] = 0;
canvasData.data [idx + 1] = 0;
canvasData.data [idx + 2] = 0;
}
}
}
其中計算灰度公式為灰色= 0.299×紅色+ 0.578×綠色+ 0.114 *藍色
讀取出來的像素值順序為RGBA分別代表紅色，綠色，藍色，alpha通道
處理完成的數據要重新加載到Canvas中。代碼如下：
context.putImageData（canvasData，0，0）;
程序最終的效果如下：
完全源代碼如下：
復制代碼
代碼如下：
<html>
<head>
<script>
window.onload = function（）{
var canvas = document.getElementById（“ myCanvas”）;
var image = document.getElementById（“ imageSource”）;
//調整畫布大小的大小
canvas.width = image.width;
canvas.height = image.height;
//獲取2D渲染對象
var context = canvas.getContext（“ 2d”）;
context.drawImage（image，0，0）;
var canvasData = context.getImageData（0，0，canvas.width，canvas.height）;
alert（canvasData.width.toString（））;
alert（canvasData.height.toString（））;
//
（（var x = 0; x <canvasData.width; x ++）的灰色濾鏡{
for（var y = 0; y <canvasData.height; y ++）{
//數組中像素的索引
var idx =（x + y * canvasData.width）* 4;
var r = canvasData.data [idx + 0];
var g = canvasData.data [idx + 1];
var b = canvasData.data [idx + 2];
//計算灰度值
var gray = .299 * r + .587 * g + .114 * b;
//分配灰度值
canvasData.data [idx + 0] =灰色；//紅色通道
canvasData.data [idx + 1] =灰色；//綠色通道
canvasData.data [idx + 2] =灰色；//藍色頻道
canvasData.data [idx + 3] = 255; // Alpha通道
//添加黑色邊框
if（x <8 || y <8 || x>（canvasData.width-8）|| y>（canvasData.height-8））
{
canvasData.data [idx + 0 ] = 0;
canvasData.data [idx + 1] = 0;
canvasData.data [idx + 2] = 0;
}
}
}
context.putImageData（canvasData，0，0）; //坐標為0,0
};
</ script>
</ head>
<body>
<h3> Hello World！</ h3>
<img id =“ imageSource” src =“ hanjiaren.jpg” alt =“畫布源” />
<canvas id =“ myCanvas” >灰色濾鏡</ canvas>
</ body>
</ html>
代碼中的文件可以替換任意你想要看到的圖片文件
HTML5，原來如此神奇。程序在google瀏覽器中測試通過，
最后的忠告，千萬不要在本地嘗試運行上面的代碼，google瀏覽器的安全檢查會自動阻止從瀏覽器中識別非域的文件
最好在tomcat或任意一個網絡容器的服務器上發布以后從谷歌瀏覽器查看效果即可。
以上就是“怎么用HTML5組件Canvas實現圖像灰度化”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
