效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖片轉化成黑白案例</title>
<style>
.conntainer {
display: flex;
}
</style>
</head>
<body>
<div class="conntainer">
<img src="./bg2.jpg" alt="背景圖片">
<button onclick="change()">轉換</button>
<canvas id="canvas"></canvas>
</div>
<script>
/**
*圖片是有許多的像素點組成的,存在在一個特定的數組裏面, 每4位爲一個像素點,要爲黑白的話,取前面3位的平均值就好
*
*/
function change() {
const img = document.querySelector('img');
const cvs = document.getElementById("canvas");
cvs.width = img.width;
cvs.height = img.height;
const ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0);
// 獲取圖片的所有像素點
const imgArrData = ctx.getImageData(0, 0, img.width, img.height);
for (let i = 0; i < imgArrData.data.length; i += 4) {
let r = imgArrData.data[i],
g = imgArrData.data[i + 1],
b = imgArrData.data[i + 2];
const avg = (r + g + b) / 3;
imgArrData.data[i] = imgArrData.data[i + 1] = imgArrData.data[i + 2] = avg;
}
console.log(imgArrData)
ctx.putImageData(imgArrData, 0, 0);
}
</script>
</body>
</html>