canvas实现图像垂直翻转

假设这有一张养眼图片,它长这样

接着我想把照片垂直翻转一下,变成这样

翻转后体验了一把倒立的美女. 经过对比,垂直翻转后,上边和下边都互换了过来,也就是说,上边的像素根据垂直中轴对称和下边的像素进行了互换操作,垂直翻转的关键点就是每一列的上下像素根据轴对称,确实很简单,以下是实现的步骤

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)

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

The End~

canvas实现图像垂直翻转相关推荐

使用canvas操作图像
canvas 获取截图具体是使用 canvas 的 toDataURL 方法: var image = new Image(); image.src = canvas.toDataURL(&qu ...
canvas绘制图像image
canvas绘制图像image 1.image的三个script的基本语法准备工作:1.定义画布长度,获取2D绘图环境 2.建立对面对象,设置图片路径 3.载入图片,开始绘制 a.简单的画布 ...
Python实现图像垂直翻转
Python实现图像垂直翻转图像垂直翻转是对图像进行镜像操作的一种,通过Python的PIL库可以很方便地实现图像的反转操作.在本篇文章中,我将介绍如何使用Python实现图像的垂直翻转. 首先需要 ...
canvas绘制图像-drawImage
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html5图片灰度显示,HTML5 组件Canvas实现图像灰度化
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死不是我要关心的,我关心的C ...
Canvas 渐变图像组合效果颜色翻转
// canvas 简单例子 var canvas = document.getElementById('canvas'); if (canvas.getContext) {var context = ...
HTML5 组件Canvas实现图像灰度化
新建一个html页面,在body tag之间加入 <canvas id="myCanvas">Gray Filter</canvas> 添加一段最简单的 ...
HTML5 Canvas操作图像像素
操作图像像素如果要对图像进行进一步的处理,就可以先通过getImageData()方法获取图像像素,进行处理后再通过putImageData()方法,把处理后的像素重新绘制到画布中. 1)getIm ...
java canvas旋转_在HTML5 Canvas上将图像旋转90度
我无法使用HTML5画布旋转图像 . 我想我的数学错误,并希望得到任何帮助 . 在移动设备上,我在150px x 558px画布上捕获用户签名 . 我试图创建一个558像素×150像素的图像,这只是旋 ...

canvas实现图像垂直翻转

canvas实现图像垂直翻转相关推荐

最新文章

热门文章