溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用HTML5組件Canvas實(shí)現(xiàn)圖像灰度化

發(fā)布時(shí)間：2022-03-09 14:47:25 來源：億速云 閱讀：200 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下怎么用HTML5組件Canvas實(shí)現(xiàn)圖像灰度化的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

新建一個(gè)html頁面，在body標(biāo)簽之間加入

復(fù)制代碼

代碼如下：

<canvas id =“ myCanvas”>灰色濾鏡</ canvas>

添加一段最簡單的JavaScript腳本

復(fù)制代碼

代碼如下：

<pre name =“ code” class =“ javascript”> window.onload = function（）{

var canvas = document.getElementById（“ myCanvas”）;

<span style =“ white-space：pre”> </ span> // TODO：在這里做些事

}

從Canvas對象獲取重新定位對象某些上下文的代碼如下：

復(fù)制代碼

代碼如下：

var context = canvas.getContext（“ 2d”）;

在html頁面中加入一幅圖像的html代碼如下

復(fù)制代碼

代碼如下：

<img id =“ imageSource” src =“ hanjiaren.jpg” alt =“畫布源” />

從html img對象中獲取圖像對象的javascript代碼如下：

復(fù)制代碼

代碼如下：

var image = document.getElementById（“ imageSource”）;

將得到的圖像描繪在畫布對象中的代碼如下：

復(fù)制代碼

代碼如下：

context.drawImage（image，0，0）;

從Canvas對象中獲取圖像編碼數(shù)據(jù)的代碼如下：

復(fù)制代碼

代碼如下：

var canvasData = context.getImageData（0，0，canvas.width，canvas.height）;

讀取數(shù)值與實(shí)現(xiàn)灰度計(jì)算的代碼如下：

復(fù)制代碼

代碼如下：

for（var x = 0; x <canvasData.width; x ++）{

for（var y = 0; y <canvasData.height; y ++）{

//數(shù)組中像素的索引

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];

//計(jì)算灰度值

var gray = .299 * r + .587 * g + .114 * b;

//分配灰度值

canvasData.data [idx + 0] =灰色；//紅色通道

canvasData.data [idx + 1] =灰色；//綠色通道

canvasData.data [idx + 2] =灰色；//藍(lán)色頻道

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;

}

}

}

其中計(jì)算灰度公式為灰色= 0.299&times;紅色+ 0.578&times;綠色+ 0.114 *藍(lán)色

讀取出來的像素值順序?yàn)镽GBA分別代表紅色，綠色，藍(lán)色，alpha通道

處理完成的數(shù)據(jù)要重新加載到Canvas中。代碼如下：

context.putImageData（canvasData，0，0）;

程序最終的效果如下：

完全源代碼如下：

復(fù)制代碼

代碼如下：

<html>

<head>

<script>

window.onload = function（）{

var canvas = document.getElementById（“ myCanvas”）;

var image = document.getElementById（“ imageSource”）;

//調(diào)整畫布大小的大小

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 ++）{

//數(shù)組中像素的索引

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];

//計(jì)算灰度值

var gray = .299 * r + .587 * g + .114 * b;

//分配灰度值

canvasData.data [idx + 0] =灰色；//紅色通道

canvasData.data [idx + 1] =灰色；//綠色通道

canvasData.data [idx + 2] =灰色；//藍(lán)色頻道

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）; //坐標(biāo)為0,0

};

</ script>

</ head>

<body>

<h3> Hello World！</ h3>

<img id =“ imageSource” src =“ hanjiaren.jpg” alt =“畫布源” />

<canvas id =“ myCanvas” >灰色濾鏡</ canvas>

</ body>

</ html>

代碼中的文件可以替換任意你想要看到的圖片文件

HTML5，原來如此神奇。程序在google瀏覽器中測試通過，

最后的忠告，千萬不要在本地嘗試運(yùn)行上面的代碼，google瀏覽器的安全檢查會自動阻止從瀏覽器中識別非域的文件

最好在tomcat或任意一個(gè)網(wǎng)絡(luò)容器的服務(wù)器上發(fā)布以后從谷歌瀏覽器查看效果即可。

以上就是“怎么用HTML5組件Canvas實(shí)現(xiàn)圖像灰度化”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手