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 相关文章推荐
CSS3 圆角效果
Jul 15 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Vue指令指令大全
2019/02/09 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
简单的python后台管理程序
2017/04/13 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
python 删除非空文件夹的实例
2018/04/26 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python制作填词游戏步骤详解
2019/05/05 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python同步windows和linux文件
2019/08/29 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
幼儿园消防演练方案
2014/02/13 职场文书
家长会演讲稿
2014/04/26 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS