【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插件 ...
随机推荐
- springmvc(2)--参数绑定
一.以实例来看springmvc各种参数绑定方式 先定义个dto类: public class RestInDto implements Serializable { private static ...
- 转VS快捷键
“文本操作”快捷键 命令名 快捷键 说明 编辑.折叠到定义 Ctrl + M,Ctrl + O 自动确定在代码中创建区域的逻辑边界(如过程),然后隐藏它们. 编辑.注释选定内容 Ctrl + K,Ct ...
- django 学习-16 Django会话Cookie
1.django.admin.py startproject cs3 cd cs3 django.admin.py startapp blog 2. vim urls.py url ...
- .Net简单上传与下载
上传: 首先上传我们需要一个控件-FileUpLoad: 再加上一个上传按钮: 在上传按钮的Click事件中添加如下代码: FileUpload1.SaveAs(Server.MapPath(&quo ...
- 关于sql中constraint 前缀的用意(PK、UK、DF、CK、FK)
--主键constraint PK_字段 primary key(字段), --唯一约束constraint UK_字段 unique key(字段), --默认约束constrint DF_字段 d ...
- (转)IIS设置优化(需根据服务器性能,调整具体参数值)
IIS7 优化-网站请求并发数>> /*调整IIS 7应用程序池队列长度*/队列长度 5000-20000(原来默认1000,最大65535,建议10000 ) /*调整IIS 7的app ...
- angularjs中的directive
正在初学angularjs中,在网上看到一篇详细讲解directive指令的文章,于是就记录在这里和大家一起分享 angular.module('docsTransclusionExample', [ ...
- 分享9款很有创意的HTML5动画
1.HTML5 SVG Loading 动画加载特效 这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果.每一组Loading动画都非常可爱,他们都非常欢快 ...
- java.util.TreeMap源码分析
TreeMap的实现基于红黑树,排列的顺序根据key的大小,或者在创建时提供的比较器,取决于使用哪个构造器. 对于,containsKey,get,put,remove操作,保证时间复杂度为log(n ...
- Viewport Resizer下载 谷歌前端自适应开发工具
原文链接:http://www.phpbiji.cn/article/index/id/107/cid/6.html Viewport Resizer下载 谷歌前端自适应开发工具 在前端开发过程中,随 ...