canvas旋转图片



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>canvas旋转图片</title>

    <style>

        * {

            box-sizing: border-box;

        }

        .container {

            margin: 15px;

            border: 1px solid rgb(106, 250, 255);

            padding: 20px;

            background: #fff;

            text-align: center;

        }

        .img-block {

            max-width: 400px;

            background: #eee;

            padding: 15px;

            margin: 0 auto 15px auto;

        }

        .img {

            display: block;

            max-width: 100%;

        }

        .btn {

            padding: 5px 10px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="img-block">

            <img src="i.jpg" class="img" id="img">

        </div>

        <div class="operate-block">

            <button type="button" class="btn" id="rotate_clockwise" onclick="rotateImage('img');">顺时针旋转90度</button>

            <button type="button" class="btn" id="rotate_anticlockwise">逆时针旋转90度</button>

        </div>

    </div>

    <script>

        /*

            imageId： 需要旋转的图片的id；

            direction： 顺时针为1， 逆时针为 - 1；

            思路：

            1. 获取需要旋转图片image的src；

            2. 以此src构建新的图片对象img；

            3. 在img的onload事件中：

                1. 创建一个canvas元素， 它的宽和高分别对应img的高和宽（ 因为旋转90度后， 图片的宽高正好是之前的高宽）

                    其中ctx我们可以想象它无限大，注意一点：ctx上绘制的图形只有位置出现在canvas窗口中时，才能显示出来

                2. 绘制图片之前， 一定要先将ctx顺时针旋转90度，（ 否则图片没有旋转的效果,因为绘制图片时的ctx状态已被保存下来），但是，绘制出来的图形效果相当于先绘制，再旋转

                    （那到底绘制在哪里，ctx旋转90度则正好全部显示在canvas上？）

                    我们可以将canvas的（0，0）位置当作一个圆心，而ctx就是围绕这个圆心旋转的。

                        我们倒推一下，image顺时针旋转90度后的形状，iamge的左下角成了新图的左上角，且这个左上角位置就在canvas的（0，0）处，ctx旋转时，这个角应该是不动的

                            这样我们只要得出image左上角的坐标就是我们需要寻找的ctx绘图时的起点：

                                左上角坐标（相对canvas来说）应该是(0, -canvas.width);

                3.如果ctx不旋转，那么绘制出的新图正好在canvasde正上方，我们是看不见的；当ctx旋转90度之后，则新图正好处在canvas视窗中，完美呈现(这里我们需要想象一下：canvas大小位置固定，它是用来呈现绘制的图形的窗口；而ctx则是无限大，但是它的起点位置永远都是相对于canvas视窗的左上角，即ctx就是一个以canvas左上角为圆心，半径无限大的圆)

                4.其他几个角度，原理一样

                5.如果角度不是90度的倍数时，则绘图原点就需要使用sin，cos来表示了；

        */      

        function rotateImage(imageId, direction) {

            var image = document.getElementById(imageId);

            var src = image.src;

            var img = new Image();

            img.src = src;

            img.onload = function() {

                var w = this.naturalWidth;

                var h = this.naturalHeight;

                var canvas = document.createElement("canvas");

                canvas.height = w;

                canvas.width = h;

                var ctx = canvas.getContext("2d");

                ctx.rotate(Math.PI / 180 * 90);

                ctx.drawImage(this, 0, -canvas.width);

                var base = canvas.toDataURL("image/jpeg");

                image.src = base;

            }        }

    </script>

</body>

</html>

canvas旋转图片的更多相关文章

  1. Canvas旋转图片--保持相同大小的算法

     function drawImg(angle) {     canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...

  2. Camera图片特效处理综述（Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片<线程固定时间显示一张>）

    一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, ...

  3. 赵雅智_运用Bitmap和Canvas实现图片显示，缩小，旋转，水印

    上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...

  4. 土旦：移动端 Vue+Vant 的Uploader 实现 ：上传、压缩、旋转图片

    面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img s ...

  5. ios新手开发——toast提示和旋转图片加载框

    不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...

  6. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  7. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  8. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  9. 使用canvas进行图片裁剪简单功能

    1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

随机推荐

  1. Redis学习目录

    目录   持续更新... Redis简介 Redis安装及基本配置 Redis持久化 Redis开发及管理实战 Redis高可用及集群 Redis多API开发  

  2. LUOGU P4777 【模板】扩展中国剩余定理（EXCRT）

    传送门 解题思路 扩展 $crt​$,就是中国剩余定理在模数不互质的情况下,首先对于方程 ​     $\begin{cases} x\equiv a_1\mod m_1\\x\equiv a_2\m ...

  3. centos6 nginx 配置本地https访问

    安装准备 yum install openssl openssl-devel 生成文件 cd /usr/local/nginx/conf # 生成密钥privkey.pem: openssl genr ...

  4. 基于知识图谱的APT组织追踪治理

    高级持续性威胁(APT)正日益成为针对政府和企业重要资产的不可忽视的网络空间重大威胁.由于APT攻击往往具有明确的攻击意图,并且其攻击手段具备极高的隐蔽性和潜伏性,传统的网络检测手段通常无法有效对其进 ...

  5. Android基础控件ToggleButton和Switch开关按钮

    1.简介 ToggleButton和Switch都是开关按钮,只不过Switch要Android4.0之后才能使用! ToggleButton <!--checked 是否选择--> &l ...

  6. <每日一题>题目19：简单的程序执行效率面试题

    # 将下面的函数按照执行效率高低排序.它们都接受由0至1之间的数字构成的列表作为输入.这个列表可以很长.一个输入列表的示例如下:[random.random() for i in range(1000 ...

  7. HashMap 和 concurrentHashMap

    从JDK1.2起,就有了HashMap,正如前一篇文章所说,HashMap不是线程安全的,因此多线程操作时需要格外小心. 在JDK1.5中,伟大的Doug Lea给我们带来了concurrent包,从 ...

  8. springboot4.1.1的log4j2配置

    一.默认情况下,Spring Boot会用Logback来记录日志,并用INFO级别输出到控制台: 日志输出内容元素具体如下: 时间日期:精确到毫秒 日志级别:ERROR, WARN, INFO, D ...

  9. 2019-8-31-dotnet-通过-WMI-获取系统安装的驱动

    title author date CreateTime categories dotnet 通过 WMI 获取系统安装的驱动 lindexi 2019-08-31 16:55:59 +0800 20 ...

  10. 2.Spring【DI】XML方式

    依赖: 在A类中引用了B类,说明A依赖于B. 注入: 使用Spring框架给A类中的B对象的属性赋值. 直接上代码: 1.只使用IOC public class Person { private St ...