canavs像素操作 - Kaiqisan

最新推荐文章于 2021-08-24 21:10:47 发布

kaiqisan

最新推荐文章于 2021-08-24 21:10:47 发布

阅读量249

点赞数

分类专栏：前端canvas知识库文章标签： canvas javascript html5

本文链接：https://blog.csdn.net/qq_33933205/article/details/107329389

版权

前端canvas知识库专栏收录该内容

20 篇文章 2 订阅

订阅专栏

像素操作

就像它的名字一样，对图片的每一个像素进行操作，包括获取像素和修改像素。

关键代码

getImageData(x0, y0, width, height): 获取在某一个区间的像素信息， x1 y1 是开始坐标，width height 是希望获取像素的画布区间长宽。通过这个方法获取来的像素数据需要一个参数来接收，它是一个数组，一共有 width * height * 4 个，第4n个是所有点的 “r信息” 第4n+1个是所有点的 “g信息” 第4n+2个是所有点的 “b信息” 第4n+3个是所有点的 “a信息”（上面的RGBA是代表RedGreenBlue和Alpha的色彩空间）。

imgData = ctx.getImageData(0, 0, 400, 600)
// 一共有 400 * 600 * 4 个元素
console.log(imgData.data) // imgData有三个成员 ，width获取的像素区间的宽 ,height获取的像素区间的高，这
// 两个数据是只读的不可修改 data,具体的像素信息，每个成员都是一个整数，透明区域的rgba默认为（0, 0, 0, 0）

putImageData(imgData, x, y): 重新绘制图像。利用了上面的获取图像像素信息，它可以进行修改，但修改完成之后无法直接对图像当前的像素进行修改。而需要使用该方法重新把像素放回去，上面的imgData就是一个像素信息对象，x,y是新的像素数据在x轴，y轴的偏移量。如果您通过加工好的新像素信息覆盖原来的图像，请将x, y的值设置成与上面的getImageData的x0, y0一致即可。

ctx.putImageData(imgData, 0, 0)

putImageData(imagedata, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);：更多的参数，前三个参数与前面的一致，后面的四个参数是可选项，但要写就要全部一起写！它可以用来剪切图像。不多解释，看图。
doImgData

简单应用

主要功能

鼠标移到哪里，就获取当前鼠标所指的像素的rgba值，也可以实现反转色。

参考源码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>像素操作</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="demo" width="1000px" height="600px">
	您的浏览器不支持canvas，请升级您的浏览器
</canvas>
<button class="turn">点击反转颜色</button>
<div>
	<p class="color">颜色信息：r: g: b: a:</p>
	<div class="block"></div>
</div>

</body>
<script>
    /*
	*
	* 像素操作
	*
	* */
    window.onload = () => {
        let canvas = document.getElementById('demo')
        let ctx = canvas.getContext('2d')

        let image = new Image()
        let image2 = new Image()
        image.src = './imgs/cat1.jpg' // 图像路径自己定义
        image2.src = './imgs/street.png'
        let imgData
        image.onload = () => {
            ctx.drawImage(image, 0, 0, 250, 450)
            imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
        }
        let a = document.getElementsByClassName('turn')
        a[0].onclick = () => {
            reverse(imgData)
        }
	   // 反转色
        function reverse(imgData) {
            // 里面有图像的宽高还有所有像素的信息（一个1像素信息占四个空间（rgba四个））
            for (let i = 0; i < imgData.data.length; i++) {
                imgData.data[4 * i] = 255 - imgData.data[4 * i]
                imgData.data[4 * i + 1] = 255 - imgData.data[4 * i + 1]
                imgData.data[4 * i + 2] = 255 - imgData.data[4 * i + 2]
            }
            // 修改完之后再放回去
            ctx.putImageData(imgData, 0, 0) // 后两个参数表示从哪里开始渲染
        }

        // 这里开始获取动态的单个像素点
        let b = document.getElementsByClassName('color')

        document.onmousemove = (e) => {
            e = window.event || e
            // 判断是否在画布内
            if (e.clientX > canvas.offsetLeft && e.clientX < canvas.offsetLeft + canvas.clientWidth && e.clientY > canvas.offsetTop && e.clientY < canvas.offsetTop + canvas.clientHeight) {
                let colorList = []
                let toTop = Math.floor(getToTop()) // 强制取整
                colorList[0] = imgData.data[((e.clientY - canvas.offsetTop + toTop) * canvas.width + e.clientX - canvas.offsetLeft) * 4]
                colorList[1] = imgData.data[((e.clientY - canvas.offsetTop + toTop) * canvas.width + e.clientX - canvas.offsetLeft) * 4 + 1]
                colorList[2] = imgData.data[((e.clientY - canvas.offsetTop + toTop) * canvas.width + e.clientX - canvas.offsetLeft) * 4 + 2]
                colorList[3] = imgData.data[((e.clientY - canvas.offsetTop + toTop) * canvas.width + e.clientX - canvas.offsetLeft) * 4 + 3]
                b[0].innerHTML = `颜色信息：r:${colorList[0] ? colorList[0] : 0}g:${colorList[1] ? colorList[1] : 0}b:${colorList[2] ? colorList[2] : 0}a:${colorList[3] ? colorList[3] : 0}`
            } else {
                b[0].innerHTML = `越界`
			}
        }

        // 有滚轮的时候用,避免滚轮的高度差
        function getToTop() {
            return document.documentElement.scrollTop
        }

    }
</script>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	body {
		background-color: #eee;
		text-align: center;
		transition: 0.5s;
	}

	#demo {
		margin-top: 50px;
		background-color: white;
		border-radius: 15px;

	}

	.color {
		width: 500px;
		/*height: 100px;*/
		padding: 12px;
		margin: 0 auto;
		border: 1px solid #666666;
	}

	.turn {
		padding: 15px;
		margin: 50px auto;
		display: block;
	}

	.block {
		width: 50px;
		height: 50px;
	}
</style>
</html>

页面的排版比较差,大家凑合着看！基本功能还是可以实现的。

总结

画布的像素操作从一张图片的本质开始入手，这就可以有很多操作了，现在很多图像的智能处理都需要一定的算法对图像进行处理（修图，美颜，去痘等等），它就是利用了许多的算法来修改图片的像素，最经典的就是滤镜的使用，也是最简单的（上面的反转色也是）。这个方法如果用得好，就会很成功，它能做到一般方法达不到的境界，也能够事半功倍，毕竟从原理层出发，但是不要忘记像素的庞大的计算量，搞不好也会使本来性能就不好的js程序雪上加霜！

kaiqisan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canavs像素操作 - Kaiqisan

像素操作就像它的名字一样，对图片的每一个像素进行操作，包括获取像素和修改像素。关键代码getImageData(x0, y0, width, height): 获取在某一个区间的像素信息， x1 y1 是开始坐标，width height 是希望获取像素的画布区间长宽。通过这个方法获取来的像素数据需要一个参数来接收，它是一个数组，一共有 width * height * 4 个，第4n个是所有点的 “r信息” 第4n+1个是所有点的 “g信息” 第4n+2个是所有点的 “b信息” 第4n+3个是所
复制链接

扫一扫