转http://www.cnblogs.com/ustcyc/p/3760116.html

核心:
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMethod='auto expand')";
看起来像ie专属的,ff chrome呢
css3实现图片旋转功能:支持的浏览器有chrome,firefox;opera是不支持的。
具体代码为:-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
上述代码的意思就是将图片顺时针旋转90度,其实可以旋转任意的度数。但是支持css3的浏览器只有chrome,firefox3. ,safari,ie浏览器是不支持的。那么IE
下该怎么处理呢?于是就有了下面的一种方案
)在IE下通过滤镜来实现旋转
具体代码为:filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=);
这里的rotation 参数可以为0,,, ,表示的意思就是这些数字乘以90后的旋转角度。IE下如果要旋转任意的角度要用到矩阵变换滤镜,我们在日常的使用过程中,
大部分使用的是变换90的倍数,这里就不讨论任意的角度了。但是还是有问题的,如果非ie浏览器,不支持CSS3,那么如果实现图片的旋转呢,其实canvas也是可以图片旋转的。
)用canvas来实现图片的旋转
canvas在chrome,firefox,opera等浏览器中均支持,他是有一个基于 JavaScript 的绘图 API,。首先我们来看看怎样利用canvas+JavaScript实现图片的旋转
代码如下: 复制代码 代码如下: var test = function(){
var canvas = document.getElementById("result");
var oImg = document.getElementById("Img");
canvas.height = ;
canvas.width = ;
var context = canvas.getContext("2d");
context.save();
context.translate(,);
context.rotate(Math.PI/);
context.drawImage(oImg, , , , );
context.restore();
oImg.style.display = "none";
};
上述代码首先得到一个canvas对象,然后设置他的高度,开始绘图了。这个改变canvas的中心点和旋转角度,然后将图片画到canvas中去,将其存储起来,然后
隐藏之前的图片。这种方法实现还是比较平滑的。

jquery版
转http://blog.csdn.net/cangkukuaimanle/article/details/7414985

【js】js 让图片旋转的更多相关文章

  1. 用Js+css3实现图片旋转,缩放,裁剪,滤镜

    还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...

  2. js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能

    html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...

  3. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  4. js实现图片旋转、模板文件查看图片大图之记录篇[二]

    一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...

  5. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  6. js实现图片旋转

    1.以下代码适用ie9版本 js代码如下: function rotate(o,p){ var img = document.getElementById(o); if(!img || !p) ret ...

  7. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  8. 使用js做创建图片及删除图片 若有什么不对或不完整的地方,请大家提出来,谢谢

    首先我们要在<body>中创建一个按钮<button>来用作点击创建图片,在<button>中写一个点击事件(随便命名), 在创建一个<div>存放图片 ...

  9. C#MVC和cropper.js实现剪裁图片ajax上传的弹出层

     首先使用cropper.js插件,能够将剪裁后的图片返回为base64编码,后台根据base64编码解析保存图片. jQuery.cropper: 是一款使用简单且功能强大的图片剪裁jquery插件 ...

随机推荐

  1. 系统磁盘空间/dev/xvda1占满原因分析

    由于项目原因需要定期检查磁盘空间占用情况,常用检查命令如下: 1.查看磁盘空间大小 df -lh 2.查看对应文件大小 du --max-depth=1 -h / 于一日发现在使用Flume + Ka ...

  2. OpenFlow概述

    OpenFlow名称里面虽然包括“Flow”,但其并不是“又一个流程引擎”,我们认为世界上的流程引擎已经足够多了,每个流程引擎都各有千秋,有的甚至免费,所以我们不需要再做一个流程引擎,我们做OpenF ...

  3. centOS6.5x64简单的安装openfire

    yum install java libldb.i686 mysql-server mysql-connector-java 创建数据库 create database openfire defaul ...

  4. 【转义字符】HTML 字符实体&lt; &gt: &amp;等

    在开发中遇到javascript从后台获取的url 会被转义,如:http://localhost:8080/Home/Index?a=14&b=15&c=123,想把它转成http: ...

  5. 20141211—C#面向对象,封装

    封装 一个private 的变量.在变量名上右键-重构-封装字段 小建议:在创建封装字段的时候,在名字前加 “_”用以区分. 封装时,下划线会自动去除 点击确定后: 应用: 赋值的时候走 set 取值 ...

  6. 【ASP.NET】DataContract序列化,反序列化对象中包含用接口声明的属性时的处理方法

    为此对象添加KnownType属性(Attribute).类型为用接口声明的属性(Property)的所有可能类型.  示例如下: public interface IKey { [DataMembe ...

  7. ZigBee安全相关

    ZigBee安全由AES加密算法和CCM操作方式作为安全方案,广泛使用在ZigBee联盟的通信协议中.ZDO层负责安全策略和安全配置的管理. Technorati 标签: ZigBee 安全 2. 配 ...

  8. zedboard之GPIO驱动(从FPGA一直到LINUX应用)

    1 EDK 大家知道我们在EDK中建立GPIO然后倒出到SDK中,在SDK中可以用C语言操作外设GPIO,但是这还是裸机程序,没有用到LINUX.本文将记录从FPGA  EDK生成GPIO一直到导入S ...

  9. linux解压zip、bz、bz2、z、gz、tar(解包)

    zip: 压缩: zip [-AcdDfFghjJKlLmoqrSTuvVwXyz$][-b <工作目录>][-ll][-n <字尾字符串>][-t <日期时间>] ...

  10. 如何通过jquery隐藏和显示元素

    以下几种方式可以隐藏一个元素:1,CSS display的值是none.2,type="hidden"的表单元素.3,宽度和高度都显式设置为0.4,一个祖先元素是隐藏的,该元素是不 ...