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. memcached 技术支持

    1. Install sudo apt-get install memcached 2.启动和停止 启动: service memcached start 停止: service memcached ...

  2. jeecms v9 vue环境搭建

    一.安装NODEJS运行环境 前往nodejs官网下载nodejs,https://nodejs.org/en/ ,建议下载最新稳定版的,下载后安装即可,下载选择类似如下 安装完毕之后,在cmd中输入 ...

  3. <爬虫>用正则爬取B站首页图片

    import re import requests headers = { 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple ...

  4. elasticsearch 中文API facets(⑩)

    facets Elasticsearch提供完整的java API用来支持facets.在查询的过程中,将需要计数的facets添加到FacetBuilders中.然后将该FacetBuilders条 ...

  5. 订单风险系统BI

    最近被公司叫去协助传统做维表查询服务,项目已经做完.和前端联调过程发现oracle对查询 sql和产品设计还是挺重要的.不能全部堆给代码去做,如何方便代码,代码优化到最高性能才是首要解决的事,前端才能 ...

  6. COCI2014/2015 Contest#1 D MAFIJA【基环树最大独立点集】

    T1725 天黑请闭眼 Online Judge:COCI2014/2015 Contest#1 D MAFIJA(原题) Label:基环树,断环+树形Dp,贪心+拓扑 题目描述 最近天黑请闭眼在 ...

  7. Leetcode139. Word Break单词拆分

    给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字典中没有重复 ...

  8. Fiilter

    过滤器 过滤请求和响应 作用:        自动登录.        统一编码.        过滤关键字        .... Filter是一个接口 编写filter步骤: 1.编写一个类 a ...

  9. 在Apline编译Mariadb 常见错误

    /root/mariadb-10.3.11/storage/tokudb/PerconaFT/portability/toku_assert.cc:52:22: fatal error: execin ...

  10. mysql批量增加表中新列存储过程

    一般访问量比较大的网站,请求日志表都是每天一张表独立创建. 业务需要为每张表都添加一个新列,纠结了半天,写了个存储过程如下: 日志表结构类型 tbl_ads_req_20140801, tbl_ads ...