【js】js 让图片旋转
转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 让图片旋转的更多相关文章
- 用Js+css3实现图片旋转,缩放,裁剪,滤镜
还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...
- js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能
html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
- js实现图片旋转、模板文件查看图片大图之记录篇[二]
一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图. 主要使用的是jQuery的delegate()方法实现图片旋转,该方法主要的功能就是给某个组件绑定一个或一组事件 ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- js实现图片旋转
1.以下代码适用ie9版本 js代码如下: function rotate(o,p){ var img = document.getElementById(o); if(!img || !p) ret ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- 使用js做创建图片及删除图片 若有什么不对或不完整的地方,请大家提出来,谢谢
首先我们要在<body>中创建一个按钮<button>来用作点击创建图片,在<button>中写一个点击事件(随便命名), 在创建一个<div>存放图片 ...
- C#MVC和cropper.js实现剪裁图片ajax上传的弹出层
首先使用cropper.js插件,能够将剪裁后的图片返回为base64编码,后台根据base64编码解析保存图片. jQuery.cropper: 是一款使用简单且功能强大的图片剪裁jquery插件 ...
随机推荐
- mybatis--MapperScannerConfigurer
一般我们这样配置 <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryB ...
- javascript线程解释(setTimeout,setInterval你不知道的事)---转载
在工作中,可能我们经常遇到在有很多 setInterval 的页面, 再手动触发 setTimeout 的时候经常失败, 尤其是 jquery做动画的时候,一些渐入溅出的东西,很多东西都不被触发……, ...
- 剑指Offer17 二叉树的镜像
/************************************************************************* > File Name: 17_Mirror ...
- 如何优雅地制作精排 ePub —— 个人电子书制作规范及基本样式表
随着大数据时代的到来,多种移动阅读终端方兴未艾 —— Amazon Kindle不再小众.各互联网巨头纷纷推出旗下的电子书阅读软件.有了阅读的软件/硬件支持,必不可少的就是阅读什么的问题了.ePub格 ...
- ASP三种常用传值方式:
ASP 页面(两个aspx页面)传值方式:背景: 两个aspx 页面valuepage.aspx tbusername tbpwdobtainvalue.aspx tbusername tbpwd 1 ...
- 解决 Oracle em 无法打开的问题
重建em emca -deconfig dbcontrol db -repos drop 删除 emca -config dbcontrol db -repos create 创建 set ora ...
- ASP.NET MVC 教程
http://msdn.microsoft.com/zh-cn/dd327597.aspx
- Android应用数据备份
在Android上可以很方便地管理数据备份,那些不慎丢失设备的用户会对该功能感激不尽.备份数据会很安全地存储在云端,并且只在具有相同谷歌ID设备上恢复数据. 下面是典型的AndroidManifest ...
- 使用jquery插件报错:TypeError:$.browser is undefined的解决方法
关于$.browser browser就是用来获取浏览器基本信息的. jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.sup ...
- [老老实实学WCF] 第八篇 实例化
老老实实学WCF 第八篇 实例化 通过上一篇的学习,我们简单地了解了会话,我们知道服务端和客户端之间可以建立会话连接,也可以建立非会话连接,通信的绑定和服务协定的 ServiceContract 的S ...