canvas指定区域生成图片(canvas实现图片镜像翻转的2种方式)
类别:Web前端 浏览量:851
时间:2021-10-18 11:31:08 canvas指定区域生成图片
canvas实现图片镜像翻转的2种方式1. 通过canvas自带的画布方法进行翻转
var img = new Image(); //这个就是 img标签的dom对象 img.src = './sy.png'; img.onload = function () { //图片加载完成后,执行此方法 ctx.drawImage(img, posx, posy, 210, 80); };
play.addEventListener('click', function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//清除画布 //位移来做镜像翻转 ctx.translate(210+ posx * 2, 0); ctx.scale(-1, 1); //左右镜像翻转 //ctx.translate(0, 160 + posy * 2); //ctx.scale(1, -1); //上下镜像翻转 ctx.drawImage(img, 0, 0, 210, 80); });
2.像素点的镜像翻转方法
//竖向像素反转 function imageDataVRevert(sourceData, newData) { for (var i = 0, h = sourceData.height; i < h; i++) { for (var j = 0, w = sourceData.width; j < w; j++) { newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[(h - i) * w * 4 + j * 4 + 0]; newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[(h - i) * w * 4 + j * 4 + 1]; newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[(h - i) * w * 4 + j * 4 + 2]; newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[(h - i) * w * 4 + j * 4 + 3]; } } return newData; }
//横向像素反转 function imageDataHRevert(sourceData, newData) { for (var i = 0, h = sourceData.height; i < h; i++) { for (j = 0, w = sourceData.width; j < w; j++) { newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[i * w * 4 + (w - j) * 4 + 0]; newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[i * w * 4 + (w - j) * 4 + 1]; newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[i * w * 4 + (w - j) * 4 + 2]; newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[i * w * 4 + (w - j) * 4 + 3]; } } return newData; } `` var img = new Image(); //这个就是 img标签的dom对象 img.src = './sy.png'; img.onload = function () { //图片加载完成后,执行此方法 ctx.drawImage(img, 0, 0, 210, 80); }; //像素点操作 var imgData = ctx.getImageData(0, 0, 210, 80); var newImgData = ctx.getImageData(0, 0, 210, 80); // var newImgData = ctx.getImageData(0, 0, w, h); ctx.putImageData(imageDataVRevert(newImgData, imgData), 0, 0); //上下翻转 // ctx.putImageData(imageDataHRevert(newImgData, imgData), 0, 0);//左右翻转~~~~
到此这篇关于canvas实现图片镜像翻转的2种方式的文章就介绍到这了,更多相关canvas图片镜像翻转内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
- 前端ui 滑动条(AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码)
- canvas绘制渐变图形(Canvas实现放大镜效果完整案例分析附代码)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- canvas绘制动态线条(5分钟实现Canvas鼠标跟随动画背景)
- 小程序canvas不显示(小程序canvas中文字设置居中锚点)
- canvas如何保存当前的图片(canvas如何实现多张图片编辑的图片编辑器)
- canvas动态图(canvas绘制太极图的实现示例)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- html5 canvas touch(html5 canvas手势解锁源码分享)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- canvas怎么画特效(canvas中普通动效与粒子动效的实现代码示例)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
- 今天要吃什么(今天要吃什么菜)
- 营养餐是什么(学校营养餐是什么)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
热门推荐
- js的模块模式设计(如何理解JavaScript模块化)
- phpstudy安装包打不开(phpStudy访问速度慢和启动失败的解决办法)
- asp.net自定义分页控件
- ASP.NET 生成条形码
- mysql中如何进行模糊查询(MySQL模糊查询用法大全正则、通配符、内置函数)
- jquery的each的用法
- OpenLDAP docker使用教程(Docker搭建OpenLDAP+phpLDAPadmin统一用户认证的方法)
- windows server 2008r2怎么安装(Windows Server2008 R2 MVC 环境安装配置教程)
- C#如何读取Excel
- python第三方库的使用方法和作用(Python第三方库face_recognition在windows上的安装过程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9