rotate.js实现图片旋转 (chrome,IE,firefox都可以实现)
找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全。终于找到一个好一点的js,先贴一下代码。
1.rotate.js
jQuery.fn.rotate = function(angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
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.round(Math.cos(rotation) * 1000) / 1000;
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000;
//alert(costheta+","+sintheta);
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;
}
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);
}
jQuery.fn.rotateRight = function(angle) {
this.rotate(angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
this.rotate(angle==undefined?-90:-angle);
}
2.页面中的实现
<div id="buttons">
<a href="javascript:void(0);" id="btn_right" οnclick="flip()">旋转</a>
</div>
<div id="img_area" style="width:370px;height:210px;" >
<img src="./images/1.png" alt="旋转图片" id="image" style="width:370px;height:210px;"/>
</div>
<script src='./lx/jquery.js'></script>
<script src='./lx/rotate.js'></script>
3.实现JS(后面更改的宽度是为了固定图片大小的)
function flip(){
$("#image").rotate(180);
$("#image").width('370px');
$("#image").height('220px');
}
转载于:https://www.cnblogs.com/zlx7/p/4775342.html
rotate.js实现图片旋转 (chrome,IE,firefox都可以实现)相关推荐
- exif.js html图片旋转,exif获取图片旋转角度
任何旋转,都可以用一个旋转轴 ω CGAffineTransform _trans = sticker.transform; CGFloat rotate = acosf(_trans.a);... ...
- exif.js html图片旋转,解决图片显示 Exif.js更改图片的显示方向
没什么文字直接上代码 //这是一个解决exif更改脱方向的一个js文件 // 应用前先npm install exif-js --save或者直接引入exif-js 调用方法 // let baseD ...
- html 图片滚动 放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. ...
- JS实现图片旋转90度
<!DOCTYPE html> <html> <head><title>图片旋转</title><script>window.o ...
- exif.js html图片旋转,exif.js 实现图片旋转到正常
下载exif.js npm install exif-js --save 引入exif.js import EXIF from 'src/utils/exif-js'; //旋转图片到正常 const ...
- 将base64图片旋转90度,将图片格式化(保持透明背景)
js将图片旋转90度 function rotateBase64Img(src, edg) {var canvas = document.createElement("canvas" ...
- c++中opencv对图片旋转镜像并调整尺寸显示
直接上代码, 如代码注释所示,使用cv库 1.使用imread函数读取输入图片 2.使用resize函数对图片缩放显示 3.使用flip函数对图片镜像 4.使用Rotate函数对图片旋转 5.使用im ...
- 打不过 Chrome 的 Firefox,我为什么要选择?
有没有觉得 Web 网站已经千疮百孔了? 如果你在网上买个烤面包机,那么接下来无论去什么网站或打开任何网页,烤面包机的广告都会一直跟着你.不得不吐槽,现在的 Web 已逐渐沦落,甚至非常烦人,而且不安 ...
- chrome和Firefox浏览器如何访问非安全端口站点
公司某系统采用端口6666,结果用chrome和Firefox都打不开,后来发现是端口问题,解决方式如下: 1.chrome 找到chrome快捷方式,右键查看属性,在[目标]输入框后面追加一个参数– ...
最新文章
- iptraf 打不开
- php 中的 mysqli事务处理
- Oracle数据库ORA-12516:“listener could not find available handler with matching protocol stack!“问题解决方法
- 微软新闻:英雄由此诞生
- Silverlight学习笔记十七BingMap(三)之地图的地区标识
- java打包python到exe文件
- 树莓派静态IP配置方法
- 学习曾国藩,学做人做事学技术
- excel两个表格数据对比_Excel表格技巧—如何统计数据个数
- 极客大学产品经理训练营 产品经理新人如何落地 第0课总结
- 利用运动学实现导弹仿真飞行
- 智课雅思词汇---二十、前缀syn-sym-syl是什么意思
- 张轩睿和Selina要复合?任家萱的粉丝们会同意吗
- 一款开源免费的网站监控系统
- 什么是汽车SOA架构?【长期更新】【800字】【原创】
- 三颗种子开发系统源码
- java文件读取报(文件名、目录名或卷标语法不正确。)
- Elastic Certified Engineer复习记录-复习题详解篇-索引数据(2)
- 7-3 最长公共前后缀
- Redis集群使用指南
热门文章
- Spring MVC-表单(Form)标签-单选按钮集合(RadioButtons)示例(转载实践)
- Anaconda 和 JetBrains 联手推出 'Anaconda的PyCharm'
- eruke注册中心搭建
- mysql提示performance_schema缺表
- JavaScript新知:sessionStorage and localStorage
- java中的==和equals
- jQuery.form.js使用
- phpstorm 10 修改背景图片和字体
- Swing编程基础 之四
- 06年编写的E阳指源码V1.7大放送