Jquery.rotate实现图片自由旋转，左右90度，输入角度都可以

站长苏飞 · 发表于 2014-8-22 08:44:58

Jquery.rotate实现图片自由旋转，左右90度，输入角度都可以

这个方法我相信在开发中是一个比较常用的方法，

用户上传的图片可能正的，但也可能是反的，还有可能是横的，我们想有好的体验就需要来旋转的看，如果是下载下来，那图片播放器会自带这样的功能，但是网页不会哦。

所以咱们一起来实现一下。
先看效果

方法很简单，大家直接看Html代码

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>美图WEB开放平台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../Script/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../Script/rotate.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Left() {
            $("#imgtest").rotateLeft()
        }
        function Right() {
            $("#imgtest").rotateRight()
        }
        function Rotate() {
            $("#imgtest").rotate($("#txtnumber").val());
        }
    </script>
    <style type="text/css">
        html, body { height: 100%; overflow: hidden; }
        body { margin: 0; }
    </style>
</head>
<body>
输入要旋转的角度：<input id="txtnumber" type="text" value="45" />

<button type="button">Rotate</button>
<button type="button">left</button>
<button type="button">right</button>
    <div id="">
        <img id="imgtest" src="http://www.sufeinet.com/template/veikei_dz_life_20130810_plus/images/logo.png?2014-06-06" />
    </div>
</body>
</html>

Jquery我就不提供了这个大家自己下载吧。
我提供一下rotate.js
如下

[JavaScript] 纯文本查看 复制代码

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);
}

		自动登录	找回密码
密码			马上注册

[Jquery] Jquery.rotate实现图片自由旋转，左右90度，输入角度都可以

本帖被以下淘专辑推荐:

相关帖子