html5 canvas图像处理的实现代码分享(2)-木庄网络博客

2022-03-14 23:05:38 PHP中文网 JavaScript 百度已收录

矩阵中每个像素点有四个通道分别储存r/g/b/a的值。（四个值按序连续的排列，为一维矩阵）

所以每两个像素间相隔4位，计算时

1	`k=4(image.widthj+i);为像素点（i,j）的位置，`

imagedata1.data[k+0]表示R分量，依次类推，其中剩下的分别为G、B分量还有透明度。

这样上面的程序就实现了简单的图像的反转功能。
效果如下：

另外需要注意的是，getImageData()函数可能会涉及到跨域的problem，所以建议配置apache环境并将该html放置到其根目录下进行操作。

相关阅读 >>

更多相关阅读请进入《HTML5》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者