php js 图片旋转,使图片旋转的3种解决方案_基础知识
图片旋转效果的研究
最近在项目中需要做图片的旋转功能,我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况
一、图片旋转的方案
1)css3实现图片旋转功能:支持的浏览器有chrome,firefox;opera是不支持的。
具体代码为:-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
上述代码的意思就是将图片顺时针旋转90度,其实可以旋转任意的度数。但是支持css3的浏览器只有chrome,firefox3.6 ,safari,ie浏览器是不支持的。那么IE
下该怎么处理呢?于是就有了下面的一种方案
2)在IE下通过滤镜来实现旋转
具体代码为:filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
这里的rotation 参数可以为0,1,2,3 ,表示的意思就是这些数字乘以90后的旋转角度。IE下如果要旋转任意的角度要用到矩阵变换滤镜,我们在日常的使用过程中,
大部分使用的是变换90的倍数,这里就不讨论任意的角度了。但是还是有问题的,如果非ie浏览器,不支持CSS3,那么如果实现图片的旋转呢,其实canvas也是可以图片旋转的。
3)用canvas来实现图片的旋转
canvas在chrome,firefox,opera等浏览器中均支持,他是有一个基于 JavaScript 的绘图 API,。首先我们来看看怎样利用canvas+JavaScript实现图片的旋转
代码如下:
var test = function(){
var canvas = document.getElementById("result");
var oImg = document.getElementById("Img");
canvas.height = 300;
canvas.width = 200;
var context = canvas.getContext("2d");
context.save();
context.translate(200,0);
context.rotate(Math.PI/3);
context.drawImage(oImg, 0, 0, 300, 200);
context.restore();
oImg.style.display = "none";
};
上述代码首先得到一个canvas对象,然后设置他的高度,开始绘图了。这个改变canvas的中心点和旋转角度,然后将图片画到canvas中去,将其存储起来,然后
隐藏之前的图片。这种方法实现还是比较平滑的。
二、各种方案的对比css3的实现方案,不会改变原始图片所占空间的大小的,但是ie下的滤镜会改变图片所占空间的大小。
其实ie下也是可以支持canvas的,只需要引用一个canvas的脚本。这个是有google提供的一个。但是这个脚本有点大,没有压缩前有20多k
我比较建议在ie下使用滤镜来实现,其他的浏览器使用canvas 标签来实现。
相关标签:图片旋转
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php js 图片旋转,使图片旋转的3种解决方案_基础知识相关推荐
- 微软服务器尚未启动是什么问题,Win10系统打开图片提示“应用未启用”的四种解决方案...
Windows10系统不仅给我们带来了全新的界面,也新增了很多新功能.不过,部分用户在使用win10系统时,也会遇到一些令人费解的问题.比如,有windows10用户反馈在打开图片或照片的时候,会出现 ...
- wps中图片怎么居中_wps2010里插入图片如何使图片居中啊!
展开全部 wps2010里插入图片使图片居中的方法如下: 1.首先,打开"WPS文字",新建一个空白文档.然后,62616964757a686964616fe4b893e5b19e ...
- iOS----如何添加背景图片 并使图片可以一直在背景中显示
原文链接:点击打开链接 在AppDelegate.m文件中添加如下代码: UIImage *draw = [ UIImage imageNamed : @"background.jpg&qu ...
- PS:高清晰度的源文件保存成图片如何使图片大小最小
1.第一个快捷键:Ctrl+Alt+i 2.在弹窗里把"分辨率"填72,点击"确定".(72是图片可保存的最小分辨率). 3.第二个快捷键:Ctrl+Alt+S ...
- wps插入图片后使图片完整显示
在word中插入一张图片,右侧部门被遮住了,没有完整显示出来,不方便看. 经过下面操作,将图片单独放到一页中,并设置为横向显示,就可以解决这个问题 操作后的效果:
- poi-tl怎样在word中添加图片并使图片居中
1.在pom.xml文件中导入poi-tl: <dependency><groupId>com.deepoove</groupId><artifactId&g ...
- php文本框限制字节,js限制文本框输入长度两种限制方式(长度、字节数)_基础知识...
功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js function li ...
- php js绝对路径,javascript将相对路径转绝对路径示例_基础知识
这里介绍的其实本质上是两种方法,通过创建DOM或通过JavaScript计算: 1)通过新创建的Image, 经测试会发送一个Aborted的请求,并且IE6不支持, 将new Image改成docu ...
- js+打开php文档,javascript打开word文档的方法_基础知识
首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: fileUpload 然后,在写一个javascript OpenFile方法. 代码如下: funct ...
最新文章
- 谈谈对数据库中ACID、CAP、BASE的认识
- Spring-boot-文件上传大小限制
- 98年建模a题论文_2020年 MathorCup数学建模 A题 无车承运人平台线路定价问题,定价评价...
- php Pthread 多线程 (五) 线程同步
- MySQL两种表存储结构MyISAM和InnoDB的性能比较测试
- 给定数组Arr[n],O(n)时间内找出每个元素左侧所有元素中位置最靠近该元素且大于该元素的元素
- grub shell 错误_使用grub-install修复Grub时出错
- 对于shell脚本参数获取时的一点小技巧
- 项目管理论坛_【项目管理论坛】 第15期:如何做一名优秀的项目经理
- 关于postgre中的pg_hba.conf 文件
- 2018年统计用区划代码和城乡划分代码
- java生成不重复8位数字_生成8位随机不重复的数字编号
- 带有两位小数的元转分
- 递归实现树状分级部门树《部门单表》
- linux下使用ffmpeg将amr转成mp3(转)
- Axios的二次封装(简单易懂)
- Ubuntu20中使用AirSim--亲测可用
- poj 1689 zoj 1422 3002 Rubbery (Geometry + BFS)
- VCS命令详解(二):仿真命令
- 深圳住房公积金制度即将施行 非深户也可缴存
热门文章
- 【奇技淫巧】在安卓模拟器中安装busybox
- 新计算 新网络 新旗舰:华为云C6实例首测
- 【踩坑】Linux下配置torch-geometric
- Android Studio开启虚拟机报错!emulator: ERROR: x86 emulation currently requires hardware acceleration!解决办法梳理
- 利用pandas对一列/多列进行数据区间筛选
- 不用点击_网站推广怎么样才能提高点击量和转化率-西安青云在线
- python怎么测试uwsgi并发量_nginx + uWSGI 为 django 提供高并发
- java String对象转Base64
- VSCode详细安装教程
- 极间电容matlab,电子仿真虚拟实验室