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. mybatis 一对多和一对一写法注意事项

    <resultMap id="ChartResultMap" type="com.qif.dsa.ucenter.planinfo.entity.ChartDate ...

  2. centos6 nginx 配置本地https访问

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

  3. 为什么要使用Vue.$set(target,key,value)

    vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2,数组通过索引值修改内容 vm.arr[1] = 'aa' Vue.$set(target,key, ...

  4. AFO之后……

    先上游记:@ 据说有一种东西叫狗屁不通文章生成器:@

  5. iPhone开发关于UDID和UUID的一些理解

    一.UDID(Unique Device Identifier)  UDID是Unique Device Identifier的缩写,中文意思是设备唯一标识.  在很多需要限制一台设备一个账号的应用中 ...

  6. 笔试之const问题

    1 . ; int *j=(int *)&i; *j=; cout<<i<<*j<<endl; 答案i为0,*j为1. 2. char * const p= ...

  7. iOS开发本地推送（iOS10）UNUserNotificationCenter

    1.简介 iOS10之后苹果对推送进行了封装,UNUserNotificationCenter就这样产生了.简单介绍本地推送的使用UserNotifications官方文档说明! 2.简单使用UNUs ...

  8. vue v-for详解

    1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists">     <div>     ...

  9. 在Linux下使用gcc运行C语言程序

    Linux下使用最广泛的C/C++编译器是GCC,大多数的Linux发行版本都默认安装,不管是开发人员还是初学者,一般都将GCC作为Linux下首选的编译工具.本教程毫不犹豫地使用GCC来编译C程序. ...

  10. Java学习记录--ModelMapper的使用

    在项目中很多时候需要把Model和DTO两个模型类来回转换,保证Model对外是隐私的,同时类似密码之类的属性也能很好地避免暴露在外了. 那么ModelMapper就是为了方便转换而实现的一个类库,下 ...