转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. codeforces 680C C. Bear and Prime 100(数论)

    题目链接: C. Bear and Prime 100 time limit per test 1 second memory limit per test 256 megabytes input s ...

  2. [wordpress]wp-api-jwt-auth 尝试添加运行在多站点中 need change

    Hi,Thank you this plugin,because i use this plugin on Wordpress one Network,so the request other api ...

  3. Nginx服务器不支持PATH_INFO的问题及解决办法

    最近在写一个小程序,然后里面自己写了个URL的处理器,比如说访问index.php/article 那么就会自动加载进来article页面,访问index.php/home就会自动加载home页面. ...

  4. backbone.Model 源码笔记

    backbone.Model backbone的model(模型),用来存储数据,交互数据,数据验证,在view里面可以直接监听model来达到model一改变,就通知视图. 这个里面的代码是从bac ...

  5. View的setOnClickListener的添加方法

    1)第一种,也是最长见的添加方法(一下都以Button为例) 1 Button btn = (Button) findViewById(R.id.myButton);2 btn .setOnClick ...

  6. 二叉树-你必须要懂!(二叉树相关算法实现-iOS)

    这几天详细了解了下二叉树的相关算法,原因是看了唐boy的一篇博客(你会翻转二叉树吗?),还有一篇关于百度的校园招聘面试经历,深刻体会到二叉树的重要性.于是乎,从网上收集并整理了一些关于二叉树的资料,及 ...

  7. iOS-设置启动图片

    启动图片设置 设置方法一 这种方法里,默认模拟器和真机的尺寸和启动图片的尺寸相同. 通过美工提供各种尺寸的启动图片来适配屏幕的大小.这种方法要求美工提供各种屏幕大小的图片. 步骤如下: 1.如图所示, ...

  8. C# 上传图片前判断上传图片的宽和高

    网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileU ...

  9. UI4_UITableViewSectionIndex

    // AppDelegate.m // UI4_UITableViewSectionIndex // // Created by zhangxueming on 15/7/14. // Copyrig ...

  10. Tomcat提示Null component

    Tomcat提示“严重: Null component Catalina:type=JspMonitor,name=jsp,WebModule=//localhost/,J2EEApplication ...