PHP世纪论坛

 找回密码
 立即注册
搜索
查看: 338|回复: 0

在HTML5中翻转图片

[复制链接]

32

主题

32

帖子

194

积分

新手上路

Rank: 1

积分
194
发表于 2016-3-19 14:57:51 | 显示全部楼层 |阅读模式
貌似 HTML5 的 Canvas 只提供了图片的旋转、缩放功能,没有提供图片翻转(水平翻转或垂直翻转)的支持,搜索加试验之后,得到几种实现图片翻转的方法,记录一下。
第一种最简单的是使用 CSS,代码片断如下:
  1. <style>
  2. .flip-x {
  3.     filter: FlipH; /* IE only */
  4.     -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
  5.     -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
  6. }
  7. </style>
  8. <img src="http://oldj.net/images/oldj.net.png" class="flip-x" />
复制代码
支持 IE 、Firefox 等各大浏览器。不过,如果想在 HTML5 的 Canvas 中翻转一个图片,CSS 就无能为力了。

在 Canvas 中翻转图片大致有两种思路,一种是先“翻转”画布,在上面画好需要的图片后再将画布“翻转”回来;另一种是先在画布上正常画上原图,用 getImageData 方法取得图片的每一个象素的数据,再将数据镜像交换一下。

先来看“翻转”画布的方法,代码大致类似于这样:

  1. // 正常绘制:
  2. // ctx.drawImage(img, px, py);

  3. // 水平“翻转”画布
  4. ctx.translate(canvas_width, 0);
  5. ctx.scale(-1, 1);
  6. // 下面画的图片是水平翻转的
  7. ctx.drawImage(img, canvas_width - img.width - px, py);
  8. // 画布恢复正常
  9. ctx.translate(canvas_width, 0);
  10. ctx.scale(-1, 1);
复制代码
可以看到,主要用到了 translate 以及 scale 方法。先用 translate 方法将坐标原点设为画布右上角(默认为左上角),再用 scale(-1, 1) 的方式将画布水平翻转,在上面画好图之后再恢复即可。

另一种象素级的操作原理上也非常简单,就不多解释了,可以直接看源码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>test</title>
  6. <style type="text/css">
  7. #cv {
  8. border: solid 1px #333;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <canvas id="cv" width="300" height="240"></canvas>
  14. <script>
  15. var canvas = document.getElementById("cv"),
  16.     ctx = canvas.getContext("2d"),
  17.     img = new Image();

  18. img.src = "/images/oldj_gmail.png";

  19. function show() {
  20.     // 正常图片
  21.     ctx.drawImage(img, 10, 10);

  22.     // 水平翻转
  23.     ctx.translate(300, 0);
  24.     ctx.scale(-1, 1);
  25.     // 下面画的图片是水平翻转的
  26.     ctx.drawImage(img, 300 - img.width - 10, 60);
  27.     // 恢复正常
  28.     ctx.translate(300, 0);
  29.     ctx.scale(-1, 1);

  30.     // 下面的图片是正常的
  31.     ctx.drawImage(img, 10, 110);


  32.     // 象素级水平翻转图片的方法
  33.     show2();
  34. }

  35. function show2() {
  36.     // 象素级水平翻转的方法

  37.     // 先画一个正常的画片
  38.     var px = 10,
  39.         py = 160;

  40.     ctx.drawImage(img, px, py);

  41.     // 取得这个图片的数据,图片与当前页面必须同域,否则会出错
  42.     var img_data = ctx.getImageData(px, py, img.width, img.height),

  43.         x, y, p, i, i2, t,
  44.         h = img_data.height;
  45.         w = img_data.width,
  46.         w_2 = w / 2;

  47.     // 将 img_data 的数据水平翻转
  48.     for (y = 0; y < h; y ++) {
  49.         for (x = 0; x < w_2; x ++) {
  50.             i = (y<<2) * w + (x<<2);
  51.             i2 = ((y + 1) << 2) * w - ((x + 1) << 2);
  52.             for (p = 0; p < 4; p ++) {
  53.                 t = img_data.data[i + p];
  54.                 img_data.data[i + p] = img_data.data[i2 + p];
  55.                 img_data.data[i2 + p] = t;
  56.             }
  57.         }
  58.     }

  59.     // 重绘水平翻转后的图片
  60.     ctx.putImageData(img_data, px, py);
  61. }

  62. img.onload = function () {
  63.     show();
  64. };
  65. </script>
  66. </body>
  67. </html>
复制代码


不过,上面提到的两种方法都不是 HTML5 Canvas 原生支持的,性能上一定会有所损失。如果要频繁地翻转某个图像,看起来最好的办法还是先给它做一个镜像版本,而不是在程序里再翻转。

回复

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|PHP世纪论坛 ( 豫ICP备15004666号-2

GMT+8, 2018-12-15 10:08

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表