js图片旋转


  <script type="text/javascript" language="javascript">
function rotate(id, angle, whence) {
var p = document.getElementById(id);
if (!whence) {
p.angle = ((p.angle == undefined ? 0 : p.angle) + angle) % 360;
}
else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
}
else {
var rotation = Math.PI * (360 + p.angle) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.all && !window.opera) {
var canvas = document.createElement(‘img‘);
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMethod=‘auto expand‘)";
}
else {
var canvas = document.createElement(‘canvas‘);
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
}
else {
canvas.oImage = p.oImage;
}
//alert(canvas.width)
canvas.style.width = canvas.width = Math.abs(costheta * canvas.oImage.width) + Math.abs(sintheta * canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta * canvas.oImage.height) + Math.abs(sintheta * canvas.oImage.width);
var context = canvas.getContext(‘2d‘);
context.save();
if (rotation <= Math.PI / 2) {
context.translate(sintheta * canvas.oImage.height, 0);
}
else if (rotation <= Math.PI) {
context.translate(canvas.width, -costheta * canvas.oImage.height);
}
else if (rotation <= 1.5 * Math.PI) {
context.translate(-costheta * canvas.oImage.width, canvas.height);
}
else {
context.translate(0, -sintheta * canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}

//向右旋转
function rotateRight(id, angle) {
rotate(id, angle == undefined ? 90 : angle);
}
//向左旋转
function rotateLeft(id, angle) {
rotate(id, angle == undefined ? -90 : -angle);
}
</script>

调用方法:


<div class="content">
<div class="data">
<a href="javascript:void(0)" style="font-weight: bold; text-decoration: none; font-size: 16px;"
onclick="rotateRight(‘theimage‘,90);">右转</a>
<a href="javascript:void(0)" style="font-weight: bold; font-size: 16px; text-decoration: none;"
onclick="rotateLeft(‘theimage‘,90);">左转</a><br>
<img src="a.jpg" id="theimage" onload="resizeimg(this,this.width,this.height)" width="100%" alt="800×1422" style="cursor: pointer;" />
</a>
<div style="clear: both">
</div>
</div>
</div>

js图片旋转,布布扣,bubuko.com

时间: 2024-11-03 21:52:39

js图片旋转的相关文章

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

coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>coolShow.js插件图片旋转动画特效</title> <link href="css/coolShow.css" rel="

图片旋转js代码

function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"; rotate(); } var imageToRotate; var degreeToRotate=0; function rotat

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

html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" method="post" enctype="multipart/form-data">     <input name="photoimg" type="file" id="xwzx_f" style

【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 + ",SizingMe

js图片前端压缩多图上传(旋转其实已经好了只是手机端有问题要先压缩再旋转)

var filechooser = document.getElementById("choose"); // 用于压缩图片的canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); // 瓦片canvas var tCanvas = document.createElement("canvas"); var tctx = tC

jQuery图片旋转展示收缩效果

<!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> <meta http-equiv="Content-

强大!HTML5 3D美女图片旋转实现教程

又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: 大家也可以在这里看到具体的DEMO演示. 下面我们来分析一下实现这款HTML5 3D图片旋转特效的源代码,这里我们引用了知名的JS动画框架TweenMax.js. 先来看看HTML代码: <ul id="level0" class='cube'> <li class='

一款实用的viewer.js 图片相册

Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小.旋转.撤回等,底部有缩略图列表可切换. 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转)支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保)支持缩略图支持标题显示支持多种自定义事件 在线实例 默认效果 jQuery版本 回调函数 自定义方法 使用方法 <ul id="sucaihuo">    

5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)

tapmodo / Jcrop Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选.Github.com官网也使用了这个插件.有一个小细节是,边框线的蚂蚁线是动画的,真的很用心. Jcrop项目地址 | demo1 | demo2 | demo3 | demo4 fengyuanchen / cropper Cropper也是一款图片裁剪jQuery插件,stars数量1k+,是杭州的前端工程师Fengyuan Chen所写的,功能也相当丰富,裁剪