时间:2021-05-26
图片旋转效果的研究
最近在项目中需要做图片的旋转功能,我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况
一、图片旋转的方案
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 标签来实现。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
AndroidListView异步加载图片错位、重复、闪烁分析以及解决方案,具体问题分析以及解决方案请看下文。我们在使用ListView异步加载图片的时候,在快
1.vue打包后font-awesome字体失效解决方案:2.打包后图片资源失效解决方案:针对html中引用的图片针对css添加的背景中引用的图片以上这篇基于v
7月3日消息,据移动支付网消息,近期PayPal宣布在美国正式推出面向小微企业的POS解决方案——PayPalZettle,该产品是一种数字化零售终端解决方案,
有这样一个场景:一个圆形容器,最外层容器的背景为圆弧,现在要将最外层的圆弧进行旋转,保证里面的容器里面的内容不进行旋转,接下来将跟大家分享一种解决方案,先看下最
1.如果图片加a标签在IE9-中会有边框解决方案:img{border:none;}2.rgba不支持IE8解决方案:可以用opacityeg:opacity: