使图片旋转的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 标签来实现。

赞 (0)

相关推荐

  • javascript结合canvas实现图片旋转效果

    我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果.本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果.我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转. HTML 我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转. <div id="tool">

  • 让图片旋转任意角度及JQuery插件使用介绍

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度. 不过,貌似在Chrome中总是不显示. 唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽. 解决办法是,把$("#rotate-

  • jQuery实现可以控制图片旋转角度效果(附demo源码下载)

    jQuery实现可以控制图片旋转角度效果(附demo源码下载)

    本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

  • js实现图片旋转的三种方法

    1 使用jQueryRotate.js实现 示例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1 { width: 800px; height: 600px; background-color: #ff0; position: absolute; } .imgRotate { widt

  • 利用C#代码实现图片旋转360度

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Text; namespace 图片旋转程序 { public class ImageHelper { /// <summary> /// 以逆时针为方向对图像进行旋转 /// </summary> /// <param name="

  • PHP图片处理之图片旋转和图片翻转实例

    图片的旋转和翻转也是Web项目中比较常见的功能,但这是两个不同的概念,图片的旋转是按特定的角度来转动图片,而图片的翻转则是将图片的内容按特定的方向对调.图片翻转需要自己编写函数来实现,而旋转图片则可以直接借助GD库中提供的imagerotate()函数完成.该函数的原型如下所示: 复制代码 代码如下: resource  imagerotate(resource src_im ,    float angle,    int bgd_color    [,int ignore_transpatr

  • C#中图片旋转和翻转(RotateFlipType)用法分析

    本文实例分析了C#中图片旋转和翻转(RotateFlipType)用法.分享给大家供大家参考.具体如下: 首次接触Image.RotateFlip时可能会对它的旋转方式搞糊涂,其中旋转时有许多参数如: 1.Rotate90FlipX 2.Rotate90FliY 3.Rotate90FlipXY 4.Rotate90FlipNone 以上面四个为例: 1是指定后接水平翻转的90度顺时针旋转, 2是指定后接垂直翻转的90度顺时针旋转, 3是指定后接水平翻转和垂直翻转的90度顺时针旋转, 4是指定不

  • JS实现3D图片旋转展示效果代码

    JS实现3D图片旋转展示效果代码

    本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

  • Android UI之ImageView实现图片旋转和缩放

    Android UI之ImageView实现图片旋转和缩放

    这一篇,给大家介绍一下ImageView控件的使用,ImageView主要是用来显示图片,可以对图片进行放大.缩小.旋转的功能. android:sacleType属性指定ImageVIew控件显示图片的方式,例如:center表示图像以不缩放的方式显示在ImageView控件的中心,如果设置为fitCenter,表示图像按照比例缩放至合适的位置,并在ImageView控件的中心. 首先我们开发一个简单的案例,实现图片的放大缩小和旋转: 先看看实现的效果: 缩放截图1: 缩放截图2: 旋转截图1

  • 使图片旋转的3种解决方案

    图片旋转效果的研究最近在项目中需要做图片的旋转功能,我研究了一下.下面来总结下图片旋转在各个浏览器的支持情况 一.图片旋转的方案 1)css3实现图片旋转功能:支持的浏览器有chrome,firefox:opera是不支持的. 具体代码为:-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);上述代码的意思就是将图片顺时针旋转90度,其实可以旋转任意的度数.但是支持css3的浏览器只有chrome,firefox3.6 ,safa

  • iOS 图片旋转方法实例代码

    通过 CGImage 或 CIImage 旋转特定角度 UIImage可通过CGImage或CIImage初始化,初始化方法分别为init(cgImage: CGImage, scale: CGFloat, orientation: UIImageOrientation)和init(ciImage: CIImage, scale: CGFloat, orientation: UIImageOrientation).通过UIImageOrientation的不同取值,可以使图片旋转90.180.2

  • iOS实现图片压缩的两种方法及图片压缩上传功能

    两种压缩图片的方法:压缩图片质量(Quality),压缩图片尺寸(Size). 压缩图片质量 NSData *data = UIImageJPEGRepresentation(image, compression); UIImage *resultImage = [UIImage imageWithData:data]; 通过 UIImage 和 NSData 的相互转化,减小 JPEG 图片的质量来压缩图片.UIImageJPEGRepresentation:: 第二个参数 compressi

  • Android实现图片叠加效果的两种方法

    Android实现图片叠加效果的两种方法

    本文实例讲述了Android实现图片叠加效果的两种方法.分享给大家供大家参考,具体如下: 效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(View v) { // 防止出现Immutable bitmap passed to Canvas constructor错误 Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.apple).copy(Bi

  • Json返回时间的格式中出现乱码问题的两种解决方案

    Json返回时间的格式中出现乱码问题的两种解决方案

    前言:这段时间一直没有写博客,首先是我正在实现权限系列的绝色和操作的实现,因为这些东西在前面我们都已经说过了,所以我们就不重复的说这些了,那么我们知道,在我们使用Json返回数据的时候时间的格式一般都会变了,变成我们不认识的一些字符,那么当我们遇到这些问题的时候我们该怎么解决呢,今天我就来小说一下这个的解决方法. .发现问题 (1).正如我们在前言里面所说,我们在编写Json解析时间的时候会返回一些莫名其妙的东西,那么我们是如何解决这个问题的呢?我现在有两种方法可以解决这个问题,下面我们首先来说

  • 详解js跨域原理以及2种解决方案

    详解js跨域原理以及2种解决方案

    1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. 例如: 2.实现原理 在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问. 例如: 这种访问方式是不行的.但是如下方式,

  • Android开发之图片旋转功能实现方法【基于Matrix】

    Android开发之图片旋转功能实现方法【基于Matrix】

    本文实例讲述了Android开发之图片旋转功能实现方法.分享给大家供大家参考,具体如下: 在Android中进行图像旋转需要使用Matrix,它包含了一个3*3的矩阵,专门用于进行图像变换匹配.Matrix ,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作.Matrix没有机构体,它必须初始化,然后通过reset方法和set方法来实现. 首先介绍一下矩阵运算.加法和减法就不用说了,太简单了,对应位相加就好.图像处理,主要用到的是乘法 .下面是一个乘法的公式

  • 详解MySQL双活同步复制四种解决方案

    详解MySQL双活同步复制四种解决方案

    对于数据实时同步,其核心是需要基于日志来实现,是可以实现准实时的数据同步,基于日志实现不会要求数据库本身在设计和实现中带来任何额外的约束. 基于MySQL原生复制主主同步方案  这是常见的方案,一般来说,中小型规模的时候,采用这种架构是最省事的. 两个节点可以采用简单的双主模式,并且使用专线连接,在master_A节点发生故障后,应用连接快速切换到master_B节点,反之也亦然.有几个需要注意的地方,脑裂的情况,两个节点写入相同数据而引发冲突,同时把两个节点的auto_increment_in

  • 微信小程序 Animation实现图片旋转动画示例

    最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现. 首先在wxml中定义image <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image> 注意其中的animati

随机推荐