canvas实现图片镜像翻转的2种方式


Posted in HTML / CSS onJuly 22, 2020

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图片镜像翻转内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 #HTML / CSS
HTML5 背景的显示区域实现
Jul 09 #HTML / CSS
HTML5图片层叠的实现示例
Jul 07 #HTML / CSS
HTML5 层的叠加的实现
Jul 07 #HTML / CSS
You might like
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
对Python w和w+权限的区别详解
2019/01/23 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
历史系自荐信范文
2013/12/24 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
学习十八大报告感言
2014/02/04 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
党员自我评价范文2015
2015/03/03 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android