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. SpringData_01_SpringData的快速入门

    1.1SpringData JPA概述 Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套JPA应用框架,可使开发者用极简的代码即可实现对数据库的访问 ...

  2. sql.xml大于小于号处理的方法

    <if test="startTime != null and startTime != ''"> AND i_DataTime <![CDATA[ >= ...

  3. arguments的介绍（一）

    arguments 是一个类数组对象.代表传给一个function的参数列表. 1.1 arguments length arguments 是个类数组对象,其包含一个 length 属性,可以用 a ...

  4. React项目开发经验汇总

    博客来源 小寒的博客   定义好全局配置信息 环境变量不要提取出来,配置信息提取出来 UI样式变量 定义好变量的作用不用多说 样式库建设 工具样式,复用性强的样式,这些class成为会是真个网站样式的 ...

  5. Linux常见问题解答--如何修复“tar：Exiting with failure status due to previous errors”

    问题: 当我用tar命令来创建一个压缩文件时,总在执行过程中失败,并且抛出一个错误说明"tar:由于前一个错误导致失败退出"("Exiting with failure ...

  6. ls- Linux必学的60个命令

    1.作用 ls命令用于显示目录内容,类似DOS下的dir命令,它的使用权限是所有用户. 2.格式 ls [options][filename] 3.options主要参数 -a, --all:不隐藏任 ...

  7. [转]【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox

    反反复复考虑后,准备把这一章的切入点瞄准ListBox.并用了一个看起来有点别扭的标题“认识ListBox",许多人看到这里就不爱看了,即使是大学里用winform的学生也会说ListBox ...

  8. select 下拉框多选

    需要引入插件:fselect.js (此插件依赖jQ) 和 fselect.css  下载 点击查看在线演示地址 //html<select class="demo" mul ...

  9. 原 ASP.net out 和ref之间的区别

    ref和out都是C#中的关键字,所实现的功能也差不多,都是指定一个参数按照引用传递.对于编译后的程序而言,它们之间没有任何区别,也就是说它们只有语法区别.总结起来,他们有如下语法区别: 1.ref传 ...

  10. YUM配置文件

    创建容器,位置在/etc/yum.repos.d,扩展名必须是.repo #cd  /etc/yum.repos.d #vim yum.repo         新建一个仓库文件,名字可以随便定义,在 ...