【第4章圖像與視頻】4.5 操作圖像的像素

文章目錄

前言
示例-獲取和修改圖像數據
圖像數據的遍歷方式
圖像濾鏡
- 負片濾鏡
- 黑白濾鏡
- 浮雕濾鏡
- filter濾鏡屬性

前言

getImageData() 與 putImageData() 這兩個方法分別用來獲取圖像的像素信息，以及向圖像中插入像素。與此同時，如果有需要，也可以修改像素的值，所以說，這兩個方法能夠讓開發展對圖像之中的像素進行任何可以想見的操作。

屬性	描述
width	返回 ImageData 對象的寬度
height	返回 ImageData 對象的高度
data	返回一個對象，其包含指定的 ImageData 對象的圖像數據

方法	描述
createImageData()	創建新的、空白的 ImageData 對象
getImageData()	返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數據
putImageData()	把圖像數據（從指定的 ImageData 對象）放回畫布上

示例-獲取和修改圖像數據

使用getImageData()方法獲取imagedata數據源，然后僅中心100*100區域替換原始Canvas。

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-9-putImageData使用示例</title><style>html,body {margin: 0;padding: 0;}</style></head><body><canvas id="canvas" width="300" height="200"> canvas not supports </canvas><script>// 尺寸const width = 300,height = 200// 目標Canvas上下文const canvas = document.getElementById('canvas'),context = canvas.getContext('2d')// 目標圖片const image1 = new Image()image1.src = './3.jpg'image1.onload = () => {context.drawImage(image1, 0, 0, width, height)}// 覆蓋圖片const image2 = new Image()image2.src = './2.jpg'image2.onload = function () {// 獲取覆蓋圖數據const dirtyCanvas = document.createElement('canvas'),dirtyContext = dirtyCanvas.getContext('2d')// 設置屏幕外Canvas尺寸dirtyCanvas.width = widthdirtyCanvas.height = height// 繪制替換圖dirtyContext.drawImage(this, 0, 0, width, height)// 此時可以得到imagedata數據const imagedata = dirtyContext.getImageData(0, 0, width, height)// console.log(imagedata)// 然后中間100*100區域替換目標Canvascontext.putImageData(imagedata, 0, 0, 100, 50, 100, 100)}</script></body>
</html>

圖像數據的遍歷方式

// 遍歷每個像素
for (let i = 0; i < length, ++i) {value = data[i]
}// 反向遍歷每個像素
index = length - 1
while (index > = 0) {value = data[index]index--
}// 只處理 alpha 值，不修改紅、綠、藍分量
for(let index=3; index < length - 4; index+=4) {data[index] = ... // Alpha
}// 只處理紅、綠、藍分量，不修改 alpha 值
for(let index=0; index < length - 4; index+=4) {data[index] = ... // Reddata[index + 1] = ... // Greendata[index + 2] = ... // Blue
}

圖像濾鏡

原始圖片：
在這里插入圖片描述

負片濾鏡

負片濾鏡會從 255 之中減去每個像素的紅、綠、藍分量值，再將差值設置回去，這樣也就等于“反轉”了該像素的顏色。

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-13-負片濾鏡</title><style>#canvas {background: rgba(0, 0, 0, 0.4);}</style></head><body><div id="controls">負片濾鏡<input type="checkbox" id="negativeCheckbox" /></div><canvas id="canvas" width="1000" height="600"> canvas not supports </canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),negativeCheckbox = document.getElementById('negativeCheckbox')const image = new Image()image.src = './waterfall.png'image.onload = () => {context.drawImage(image, 0, 0, canvas.width, canvas.height)}negativeCheckbox.onchange = (e) => {const imagedata = context.getImageData(0, 0, canvas.width, canvas.height),data = imagedata.datafor (let i = 0; i < data.length - 4; i += 4) {data[i] = 255 - data[i]data[i + 1] = 255 - data[i + 1]data[i + 2] = 255 - data[i + 2]}context.putImageData(imagedata, 0, 0)}</script></body>
</html>

黑白濾鏡

黑白濾鏡會計算出每個像素紅、綠、藍分量值的平均值，然后將三個分量都設置為這一均值，于是，就把圖像由彩色變成了黑白。

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-14-黑白濾鏡</title><style>#canvas {background: rgba(0, 0, 0, 0.4);}</style></head><body><div id="controls">黑白濾鏡<input type="checkbox" id="drawInColorToggleChebox" /></div><canvas id="canvas" width="1000" height="600"> canvas not supports </canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),drawInColorToggleChebox = document.getElementById('drawInColorToggleChebox')function drawInColor() {context.drawImage(image, 0, 0, canvas.width, canvas.height)}function drawInBlackAndWhite() {const imagedata = context.getImageData(0, 0, canvas.width, canvas.height),data = imagedata.datafor (let i = 0; i < data.length - 4; i += 4) {average = (data[i] + data[i + 1] + data[i + 2]) / 3data[i] = averagedata[i + 1] = averagedata[i + 2] = average}context.putImageData(imagedata, 0, 0)}const image = new Image()image.src = './waterfall.png'image.onload = () => {drawInColor()}drawInColorToggleChebox.onchange = (e) => {if (e.target.checked) {drawInBlackAndWhite()} else {drawInColor()}}</script></body>
</html>

浮雕濾鏡

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-14-浮雕濾鏡</title><style>#canvas {background: rgba(0, 0, 0, 0.4);}</style></head><body><div id="controls">浮雕濾鏡<input type="checkbox" id="embossCheckbox" /></div><canvas id="canvas" width="1000" height="600"> canvas not supports </canvas><script>const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),embossCheckbox = document.getElementById('embossCheckbox')function drawOriginalImage() {context.drawImage(image, 0, 0, canvas.width, canvas.height)}function drawEmbossImage() {let iamgedata, data, length, widthiamgedata = context.getImageData(0, 0, canvas.width, canvas.height)data = iamgedata.datalength = data.lengthwidth = iamgedata.widthindex = 3for (let i = 0; i < length; i++) {if ((i + 1) % 4 !== 0) {data[i] = 255 / 2 + 2 * data[i] - data[i + 4] - data[i + width * 4]}}context.putImageData(iamgedata, 0, 0)}const image = new Image()image.src = './waterfall.png'image.onload = () => {drawOriginalImage()}embossCheckbox.onchange = (e) => {if (e.target.checked) {drawEmbossImage()} else {drawOriginalImage()}}</script></body>
</html>

filter濾鏡屬性

Canvas 2D API 的 CanvasRenderingContext2D.filter 屬性是用來提供模糊、灰度等濾鏡效果。它類似于 CSS filter 屬性，并且接受相同的值。

具體說明見 MDN-filter 或 Canvas API中文網

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/907520.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/907520.shtml
英文地址，請注明出處：http://en.pswp.cn/news/907520.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！