canvas旋转图片



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;

    &lt;title&gt;canvas旋转图片&lt;/title&gt;

    &lt;style&gt;

        * {

            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;

        }

    &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div class="container"&gt;

        &lt;div class="img-block"&gt;

            &lt;img src="i.jpg" class="img" id="img"&gt;

        &lt;/div&gt;

        &lt;div class="operate-block"&gt;

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

            &lt;button type="button" class="btn" id="rotate_anticlockwise"&gt;逆时针旋转90度&lt;/button&gt;

        &lt;/div&gt;

    &lt;/div&gt;

    &lt;script&gt;

        /*

            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;

            }        }

    &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

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

Canvas旋转图片--保持相同大小的算法
function drawImg(angle) { canvas.width = canvas.width; var distance = size / 2 * Math.sqrt(2) ...
Camera图片特效处理综述（Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片<线程固定时间显示一张>）
一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, ...
赵雅智_运用Bitmap和Canvas实现图片显示，缩小，旋转，水印
上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...
土旦：移动端 Vue+Vant 的Uploader 实现：上传、压缩、旋转图片
面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img s ...
ios新手开发——toast提示和旋转图片加载框
不知不觉自学ios已经四个月了,从OC语法到app开发,过程虽然枯燥无味,但是结果还是挺有成就感的,在此分享我的ios开发之路中的小小心得~废话不多说,先上我们今天要实现的效果图: 有过一点做APP经 ...
canvas学习笔记：canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
快速解决Canvas.toDataURL 图片跨域的问题
出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧如题,在将页面的图片地址进行 ...
用canvas实现图片滤镜效果详解之灰度效果
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...
使用canvas进行图片裁剪简单功能
1.html部分使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

随机推荐

重磅榜单！互联网金融Top100总估值超1.1万亿，27家独角兽上榜！
时隔4个月,爱分析的“中国互联网金融企业估值排行榜”更新了! 在这4个月当中,我们调研了数十位企业创始人.专业投资人以及资深行业专家,尤其针对金服集团.消费金融.财富管理.征信等领域进行了深入研究.因 ...
菜鸟nginx源码剖析数据结构篇（三）单向链表 ngx_list_t[转]
菜鸟nginx源码剖析数据结构篇(三) 单向链表 ngx_list_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csd ...
VS2010-MFC（利用MFC向导生成单文档应用程序框架）
一.VC++与MFC 讲VC++免不了要提MFC,MFC全称Microsoft Foundation Classes,也就是微软基础类库.它是VC++的核心,是C++与Windows API的结合,很 ...
C++ #define，typedef，using用法区别
一.#define #define 是宏定义命令,宏定义就是将一个标识符定义为一个字符串,源程序中的该标识符均以指定的字符串来代替,是预编译命令,因此会在预编译阶段被执行 1.无参宏定义无参宏的宏名 ...
关于MQ 消息队列的通俗理解和 rabbitMQ 使用
消息队列,一听很高大上,现在很多分布式系统都在用这个消息中间件网上一搜, 说的都是些原理. 说下我的通俗理解, 你网上买了, 快递员给你投递, 会出现什么问题呢? 1 你不定时在家, 快递员来了 ...
08-2-if的其他写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Ubuntu 16.04 安装STS
先将STS下载下来,网址是 https://spring.io/tools/sts/all ,然后将STS压缩包移动或者copy到想要放置的位置,比如, sudo cp spring-tool-sui ...
python 编码问题：'ascii' codec can't encode characters in position 的解决方案
报错: 'ascii' codec can't encode characters in position 8-50: ordinal not in range(128) Python在安装时,默认的 ...
同名的cookie会不会存在多个
cookie new了多个.同一个名字.会不会存在多个呢. //若果不设置Cookie的path,则名字相同的Cookie视为相同的Cookie,后面的覆盖前面的,注意:大小写敏感 Cookie c1 ...
PHP7中标量类型declare的用法详解
这篇文章主要介绍了PHP7标量类型declare用法,结合实例形式分析了PHP7中标量类型declare的功能.特性与相关使用技巧,需要的朋友可以参考下本文实例讲述了PHP7标量类型declare用 ...

canvas旋转图片

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

随机推荐

热门专题