<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片旋转效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
ul{padding:0 15px;}
ul li{padding-bottom:15px;border-bottom:1px dashed #EEE;}
.caption{padding:15px 0 5px;}
.caption input{margin-right:10px;padding:0 10px;}
</style>
<script type="text/javascript">
/*
* www.byzuo.com
* ok!: MSIE 6, 7, 8, Firefox 3.6, chrome 4, Safari 4, Opera 10
* o 旋转图片ID;
* p 选择旋转方向，固定值为'left'或'right';
*/
function rotate(o,p){
var img = document.getElementById(o);
if(!img || !p) return false;
var n = img.getAttribute('step');
if(n== null) n=0;
if(p=='right'){
(n==3)? n=0:n++;
}else if(p=='left'){
(n==0)? n=3:n--;
}
img.setAttribute('step',n);
//MSIE
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
//HACK FOR MSIE 8
switch(n){
case 0:
imgimg.parentNode.style.height = img.height;
break;
case 1:
imgimg.parentNode.style.height = img.width;
break;
case 2:
imgimg.parentNode.style.height = img.height;
break;
case 3:
imgimg.parentNode.style.height = img.width;
break;
}
//DOM
}else{
var c = document.getElementById('canvas_'+o);
if(c== null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+o);
img.parentNode.appendChild(c);
}
var canvasContext = c.getContext('2d');
switch(n) {
default :
case 0 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(0 * Math.PI / 180);
canvasContext.drawImage(img, 0, 0);
break;
case 1 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(90 * Math.PI / 180);
canvasContext.drawImage(img, 0, -img.height);
break;
case 2 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(180 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, -img.height);
break;
case 3 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(270 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, 0);
break;
}
}
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<ul class="clearfix">
<li>
<div class="caption">
<input type="button" value="turn left" onclick="rotate('pic_1','left')">
<input type="button" value="turn right" onclick="rotate('pic_1','right')">
</div>
<div class="cont">
<img alt="javascript 图片旋转效果" id="pic_1" src="data:image/girl.jpeg" alt="">
</div>
</li>
</ul>
</body>
</html>

js 实现图片旋转角度的更多相关文章

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

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

  2. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  4. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  5. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  6. 使用 FocusPoint.js 实现图片的响应式裁剪

    通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...

  7. Lazyr.js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  8. Webview加载本地js、图片的方法

    在项目开发中经常会将比较大的js.图片.css等放到app中,而html放服务器,这样在使用时流量较少,加载也比都放服务器上快,其实方法也比较多,网上搜了很久都没结果. 一种是获取服务器返回的html ...

  9. WebApp：如何让安卓的webview缓存webapp的html、js和图片等资源

    一.开发环境     客户端:安卓+webview(vuejs)     服务器端:tomcat 8.0 二.问题     使用安卓原生+web(基于webpack+vuejs)的方式开发了一个安卓应 ...

随机推荐

  1. mysql 一个较特殊的问题:You can't specify target table for update in FROM clause

    mysql 一个较特殊的问题:You can't specify target table for update in FROM clause 即:不能先select出同一表中的某些值,再update ...

  2. HDU3727 - Jewel(主席树)

    题目大意 对一个序列进行以下四种操作: 1.Insert x 在序列尾部插入x 2.Query_1 s t k 查询区间[s,t]的第k小 3.Query_2 x 查询x的在序列中排名 4.Query ...

  3. TCP、UDP、IP包头结构分析（转）

    1.TCP数据段格式 TCP是一种可靠的.面向连接的字节流服务.源主机在传送数据前需要先和目标主机建立连接.然后,在此连接上,被编号的数据段按序收发.同时,要求对每个数据段进行确认,保证了可靠性.如果 ...

  4. hdoj 2568 前进

    前进 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  5. Android开发中如何强制横屏和强制竖屏设置

    Android开发中如何强制横屏和强制竖屏设置 强制横屏设置: 按照下面代码示例修改Activity的onResume方法 @Override protected void onResume() { ...

  6. PowerShell脚本传递参数

    在编写PowerShell脚本的时候,可以通过给变量赋值的方法输出想要的结果,但这样的话,需要改动脚本内容.其实也可以在脚本中定义参数,然后再在执行脚本的时候对参数赋值,而无需改动脚本内容. 在Pow ...

  7. 征服 Redis + Jedis + Spring （一）—— 配置&常规操作（GET SET DEL）

    有日子没写博客了,真的是忙得要疯掉. 完成项目基础架构搭建工作,解决了核心技术问题,接着需要快速的调研下基于Spring框架下的Redis操作. 相关链接: 征服 Redis 征服 Redis + J ...

  8. CopyU!下一次更新将增加对设备厂商及型号的识别！

    CopyU!下一版本的更新将加入对设备厂商及型号的识别功能,当用户连接设备时,CopyU!将能够辨别出设备的详细型号等,能够在一定程度上帮助用户发现问题设备或仿冒设备. 敬请期待即将到来的新更新!

  9. 从零开始，打造自己的首个 iOS 框架

    如果你曾试图创建自己的iOS框架,你知道这不是一个头脑发热作出的决定 — 管理依赖以及写测试用例一点也不简单.本教程将会带你从头到尾创建你的第一个iOS框架,让你可以创建自己的框架. 我们将在框架暴露 ...

  10. 通过JSTL用表格的形式显示

    <%@ page language="java" import="java.util.*, cn.hncu.domain.*" pageEncoding= ...