canvas实现图像水平翻转

假如有一张养眼的美女图片,像这样

接着照片水平翻转一下,看还养不养眼

翻转后依然养眼,我们来对比一下,水平翻转后,左边和右边都互换了过来,也就是说,左边的像素根据中轴对称和右边的像素进行了互换操作.木有错,水平翻转的关键点就是每一行的左右像素根据轴对称,就是这么简单,以下是实现的步骤

1.获取画布上图像的像素信息

2.遍历每一行作为外循环

3.遍历当前行的列作为内循环,把列的左边像素按照垂直轴对称和右边的像素互换

4.把处理后的像素信息放回画布

so easy，下面继续

      function Filter(context){
        this.context = context;
      }
      Filter.prototype.constructor = Filter;
      Filter.prototype.flipHorizontal = function(startX, startY, w, h){
        // 1.获取通信信息
        let imgdata = this.context.getImageData(startX, startY, w, h);
        let middleAxle /*中轴*/ = (w * 4) / 2;

        // 2.遍历行
        for (let curRow = 0; curRow < h; curRow++) {
          let aisleStart /*每行开始的通道位置*/ = curRow * w * 4,
              aisleEnd /*每行结束的通道位置*/ = (curRow + 1) * w * 4 - 4,
              curMiddleAxle /*每一行中轴所在的位置*/ = aisleEnd - middleAxle;

          // 3.遍历当前行的列作为内循环,把列的左边像素按照轴对称和右边的像素互换
          for (; aisleStart <= curMiddleAxle; aisleStart += 4, aisleEnd -= 4) {
            // 临时存放
            let tr = imgdata.data[aisleStart],
                tg = imgdata.data[aisleStart + 1],
                tb = imgdata.data[aisleStart + 2],
                ta = imgdata.data[aisleStart + 3];
    
            imgdata.data[aisleStart] = imgdata.data[aisleEnd];
            imgdata.data[aisleStart + 1] = imgdata.data[aisleEnd + 1];
            imgdata.data[aisleStart + 2] = imgdata.data[aisleEnd + 2];
            imgdata.data[aisleStart + 3] = imgdata.data[aisleEnd + 3];
    
            imgdata.data[aisleEnd] = tr;
            imgdata.data[aisleEnd + 1] = tg;
            imgdata.data[aisleEnd + 2] = tb;
            imgdata.data[aisleEnd + 3] = ta;
          }
        }

        // 4.把处理后的像素信息放回画布
        this.context.clearRect(startX, startY, w, h);
        this.context.putImageData(imgdata, startX, startY);
      }

接着对预先渲染到画布上的图像，一顿操作，调用flipHorizontal方法,大功告成! 查看示例(flipHorizontal)

总结一下:图像的翻转其实是对图像每个像素的通道按照一定的规则(这里规则是左右颠倒)重新排列.

The End~