转载自:https://blog.csdn.net/u011539729/article/details/102874601
假设这有一张养眼图片,它长这样
接着我想把照片垂直翻转一下,变成这样
翻转后体验了一把倒立的美女. 经过对比,垂直翻转后,上边和下边都互换了过来,也就是说,上边的像素根据垂直中轴对称和下边的像素进行了互换操作,垂直翻转的关键点就是每一列的上下像素根据轴对称,确实很简单,以下是实现的步骤
1.获取画布上图像的像素信息
2.遍历总行数一半的每一行作为外循环(向下取整)
3.遍历当前行的列作为内循环,把列的每个通道按照水平轴对称和镜像里的通道互换
4.把处理后的像素信息放回画布
现在知道怎么做了,继续
function Filter(context){
this.context = context;
}
Filter.prototype.constructor = Filter;
Filter.prototype.flipVertical = function(startX, startY, w, h){
// 1.获取图像信息
let imgdata = this.context.getImageData(startX, startY, w, h);
let middleAxle /*中轴*/ = Math.floor(h / 2),
rowAisles = w * 4;
// 2.遍历总行数一半的每一行作为外循环(向下取整)
for (var curRow = 0; curRow < middleAxle; curRow++) {
//
let aisleStart /*开始的通道位置*/ = curRow * rowAisles,
mirrorStart /*中轴对称的开始位置*/ = (h - curRow - 1) * rowAisles;
// 3.遍历当前行的列作为内循环,把列的每个通道按照水平轴对称和镜像里的通道互换
for (; aisleStart < rowAisles * (curRow + 1); aisleStart += 4, mirrorStart += 4) {
var tr = imgdata.data[aisleStart],
tg = imgdata.data[aisleStart + 1],
tb = imgdata.data[aisleStart + 2],
ta = imgdata.data[aisleStart + 3];
imgdata.data[aisleStart] = imgdata.data[mirrorStart];
imgdata.data[aisleStart + 1] = imgdata.data[mirrorStart + 1];
imgdata.data[aisleStart + 2] = imgdata.data[mirrorStart + 2];
imgdata.data[aisleStart + 3] = imgdata.data[mirrorStart + 3];
imgdata.data[mirrorStart] = tr;
imgdata.data[mirrorStart + 1] = tg;
imgdata.data[mirrorStart + 2] = tb;
imgdata.data[mirrorStart + 3] = ta;
}
}
// 4.把处理后的像素信息放回画布
this.context.clearRect(startX, startY, w, h);
this.context.putImageData(imgdata, startX, startY);
}
接着对预先渲染到画布上的图像,一顿操作猛如虎,调用flipVertical方法,大功告成! 查看示例(flipVertical)
示例Github:https://github.com/Xlipotter/dispose-graphic
总结一下:图像的翻转其实是对图像每个像素的通道按照一定的规则(这里规则是上下颠倒)重新排列).
The End~